Form dan Input HTML
Form dan input HTML Elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna web. Pengguna web dapat memasukkan input melalui halaman-halaman HTML Elemen / TAG digunakan untuk membatasi input. Dlama stu form dapat terdiri atas beberapa form, akan tetapi hanya satu form yang dapat dikirimkan ke server dalam satu saat Form tidak dapat berbentuk nested
Form dan input HTML Sintaks <form action=“_url_” method =“get/ post” > </form> Atribut Action tempat menspesifikasikan URL yang akan digunakan sebagai pemrogses field input form URL adalah lokasi dokumen yang akan melakukan proses terhadap input dari form Atribut method digunakna untuk menyatakan bagaimana masukan-masukan berasal dari form dikirmkan kepada program.
Jenis masukan dalam Form Text Digunakan untuk memasukkan suatu nilai untuk dikirimkan kepada server. Nilai yang dimasukkan dapat berupa angka maupun teks. Properti kedua kontrol ini adalah : Name, adalah nama dari kontrol tersebut Size, adalah ukuran dari kontrol tersebut value, adalah text yang tertulis pada kontrol Maxlength, adalah panjang maksimal karakter yang diperbolehkan
Contoh text <html> <head> <title> Contoh </title> </head> <body> <form> Nama Depan : <input type ="text" name="nama“ > <br> Nama Keluarga : <input type="text" name="namakeluarga"> </form> </body> </html>
Jenis masukan dalam Form Radio Menyediakan beberapa pilihan yang bisa dipilih. Properti yang ada pada radio dan check box adalah : Name, adalah nama dari kontrol Value, adalah nilai pada kontrol yang tidak dapat di tampilkan, tetapi dapat dioleh melalui masukan user Checked, digunakan memberi tanda bahwa pilihan tersebut sedang diaktifkan. Default, adalah kontrol yang telah dipilih secara default
Contoh Radio <html> <head> <title> Contoh </title> </head> <body> <form> Jenis Kelamin : <input type="radio" checked name="jenis">Laki - laki <input type="radio" name="jenis">Perempuan </form> </body> </html>
Jenis masukan dalam Form Checkbox Menyediakan beberapa pilihan, bisa lebih dari satu pilihan yang dipilih. Tampilannya berupa kotak yang dapat diberi tanda centang/contreng. Jenis ini biasa digunakan untuk memasukkan data pilihan yang pilihannya bisa lebih dari satu, seperti hobby, makanan, dan lain-lain.
Contoh Check box <html> <head> <title> Contoh </title> </head> <body> <form> Hobby : <br> <INPUT TYPE=CHECKBOX NAME="sepak bola"> sepak bola <INPUT TYPE=CHECKBOX NAME="tenis"> tenis <INPUT TYPE=CHECKBOX NAME="renang"> renang <INPUT TYPE=CHECKBOX NAME="basket"> basket </form> </body> </html>
Jenis masukan dalam Form Password Jenis ini hampir sama dengan jenis TYPE = TEXT berupa kolom kecil yang hanya dapat menampung sebaris tulisan, bedanya pada jenis ini semua tulisan yang diketikkan pada kolom tersebut tidak akan ditampilkan tetapi diganti menjadi tanda ● atau * sehingga kerahasiaannya akan terjamin. Jenis ini memang ditujukan untuk penulisan data berupa password sehingga kerahasiaannya harus sangat dijaga
Contoh Password <html> <head> <title> Contoh </title> </head> <body> <form> Password: <INPUT TYPE="PASSWORD" NAME="katasandi"> </form> </body> </html>
Jenis masukan dalam Form List Menyediakan pilihan dalam bentuk list pilihan. Text area Digunakan untuk memasukkan data dalam bentuk data teks berupa memo. Button Digunakan untuk mendefinisikan tombol untuk melakukan pemrosesan form. Biasanya disetiap form terdapat button
Contoh LIST <html> <head> <title> Contoh </title> </head> <body> <form> Merek Mobil yang Anda suka : <select name = "mobil"> <option value="volvo">volvo <option value="kuda">Kuda <option value="kijang">Kijang <option value="honda" selected>Honda Stream </select> </form> </body> </html>
Contoh textarea <html> <head> <title> Contoh </title> </head> <body> Ini adalah contoh mengggunakan textarea untuk memasukkan data berupa komentar ataupun catatan lainnya, bersifat mirip artikel <form> Saran / kritik <textarea rows="10" cols="20" name="saran"></textarea> </form> </body> </html>
Contoh Button <html> <head> <title> Contoh </title> </head> <body> <form method="post" action="hasil.html"> Nama: <input type="text" name="nama"> <br> <input type="submit" value="kirim"> <input type="reset" value="hapus"> </form> </body> </html>