Belajar HTML Part 24 - Elemen-Elemen Form di HTML

Pada pembahasan ini akan menjelaskan semua elemen form pada HTML

Elemen <Input>

Elemen <input> merupakan elemen form yang paling penting. Elemen <input> dapat ditampilkan dengan beberapa cara, tergantung pada jenis atribut.

Contoh

<!DOCTYPE html>
<html>
<body>

<form>
  Masukkan nama Anda:
  <input name="namadepan" type="text">
  <br><br>
  <input type="submit">
</form>

</body>
</html>

Hasilnya:

Jika elemen <input> dihilangkan, maka hanya akan menampilkan teks biasa.

Elemen <Select>

Elemen <select> mendefinisikan list drop-down:

Contoh

<!DOCTYPE html>
<html>
<body>

<form>
  <select name="nama_kota">
    <option value="Gorontalo">Gorontalo</option>
    <option value="Palu">Palu</option>
    <option value="Manado">Manado</option>
    <option value="Kendari">Kendari</option>
  </select>
  <br><br>
  <input type="submit">
</form>

</body>
</html>

Hasilnya:

Elemen <option> mendefinisikan opsi yang bisa dipilih.
Secara default, item yang dipilih adalah item yang pertama dalam daftar drop-down.
Untuk menentukan option yang kita inginkan walaupun option tersebut tidak pada item pertama, tambahkan atribut selected pada option yang diinginkan, seperti contoh berikut:

Contoh

<option value="Manado" selected>Manado</option>

Hailnya:

Visible Values:

Visible Values artinya boleh menggunakan atribut size untuk menentukan jumlah option yang terlihat.

Contoh

<select name="nama_kota" size="3">
    <option value="Gorontalo">Gorontalo</option>
    <option value="Palu">Palu</option>
    <option value="Manado">Manado</option>
    <option value="Kendari">Kendari</option>
</select>

Hasilnya:

Allow Multiple Selections:

Allow Multiple Selections artinya boleh menggunakan beberapa atribut untuk memilih lebih dari satu option.

Contoh

<select name="nama_kota" size="4" multiple>
    <option value="Gorontalo">Gorontalo</option>
    <option value="Palu">Palu</option>
    <option value="Manado">Manado</option>
    <option value="Kendari">Kendari</option>
</select>

Hasilnya:

Elemen <textarea>

Elemen <textarea> mendefinisikan kolom input bersifat multi-line (text area) artinya ukurannya lebih dari satu baris.

Contoh

<!DOCTYPE html>
<html>
<body>

<form>
  <textarea name="pesan" rows="10" cols="30">Belajarlah dengan giat!</textarea>
  <br>
  <input type="submit">
</form>

</body>
</html>

Atribut rows (baris) menentukan jumlah baris yang terlihat dalam area teks.
Atribut cols (kolom) menentukan width atau lebar yang terlihat dalam area teks.

Kita juga bisa menentukan ukuran teks area dengan menggunakan style (CSS):

Contoh

<!DOCTYPE html>
<html>
<body>

<form>
  <textarea name="pesan" style="width:200px; height:150px;">Belajarlah dengan giat!</textarea>
  <br>
  <input type="submit">
</form>

</body>
</html>

Hasil dari kedua contoh elemen <textarea> diatas:

Elemen <button>

Elemen <button> mendefinisikan tombol button yang bisa diklik.

Contoh

<!DOCTYPE html>
<html>
<body>

<button type="button" onclick="alert('Hello World!')">Klik disini!</button>

</body>
</html>

Hasilnya:

Catatan: Gunakan selalu atribut type dalam menentukan elemen button. Browser yang berbeda dapat menggunakan type default yang berbeda untuk elemen button.

Elemen baru pada Form di HTML5

HTML5 menambahkan elemen form berikut:

<datalist>
<output>

Catatan: Browser tidak menampilkan elemen-elemen yang tidak diketahui. Elemen-elemen baru yang tidak didukung oleh browser lama tidak akan "merusak" halaman web kita.

Elemen HTML5 <datalist>

Elemen <datalist> digunakan untuk menentukan daftar pilihan yang telah ditentukan untuk elemen <input>
Atribut list dalam elemen <input> harus mengacu pada atribut id dari elemen <datalist>

Untuk lebih jelasnya, perhatikan contoh berikut:

Contoh

<!DOCTYPE html>
<html>
<body>

<form>
  <input list="browsers" 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 support di Safari atau IE9 (dan versi sebelumnya).</p>
<p>Klik pada tanda segitiga hitam yang ada di kolom di atas! Maka akan muncul datalist-nya</p>

</body>
</html>

Hasilnya:

Elemen HTML5 <output>

Elemen <output> merupakan elemen yang mewakili hasil perhitungan (seperti yang dilakukan oleh java script).

Contoh
Melakukan perhitungan dan menampilkan hasil dalam elemen <output>:

<!DOCTYPE html>
<html>
<body>

<form
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 output tidak didukung di Edge 12 atau Internet Explorer dan versi sebelumnya.</p>

</body>
</html>

Hasilnya:

Berikut adalah tabel yang berisi elemen-elemen form:

Elemen	Deskripsi
<form>	Mendefinisikan sebuah form input untuk pengguna
<input>	Mendefinisikan sebuah kontrol input
<textarea>	Mendefinisikan sebuah kontrol input multi-line
<label>	Mendefinisikan label untuk sebuah elemen
<fieldset>	Mendefinisikan grup elemen terkait dalam form
<legend>	Mendefinisikan sebuah caption untuk elemen
<select>	Mendefinisikan sebuah daftar drop-down
<optgroup>	Mendefinisikan sekelompok opsi terkait dalam daftar drop-down
<option>	Mendefinisikan sebuah opsi dalam daftar drop-down
<button>	Mendefinisikan sebuah tombol yang dapat diklik
<datalist>	Menentukan daftar pilihan yang telah ditentukan untuk elemen <input>
<output>	Mendefinisikan elemen yang mewakili hasil perhitungan