PENGENALAN DASAR HTML | Form (Bagian 5)

pada tanggal

Halo semuanya, kali ini bakal sharing tentang basic HTML. Seperti biasa, topik akan dibagi menjadi beberapa post agar tidak terlalu panjang dan lebih mudah di cari kalau hanya butuh bagian tertentunya. Tetap nantikan post selanjutnya ya. 

Post kelima berisi mengenai basic HTML untuk pembuatan form.

Form

Element "form" digunakan untuk membuat form atau formulir yang akan diinput oleh pengguna. Berikut beberapa element yang tersedia yang cukup sering digunakan untuk untuk membuat form:

  • Input
  • Label
  • Select
  • Textarea
  • Button
  • Option
  • Dan lainnya

Input

Element "input" dapat ditampilkan dalam berbagai cara tergantung dari attribute "type" yang digunakan. Beberapa pilihan "type" yang sering digunakan yaitu:

  • Text, digunakan untuk isian berupa text field satu baris
  • Radio, digunakan untuk isian berupa radio button. Radio button adalah sebuah opsi atau pilihan yang hanya diperbolehkan untuk memilih satu dari beberapa pilihan yang ada.
  • Checkbox, digunakan untuk isian berupa checkbox. Checkbox adalah opsi atau pilihan yang memungkinkan untuk tidak memilih, memilih satu, atau memilih lebih dari pilihan yang ada.
  • Submit, digunakan untuk mengsubmit form. Submit form artinya mengeksekusi form handler yang telah ditentukan pada attribute "action" di element "form".

Berikut beberapa "type" lainnya, bukan yang biasa namun yang cukup sering digunakan, yaitu:

  • Password, seperti text tapi khusus untuk password. Pembedanya adalah dengan mengganti huruf yang diinput menjadi menjadi karakter seperti "*".
  • Email, seperti text namun khusus untuk email. Akan mendeteksi simbol "@" dan ".".
  • Hidden, digunakan untuk menyembunyikan input. Biasa digunakan untuk membantu mengumpulkan data sebelum dikirim ke server.
  • File, digunakan untuk menambahkan input attachment file.
  • Number, seperti text tapi khusus untuk angka.
  • Dan lainnya

Attribute "name" pada element "input" harus diisi sehingga semua data akan terkirim ke form handler ketika form disubmit.

Label

Element "label" digunakan untuk mendefinisikan label pada element "form". Attribute "for" pada element "label" harus dibuat sama dengan attribute "id" pada element "input" agar bisa saling berpasangan.

 

Berikut adalah contoh dari form yang dibuat dengan kombinasi beberapa attribute type input.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<form>
  <div>
    <label for="nama">Nama Lengkap</label>
    <input type="text" id="nama" name="nama" placeholder="Nama Lengkap">
  </div>
  <div>
    <label for="tempatlahir">Tempat Lahir</label>
    <input type="text" id="tempatlahir" name="tempatlahir" placeholder="Tempat Lahir">
  </div>
  <div>
    <label for="tglLahir">Tanggal Lahir</label>
    <input type="date" id="tglLahir" name="tglLahir">
  </div>
  <div>
    <label for="umur">Usia</label>
    <input type="number" id="umur" name="umur">
  </div>
  <div>
    <label>Jenis Kelamin</label>
    <div>
      <input type="radio" id="laki" name="jenisKelamin" value="laki">
      <label for="laki">Laki-laki</label>
    </div>
    <div>
      <input type="radio" id="perempuan" name="jenisKelamin" value="perempuan">
      <label for="perempuan">Perempuan</label>
    </div>
  </div>
  <div>
    <label>Media sosial yang dimiliki</label>
    <div>
      <input type="checkbox" id="twitter" name="twitter" value="twitter">
      <label for="twitter">Twitter</label>
    </div>
    <div>
      <input type="checkbox" id="facebook" name="facebook" value="facebook">
      <label for="facebook">Facebook</label>
    </div>
    <div>
      <input type="checkbox" id="instagram" name="instagram" value="instagram">
      <label for="instagram">Instagram</label>
    </div>
    <div>
      <input type="checkbox" id="tiktok" name="tiktok" value="tiktok">
      <label for="tiktok">Tiktok</label>
    </div>
  </div>
  <div>
    <label for="email">Alamat E-Mail</label>
    <input type="email" id="email" name="email" placeholder="Alamat E-Mail">
  </div>
  <div>
    <label for="password">Password</label>
    <input type="password" id="password" name="password" placeholder="Password">
  </div>
  <input type="submit" value="Simpan">
</form>

Berdasarkan snippet code diatas, dapat dilihat terdapat 13 element input yang digunakan dengan 8 tipe input yang berbeda. Berikur penjabaran tipe input yang digunakan:

  • Nama dan tempat lahir: text
  • Tanggal lahir: date
  • Umur: number
  • Jenis kelamin (perempuan dan laki-laki): radio
  • Media sosial (twitter, instagram, dan tiktok): checkox
  • Email: email
  • Password: password
  • Tombol simpan: submit

Dari code diatas, jika ditampilkan dengan browser, akan tertampil sebagai berikut.

Sekian post kali ini. Semoga membantu. Nantikan posting selanjutnya.

 

Salam share,

 

Funtastic Share

Komentar

Posting Komentar