Bab ini menjelaskan perbedaan semua elemen form pada HTML.
Section Artikel
elemen form pada HTML dapat berisi satu atau lebih dari elemen form berikut ini:
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> 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> 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> 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" >
Catatan: Selalu tentukan tipe atribut untuk elemen button. Setiap rowser yang berbeda dapat menggunakan tipe default yang berbeda untuk elemen button.
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> 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> 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>
| 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 |