Bab ini menjelaskan perbedaan semua elemen form pada HTML.
Section Artikel
Elemen <form> HTML
elemen form pada HTML dapat berisi satu atau lebih dari elemen form berikut ini:
- <input>
- <label>
- <select>
- <textarea>
- <button>
- <fieldset>
- <legend>
- <datalist>
- <output>
- <optgroup>
Elemen <input>
Salah satu elemen form yang paling sering digunakan adalah elemen <input>.
Elemen <input> dapat ditampilkan dalam beberapa cara, bergantung pada tipe atribut.
Contoh :
<!DOCTYPE html> <html> <body> <h2>Elemen input</h2> <form action="/action_page.php"> <label for="fname">Nama depan:</label><br> <input type="text" id="fname" name="fname"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
Elemen <label>
Elemen <label> mendefinisikan label untuk beberapa elemen form.
Elemen <label> berguna untuk pengguna, karena layar akan menampilkan teks pada label 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 dalam elemen <label> , tradio button atau checkbox akan berubah.
Atribut for dari tag <label> harus sama dengan atribut id dari elemen <input> untuk mengikatnya bersama.
Elemen <select>
Elemen <select> mendefinisikan daftar drop-down.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>Elemen select</h2>
<p>Elemen select mendefinisikan daftar drop-down.:</p>
<form action="/action_page.php">
<label for="cars">Pilih Mobil:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>
Elemen <option> menentukan opsi yang bisa dipilih.
Secara default, item pertama dalam daftar drop-down akan dipilih.
Untuk menentukan pre-selected Option, tambahkan atribut yang dipilih ke opsi.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>Pre-selected Option</h2>
<p>Anda dapat memilih pre-selected option dengan atribut yang dipilih:</p>
<form action="/action_page.php">
<label for="cars">Pilih mobil:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>
Nilai yang Terlihat:
Gunakan atribut size [ukuran] untuk menentukan jumlah nilai yang dapat dilihat.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>Visible Values</h2>
<p>Gunakan atribut size untuk menentukan jumlah nilai yang terlihat.</p>
<form action="/action_page.php">
<label for="cars">Pilih mobil:</label>
<select id="cars" 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><br><br>
<input type="submit">
</form>
</body>
</html>
Atribut Multiple:
Gunakan atribut multiple untuk memungkinkan pengguna memilih lebih dari satu nilai.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>Atribut Multiple</h2>
<p>Gunakan atribut multiple untuk memungkinkan pengguna memilih lebih dari satu nilai.</p>
<form action="/action_page.php">
<label for="cars">Pilih mobil:</label>
<select id="cars" 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><br><br>
<input type="submit">
</form>
<p>Tahan tombol Ctrl (windows) / Command (Mac) untuk memilih beberapa opsi.</p>
</body>
</html>
Elemen <textarea>
Elemen <textarea> mendefinisikan text field multi-baris (area teks).
Contoh :
<!DOCTYPE html> <html> <body> <h2>Textarea</h2> <p>Elemen <textarea> mendefinisikan text field inputan multi-baris (area teks).</p> <form action="/action_page.php"> <textarea name="message" rows="10" cols="30">Kucing itu sedang bermain di taman.</textarea> <br><br> <input type="submit"> </form> </body> </html>
Atribut rows menentukan jumlah baris yang terlihat di area teks.
Atribut cols menentukan lebar yang terlihat dari area teks.
Anda juga dapat menentukan ukuran area teks dengan menggunakan CSS.
Contoh :
<!DOCTYPE html> <html> <body> <h2>Styling Textarea</h2> <p>Gunakan CSS untuk mengubah ukuran textarea:</p> <form action="/action_page.php"> <textarea name="message" style="width:200px; height:600px;">Kucing itu sedang bermain di taman.</textarea> <br> <input type="submit"> </form> </body> </html>
Elemen <button> mendefinisikan tombol yang dapat diklik.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>Elemen button</h2>
<button type="button" onclick="alert('Hello World!')">Klik disini!</button>
</body>
</html>
Catatan: Selalu tentukan tipe atribut untuk elemen button. Setiap rowser yang berbeda dapat menggunakan tipe default yang berbeda untuk elemen button.
Elemen <fieldset> dan <legend>
Elemen fieldset digunakan untuk mengelompokkan data yang berkaitan dalam form.
Elemen <legend> mendefinisikan keterangan untuk elemen <fieldset>.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>Mengelompokan data dari Forw menggunakan Fieldset</h2>
<p>Elemen fieldset digunakan untuk mengelompokkan data yang berkaitan dalam form dan Elemen legend mendefinisikan keterangan untuk elemen fieldset. </p>
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<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">
</fieldset>
</form>
</body>
</html>
Elemen <datalist>
Elemen <datalist> menentukan daftar pre-option untuk elemen <input> .
Pengguna akan melihat daftar drop-down dari opsi yang telah ditentukan saat mereka memasukkan data.
Atribut list dari elemen <input> , harus mengacu pada atribut id dari elemen <datalist>.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>Elemen datalist</h2>
<p>Elemen datalist menentukan daftar pre-option untuk elemen input .</p>
<form action="/action_page.php">
<input list="browser" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><b>Catatan:</b> Tag datalist tidak didukung di Safari versi 12.1 dan versi sebelumnya.</p>
</body>
</html>
Elemen <output>
Elemen <output> mewakili hasil penghitungan (seperti yang dilakukan pada script).
Contoh :
Lakukan penghitungan dan tunjukkan hasilnya dalam elemen .
<!DOCTYPE html> <html> <body> <h2>Elemen Output</h2> <p>Elemen output mewakili hasil perhitungan.</p> <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> <p><strong>Catatan:</strong> Elemen keluaran tidak didukung di Edge versi 13 dan versi sebelumnya.</p> </body> </html>
Elemen Form HTML
| Tag | Description |
|---|---|
| <form> | Mendefinisikan bentuk HTML untuk inputan pengguna |
| <input> | Mendefinisikan kontrol input |
| <textarea> | Mendefinisikan kontrol input multiline (area teks) |
| <label> | Mendefinisikan label untuk elemen |
| <fieldset> | Mengelompokkan elemen-elemen terkait dalam sebuah formulir |
| <legend> | Mendefinisikan sebuah caption untuk elemen <fieldset> |
| <select> | Mendefinisikan daftar drop-down |
| <optgroup> | Mendefinisikan sekelompok opsi terkait dalam daftar drop-down |
| <option> | Mendefinisikan opsi dalam daftar drop-down |
| <button> | Mendefinisikan tombol yang dapat diklik |
| <datalist> | Menentukan daftar opsi yang telah ditentukan untuk kontrol input |
| <output> | Mendefinisikan hasil kalkulasi |
