Cara Membuat Form HTML

Cara Membuat Form HTML

Form adalah tag atau elemen HTML khusus yang digunakan untuk mengumpulkan data dari pengguna. Data yang diinput oleh pengguna dikirimkan ke server untuk diproses atau dihitung.

Tag form

Form HTML menggunakan tag form.

<form>
.
form elements
.
</form>

Form HTML berisi tag-tag HTML yang biasa digunakan untuk mengumpulkan data dari pengguna. Tag HTML ini biasa juga disebut dengan form elemen. Contoh form elemen adalah elemen atau tag input text, checkbox, radio button, submit button dan lain-lain. Tutorial ini mencoba membahas beberapa contoh form elemen. Tutorial selanjutnya akan membahas lebih detil untuk setiap jenis form element.

Referensi Belajar Form HTML

Tag Input

Tag input adalah elemen yang paling banyak dipakai di dalam form HTML. Tag input ditampilkan dengan berbagai variasi tergantung dengan jenis dan kegunaannya. Berikut beberapa contoh tag input.

  • <input type=”text”> untuk menampilkan satu baris input text.
  • <input type=”radio”> untuk menampilkan pilihan input berbentuk radio button.
  • <input type=”checkbox”> untuk menampilkan pilihan input berbentuk checkbox.
  • <input type=”submit”> untuk menampilkan input dalam bentuk tombol submit.
  • <input type=”button”> untuk menampilkan input dalam bentuk tombol.

Input Text

Input text berguna untuk membuat tag input yang menerima data text dalam satu baris. Di bawah ini contoh form yang berisi input 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>

Jalankan Contoh

Tag Label

Tag label diperlihatkan pada contoh di atas. Tag label digunakan untuk memberikan label atau penjelasan pada setiap form elemen. Atribut for pada label harus sama dengan atribut id pada form elemen yang dijelaskan.

Radio Button

Radio button berguna untuk membuat input data berupa pilihan. Hanya satu input data yang bisa dipilih dengan menggunakan radio button.

<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</form>

Jalankan Contoh

Checkbox

Checkbox berguna untuk membuat input data berupa pilihan. Berbeda dengan radio button, pengguna bisa memilih satu atau lebih pilihan input data dengan menggunakan checkbox.

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

Jalankan Contoh

Tombol Submit

Tombol submit digunakan untuk mengirimkan data pada setiap form elemen ke URL tertentu pada server. Atribut action pada form berisi URL server tujuan pengiriman data.

<form action="/tutorial/html/action_page.html">
  <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>

Jalankan Contoh

Atribut name

Atribut name diperlukan untuk semua tag input yang berada di dalam form. Nilai atribut name biasanya mempunyai nilai yang sama dengan atribut id. Apabila tombol submit ditekan maka server akan menerima data dari dokumen HTML. Data ini berasal dari data yang diinput pengguna pada setiap form elemen. Server memerlukan atribut name untuk mengidentifikasi data yang diterima. Apabila atribut name tidak dicantumkan pada suatu form elemen, maka server akan gagal mengambil data dari form elemen tersebut. Contoh di bawah adalah cara penulisan form elemen yang salah, karena tidak mencantumkan atribut name pada input text.

<form action="/tutorial/html/action_page.html">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" value="John"><br><br>
  <input type="submit" value="Submit">
</form>

Jalankan Contoh

Tutorial sebelumnya : HTML Head
Tutorial setelahnya : Atribut Form HTML
Semua Tutorial HTML : Tutorial HTML 

Tinggalkan Balasan