Formulir HTML

  1. › 
  2. ›  › 
  3. Formulir HTML

Formulir (form)

Seperti diketahui secara umum, bahwa formulir adalah dokumen yang dibuat untuk mengumpulkan data-data / informasi tertentu. Misalkan seperti formulir pendaftaran.
Elemen formulir juga dapat digunakan untuk dokumen lain seperti soal ujian baik soal easy (menginput teks) ataupun pilihan ganda (option).

Oleh karena itu, formulir dalam dokumen HTML membutuhkan beberapa elemen untuk dapat melengkapi fungsinya.
Berikut ini elemen (tag) pelengkap fungsi formulir :

Tag penyusun formulir

  • <input>
  • <label>
  • <select>
  • <output>
  • <datalist>
  • <textarea>
  • <button>
  • <fieldset>
  • <legend>
  • <output>
  • <optgroup>

1. input & label

Tag <input> adalah elemen yang berupa kolom kosong tempat memasukkan teks.
Karena hanya berupa kolom kosong, maka untuk menjelaskan fungsi kolom input, dibutuhkan tag <label>.
Contoh : 
<label>Label</label>: 
<input type='text' placeholder='input'/>
Tampilan :
:

2. select & option

Tag <select> berfungsi menyimpan daftar pilihan dalam tag <option>, yang fungsinya memberikan pilihan untuk diseleksi (select) salah satunya sebagai data input.
Contoh : 
<label for="cars">Pilihan:</label>
<select id="cars" name="cars">
  <option value="satu">Pilihan 1</option>
  <option value="dua">Pilihan 2</option>
  <option value="tiga">Pilihan 3</option>
  <option value="empat">Pilihan 4</option>
</select>
Tampilan :

3. textarea

<textarea> masih serupa dengan kolom <input> namun digunakan untuk input teks yang lebih banyak dari pada <input> dan ukurannya bisa disesuaikan.
Dalam formulir, umumnya berfungsi untuk menginput data yang tidak terdapat dalam pilihan atau menjelaskan informasi tambahan.
<form action="/action_page.php">
  <textarea name="message" rows="10" cols="30">Input teks.</textarea>
  <br><br>
  <input type="submit">
</form>
Tampilan :


4. button

<button> atau tombol berfungsi untuk mengirimkan data-data yang sudah diinputkan dalam formulir.
<button>Tombol</button>
Tampilan :

5. fieldset & legend

<fieldset> adalah frame (garis pembatas) yang membingkai formulir. Tag <fieldset> selalu berpasangan dengan tag <legend> yang berfungsi untuk menandai atau memberi keterangan tentang tujuan formulir.
Contoh: 
<form action="/action_page.php">
  <fieldset>
    <legend>Teks legend:</legend>
    <label for="fname">Label:</label><br>
    <input type="text" id="fname" name="fname" value="input teks"><br>
    <label for="lname">Label:</label><br>
    <input type="text" id="lname" name="lname" value="input teks"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>
Tampilan :
Teks legend:




6. datalist

Tag <datalist> ini mirip dengan tag <select>, dimana tag <datalist> juga menyimpan daftar pilihan yang disimpan dalam tag <option>
Contoh : 
<form action="/action_page.php">
  <input list="daftar" name="opsi">
  <datalist id="daftar">
    <option value="opsi 1">
    <option value="opsi 2">
    <option value="opsi 3">
    <option value="opsi 4">
    <option value="opsi 5">
  </datalist>
  <input type="submit">
</form>
Tampilan :
*Klik kolom input untuk melihat daftar datalist

Komentar

Posting Komentar