Input dan Label

1:45 PM
Jika kalian sudah belajar tentang cara penggunaan form, seharusnya kalian sudah paham bahwa form memerlukan tag input. Tiap tag input bisa punya kegunaan yang berbeda-beda tergantung pada tipenya. 

Selain tipe, setiap input dalam form seharusnya minimal memiliki atribut name. Nilai atribut name akan digunakan dalam script sebagai nama variabel atau index array untuk mendapatkan nilai yang disimpan dalam atribut value atau nilai dan pilihan yang dimasukkan pengguna.

Tipe input yang umum digunakan adalah tipe text dan submit. Selain dua tipe tersebut, kita juga bisa menggunakan input dengan tipe lain. Tipe-tipe yang bisa kita gunakan sebagai nilai dalam atribut type, yaitu :
  1. text
  2. password
  3. submit
  4. reset 
  5. button
  6. checkbox
  7. radio 
  8. file
  9. color
  10. date
  11. datetime-local
  12. email
  13. image
  14. month
  15. number
  16. range
  17. search
  18. tel
  19. text
  20. time
  21. url
  22. week
Tipe di atas bisa kalian lihat perbedaannya secara langsung dengan melihatnya. Khusus tipe hidden, hidden membuat input tidak terlihat di browser dan hanya bisa diproses nilainya dengan menggunakan script.
<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <FORM method="post" action="test.htm" autocomplete="off">
        <INPUT type="text" name="nama" value="Gerimisya Stela Rida">
        <INPUT type="submit" name="kirim" value="kirim?">
    </FORM>
</BODY>
</HTML>


Pada contoh di atas, kalian bisa melihat beberapa tipe input yang berbeda. Kalian juga bisa melihat atribut-atribut yang bisa digunakan dalam input.

Atribut

Atribut yang mutlak dibutuhkan oleh input selain type adalah name dan value. Beberapa atribut seperti checked dan placeholder hanya berguna untuk input dengan tipe tertentu. Selain radio button, input dengan tipe lain harus memiliki name yang unik. Khusus, untuk radio button, input yang berada dalam satu kelompok harus memiliki nama yang sama. Singkatnya, berikut ini adalah atribut-atribut khusus untuk tag input.
  1. Type : Jenis input
  2. Name : Nama input
  3. Value : Nilai yang dikirim ke file / script tujuan. Value juga ditampilkan dalam input.
  4. Placeholder : Keterangan yang muncul saat input bertipe text atau password kosong.
  5. Checked : Menandai radio button atau checkbox yang dipilih.
  6. Readonly : Isi input tidak bisa diedit tapi akan tetap dikirim.
  7. Disable : Isi input tidak dikirim dan tidak bisa diedit.

Label

Tag label tidak punya kegunaan khusus selain untuk mengapit text yang menandai kegunaan input dan bagian form lainnya. Contohnya bisa kalian lihat pada kode HTML berikut ini.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <FORM method="post" action="test.htm">
        <label>Nama : </label><INPUT type="text" name="nama" placeholder="Nama"><BR />
        <INPUT type="checkbox" name="kotak" checked><label>Single</label><BR />
        <INPUT type="radio" name="pilihan"><label>Laki-laki</label><BR />
        <INPUT type="radio" name="pilihan" checked><label>Perempuan</label><BR />
        <INPUT type="hidden" name="kosong" checked><BR>
        <INPUT type="reset" name="reset" value="Reset">
        <INPUT type="submit" name="kirim" value="Kirim">
    </FORM>
</BODY>
</HTML>


Coba tipe-tipe lain dengan mengubah kode HTML di atas. Atribut seperti placeholder bisa kalian singkirkan jika kalian tidak menggunakan tipe "text" atau "password". Itu berlaku juga untuk atribut "checked" yang hanya berguna untuk tipe "checkbox" dan "radio".

Subscribe to: Post Comments (Atom)