Formulir HTML
Formulir HTML digunakan untuk mengumpulkan input pengguna. Input pengguna paling sering dikirim ke server untuk diproses.
Contoh
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.
Semua elemen formulir yang berbeda tercakup dalam bab ini: Elemen Formulir HTML .
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="teks"> | Menampilkan bidang input teks satu baris |
| <input type="radio"> | Menampilkan tombol radio (untuk memilih salah satu dari banyak pilihan) |
| <input type="kotak centang"> | Menampilkan kotak centang (untuk memilih nol atau lebih dari banyak pilihan) |
| <input type="kirim"> | Menampilkan tombol kirim (untuk mengirimkan formulir) |
| <input type="tombol"> | Menampilkan tombol yang dapat diklik |
Semua tipe input yang berbeda tercakup dalam bab ini: Tipe Input HTML .
Bidang Teks
<input type="text">Mendefinisikan bidang input satu baris untuk input teks .
Contoh
Formulir dengan bidang input untuk teks:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Berikut adalah bagaimana kode HTML di atas akan ditampilkan di browser:
Catatan: Formulir itu sendiri tidak terlihat. Perhatikan juga bahwa lebar default bidang input adalah 20 karakter.
Elemen <label>
Perhatikan penggunaan <label>elemen pada contoh di atas.
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 fortag <label>harus sama dengan idatribut <input>
elemen untuk mengikatnya bersama.
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:
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"> I have a bike</label><br>
<input
type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">
I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Berikut adalah bagaimana kode HTML di atas akan ditampilkan di browser:
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">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Berikut adalah bagaimana kode HTML di atas akan ditampilkan di browser:
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">First
name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>