Formulir HTML

Formulir HTML digunakan untuk mengumpulkan input pengguna. Input pengguna paling sering dikirim ke server untuk diproses.

Contoh

Nama depan:

Nama belakang:

Elemen <form>

Elemen HTML <form>digunakan untuk membuat formulir HTML untuk input pengguna:

<form>
.
form elements
.
</form>

Elemen <form>adalah wadah untuk berbagai jenis elemen input, seperti: bidang teks, kotak centang, tombol radio, tombol kirim, dll.

Elemen <input>

Elemen HTML <input> adalah elemen form yang paling banyak digunakan. Sebuah <input> elemen dapat ditampilkan dalam banyak cara, tergantung pada type atributnya.

Berikut beberapa contohnya:

Jenis	Keterangan
<input type="text">	Menampilkan bidang input teks satu baris
<input type="radio">	Menampilkan tombol radio (untuk memilih salah satu dari banyak pilihan)
<input type="checkbox">	Menampilkan kotak centang (untuk memilih nol atau lebih dari banyak pilihan)
<input type="submit">	Menampilkan tombol kirim (untuk mengirimkan formulir)
<input type="button">	Menampilkan tombol yang dapat diklik

Bidang Teks

<input type="text">Mendefinisikan bidang input satu baris untuk input teks.

Contoh

Formulir dengan bidang input untuk teks:

<form>
  <label for="fname">Nama depan:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Nama belakang:</label><br>
  <input type="text" id="lname" name="lname">
</form>

Berikut adalah bagaimana kode HTML di atas akan ditampilkan di browser:

Nama depan:

Nama belakang:

Elemen <label>

Perhatikan penggunaan <label> elemen pada contoh diatas. Tag <label> mendefinisikan label untuk banyak elemen bentuk.

Elemen <label> ini berguna bagi pengguna pembaca layar, karena pembaca layar akan membacakan label dengan keras saat pengguna fokus pada elemen input.

Elemen ini <label> juga membantu pengguna yang mengalami kesulitan mengklik wilayah yang sangat kecil (seperti tombol radio atau kotak centang)-karena ketika pengguna mengklik teks di dalam <label> elemen, itu akan mengaktifkan tombol radio/kotak centang. Atribut for tag <label> harus sama dengan id atribut <input> elemen untuk mengikatnya.

Tombol radio

<input type="radio"> Mendefinisikan tombol radio. Tombol radio memungkinkan pengguna memilih SATU dari sejumlah pilihan yang terbatas.

Contoh

Formulir dengan tombol radio:

<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

Berikut adalah bagaimana kode HTML di atas akan ditampilkan di browser:

Pilih bahasa Web favorit Anda:

 HTML
 CSS
 JavaScript

Kotak Centang

<input type="checkbox">Mendefinisikan kotak centang. Kotak centang memungkinkan pengguna memilih opsi NOL atau LEBIH dari sejumlah pilihan terbatas.

Contoh

Formulir dengan kotak centang:

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> Saya punya sepeda</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> Saya punya motor</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> Saya punya mobil</label>
</form>

Berikut adalah bagaimana kode HTML di atas akan ditampilkan di browser:

 saya punya sepeda
 saya punya motor
 aku punya mobil

Tombol Kirim

<input type="submit">Mendefinisikan tombol untuk mengirimkan data formulir ke penangan formulir. Form-handler biasanya berupa file di server dengan skrip untuk memproses data input. Form-handler ditentukan dalam action atribut form.

Contoh

Formulir dengan tombol kirim:

<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="Does"><br><br>
  <input type="submit" value="Kirim">
</form>

Berikut adalah bagaimana kode HTML di atas akan ditampilkan di browser:

Nama Depan:

Nama Belakang:

Atribut Nama untuk <input>

Perhatikan bahwa setiap bidang input harus memiliki nameatribut yang akan dikirimkan. Jika nameatribut dihilangkan, nilai bidang input tidak akan dikirim sama sekali.

Contoh

Contoh ini tidak akan mengirimkan nilai bidang input "Nama depan": 

<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>

Nama Depan: