Belajar Membuat Formulir HTML

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

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

Belajar Membuat Formulir HTML

Formulir HTML diperlukan untuk mengumpulkan berbagai jenis input pengguna, seperti detail kontak seperti nama, alamat email, nomor telepon, atau detail seperti informasi kartu kredit, dll.

Elemen <input>

Elemen HTML adalah elemen bentuk yang paling banyak digunakan. <input>

Elemen dapat ditampilkan dalam banyak cara, tergantung pada atributnya.<input>type

Berikut adalah beberapa contoh:

Jenis	Deskripsi
<input type="text">	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="submit">	Menampilkan tombol kirim (untuk mengirimkan formulir)
<input type="tombol">	Menampilkan tombol yang dapat diklik

 Bidang Teks

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

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

Beginilah cara kode HTML di atas akan ditampilkan di browser:

Nama depan:

Nama belakang:

Elemen <label>

Perhatikan penggunaan elemen pada contoh di atas. <label>

Tag mendefinisikan label untuk banyak elemen bentuk.<label>

Elemen ini berguna untuk pengguna pembaca layar, karena pembaca layar akan membaca dengan keras label ketika pengguna fokus pada elemen input.<label>

Elemen ini juga membantu pengguna yang mengalami kesulitan mengklik wilayah yang sangat kecil (seperti tombol radio atau kotak centang) - karena ketika pengguna mengklik teks di dalam elemen, itu beralih tombol radio / kotak centang.<label><label>

Atribut tag harus sama dengan atribut elemen untuk mengikatnya bersama-sama. for<label>id<input>

Tombol Radio

Tombol ini mendefinisikan sebuah tombol radio.<input type="radio">

Tombol radio memungkinkan pengguna memilih SALAH satu dari sejumlah pilihan terbatas.

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

Beginilah cara kode HTML di atas akan ditampilkan di browser:

Pilih bahasa Web favorit Anda:

 HTML
 CSS
 JavaScript

Kotak centang

Kotak centang mendefinisikan.<input type="checkbox">

Kotak centang memungkinkan pengguna memilih opsi NOL atau LEBIH dari sejumlah pilihan terbatas.

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

Beginilah cara kode HTML di atas akan ditampilkan di browser:

 Aku punya sepeda
 aku punya mobil
 aku punya perahu

Tombol Kirim

Tombol ini mendefinisikan untuk mengirimkan data formulir ke penangan formulir.<input type="submit">

Form-handler biasanya file di server dengan script untuk memproses data input.

Penangan formulir ditentukan dalam atribut formulir.action

<form action="/action_page.php">

  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Jodie"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Setiawan"><br><br>
  <input type="submit" value="Submit">
</form>

Beginilah cara kode HTML di atas akan ditampilkan di browser:

Nama depan:

Nama belakang:

Atribut Formulir yang Sering Digunakan

Tabel berikut mencantumkan atribut elemen formulir yang paling sering digunakan:

Atribut	DESKRIPSI
name	Menentukan nama formulir.
action	Menentukan URL program atau skrip di server web yang akan digunakan untuk memproses informasi yang dikirimkan melalui formulir.
method	Menentukan metode HTTP yang digunakan untuk mengirim data ke server web oleh browser. Nilainya bisa berupa (default) dan .getpost
target	Menentukan di mana menampilkan respons yang diterima setelah mengirimkan formulir. Nilai yang mungkin adalah , , , dan ._blank_self_parent_top
enctype	Menentukan bagaimana data formulir harus dikodekan saat mengirimkan formulir ke server. Hanya berlaku jika nilai atribut adalah .methodpost

Formulir berisi elemen khusus yang disebut kontrol seperti kotak input, kotak centang, tombol radio, tombol kirim, dll. Pengguna umumnya mengisi formulir dengan memodifikasi kontrolnya misalnya memasukkan teks, memilih item, dll. dan mengirimkan formulir ini ke server web untuk diproses lebih lanjut.