Form pada HTML digunakan untuk mengumpulkan inputan dari pengguna. Inputan dari pengguna paling sering dikirim ke server untuk diproses.
Contoh :
<!DOCTYPE html> <html> <body> <h2>HTML Forms</h2> <form action="/action_page.php"> <label for="fname">Nama Depan:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Nama Belakang:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form> <p>Jika Anda mengklik tombol "Submit", data dari form akan dikirim ke halaman bernama "/action_page.php".</p> </body> </html>
Section Artikel
Elemen <form>
Elemen <form> HTML digunakan untuk membuat formulir input data pada HTML oleh pengguna.
<form> . form elements . </form>
Elemen <form> adalah wadah untuk berbagai jenis elemen masukan, seperti: textfield, checkbox, radio button, tombol submit, dll.
Semua elemen form yang berbeda dibahas dalam bab selanjutnya.
Elemen <input>
Elemen <input> pada HTML adalah elemen form yang paling banyak digunakan.
Sebuah elemen dapat ditampilkan dengan berbagai cara, bergantung pada tipe atributnya
Berikut beberapa contohnya:
| Type | Description |
|---|---|
| <input type=”text”> | Menampilkan text field sebaris |
| <input type=”radio”> | Menampilkan tombol radio (untuk memilih salah satu dari banyak pilihan) |
| <input type=”checkbox”> | Menampilkan checkbox (untuk memilih nol atau lebih dari banyak pilihan) |
| <input type=”submit”> | Menampilkan tombol submit (untuk mengirimkan formulir) |
| <input type=”button”> | Menampilkan tombol yang dapat diklik |
Text Field
<input type=”text”> mendefinisikan text field sebaris untuk masukan teks.
Contoh :
<!DOCTYPE html> <html> <body> <h2>Input Text field</h2> <form> <label for="fname">Nama depan:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Nama belakang:</label><br> <input type="text" id="lname" name="lname" value="Doe"> </form> <p>Perhatikan bahwa form itu sendiri tidak terlihat.</p> <p>Perhatikan juga bahwa lebar default kolom input teks adalah 20 karakter.</p> </body> </html>
Catatan: Form tidak terlihat. Perhatikan juga bahwa lebar default kolom input adalah 20 karakter.
Elemen <label>
Perhatikan penggunaan elemen <label> pada contoh di atas.
Tag <label> mendefinisikan label untuk banyak elemen form.
Elemen <label> berguna untuk end user, karena layar akan menampilkan label dengan jelas dan pengguna fokus pada elemen masukan.
Elemen <label> juga membantu pengguna yang kesulitan mengklik wilayah yang sangat kecil (seperti radio button atau checkbox) – karena ketika pengguna mengklik teks di dalam elemen <label> , radio button atau checkbox akan berubah.
Atribut for dari tag <label> harus sama dengan atribut id dari elemen <input> untuk mengikat keduanya.
Radio Button
<input type=”radio”> mendefinisikan tombol radio.
Tombol radio memungkinkan pengguna memilih SALAH SATU dari sejumlah pilihan.
Contoh :
<!DOCTYPE html> <html> <body> <h2>Radio Button</h2> <form> <input type="radio" id="male" name="gender" value="male"> <label for="male">Laki-laki</label><br> <input type="radio" id="female" name="gender" value="female"> <label for="female">Perempuan</label><br> <input type="radio" id="other" name="gender" value="other"> <label for="other">Lainya</label> </form> </body> </html>
Checkbox
<input type=”checkbox”> mendefinisikan kotak pilihan yang dicentang.
Checkbox memungkinkan pengguna memilih opsi NOL atau LEBIH BANYAK dari sejumlah pilihan.
Contoh :
<!DOCTYPE html> <html> <body> <h2>Checkbox</h2> <p><strong>input type="checkbox"</strong> mendifinisikan checkbox:</p> <form action="/action_page.php"> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> Aku punya sepeda</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> Aku punya mobil</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> Aku punya kapal</label><br><br> <input type="submit" value="Submit"> </form> </body> </html>
Submit Button
<input type=”submit”> mendefinisikan tombol untuk mengirimkan data formulir ke form-handler.
Form-handler biasanya adalah file dalam server dengan script untuk memproses data masukan.
Form-handler ditentukan dalam atribut form action.
Contoh :
<!DOCTYPE html> <html> <body> <h2>Form HTML</h2> <form action="/action_page.php"> <label for="fname">Nama depan:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Nama belakang:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form> <p>Jika Anda mengklik tombol "submit", data formulir akan dikirim ke halaman bernama "/action_page.php".</p> </body> </html>
Atribut name untuk <input>
Perhatikan bahwa setiap kolom masukan harus memiliki atribut name untuk dikirimkan.
Jika atribut name dihilangkan, nilai field input tidak akan dikirim sama sekali.
Contoh :
Contoh ini tidak akan mengirimkan nilai dari kolom input “Nama depan”:
<!DOCTYPE html> <html> <body> <h2>Atribut name</h2> <form action="/action_page.php"> <label for="fname">Nama depan:</label><br> <input type="text" id="fname" value="John"><br><br> <input type="submit" value="Submit"> </form> <p>Jika Anda mengklik tombol "submit", data formulir akan dikirim ke halaman bernama "/action_page.php".</p> <p>Perhatikan bahwa nilai field "Nama depan" tidak akan dikirimkan, karena elemen masukan tidak memiliki atribut name.</p> </body> </html>
