Elemen Form dalam HTML
Bab ini menjelaskan semua elemen form HTML.
Elemen <input>
Unsur form yang paling penting adalah elemen <input>.
Elemen <input> dapat ditampilkan dalam beberapa cara, tergantung pada atribut type.
<input name="firstname" type="text">
Jika atribut type dihilangkan, field input mendapat tipe default: "text".
Semua jenis masukan yang berbeda tercakup dalam bab berikutnya.
Elemen <select>
Elemen <select> mendefinisikan daftar drop-down:
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Elemen <option> mendefinisikan opsi yang dapat dipilih.
Secara default, item pertama dalam daftar drop-down dipilih.
Untuk menentukan pilihan yang telah dipilih sebelumnya, tambahkan atribut option ke pilihan:
<option value="fiat" selected>Fiat</option>
Nilai Terlihat:
Gunakan atribut size untuk menentukan jumlah nilai yang dapat dilihat:
<select name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Izinkan Beberapa Seleksi:
Gunakan beberapa atribut untuk memungkinkan pengguna memilih lebih dari satu value:
<select name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Elemen <textarea>
Elemen <textarea> mendefinisikan field input multi-line (area teks):
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Atribut rows menentukan jumlah baris yang terlihat di area teks.
Atribut cols menentukan lebar gambar dari area teks.
Anda juga dapat menentukan ukuran area teks dengan menggunakan CSS:
<textarea name="message"
style="width:200px; height:600px">
The cat was playing in the garden.
</textarea>
Elemen <button>
Elemen <button> mendefinisikan tombol yang dapat diklik:
<button type="button"
onclick="alert('Hello World!')">Click Me!</button>
Catatan: Selalu tentukan atribut type untuk elemen button. Browser yang berbeda mungkin menggunakan type default yang berbeda untuk elemen button.
HTML5 Form Elements
HTML5 menambahkan elemen formulir berikut:
<datalist>
<output>
Catatan: Browser tidak menampilkan elemen yang tidak diketahui. Unsur baru yang tidak didukung di browser lawas tidak akan "menghancurkan" laman web Anda.
Elemen HTML5 <datalist>
Elemen <datalist> menentukan daftar opsi yang telah ditentukan sebelumnya untuk elemen <input>.
Pengguna akan melihat daftar drop-down dari pilihan yang telah ditentukan saat mereka memasukkan data.
Atribut daftar elemen <input>, harus merujuk ke atribut id elemen <datalist>.
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Elemen HTML5 <output>
Elemen <output> mewakili hasil perhitungan (seperti yang dilakukan oleh skrip).
Contoh
Lakukan perhitungan dan tampilkan hasilnya di elemen <output>:
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
HTML Form Elements
| Tag | Description |
|---|---|
| <form> | Mendefinisikan bentuk HTML untuk input pengguna |
| <input> | Mendefinisikan sebuah kontrol input |
| <textarea> | Mendefinisikan kontrol input multiline (area teks) |
| <label> | Mendefinisikan label untuk elemen <input> |
| <fieldset> | Grup elemen terkait dalam form |
| <legend> | Mendefinisikan sebuah caption untuk elemen <fieldset> |
| <select> | Mendefinisikan daftar drop-down |
| <optgroup> | Mendefinisikan sekelompok pilihan terkait dalam daftar drop-down |
| <option> | Mendefinisikan pilihan dalam daftar drop-down |
| <button> | Mendefinisikan sebuah tombol yang bisa diklik |
| <datalist> | Menentukan daftar pilihan yang telah ditentukan untuk kontrol masukan |
| <output> | Mendefinisikan hasil perhitungan |
Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2