Macam-Macam Atribut Pada Tag Input HTML

Ibrahim Al Anshor | 2 weeks and 1 day ago | html

Atribut Pada Tag Input - Tag input pada HTML berguna untuk membuat kotak yang menerima input/masukan dari pengguna.

Tag input memiliki beberapa atribut yang berfungsi untuk mengatur bagaimana input tersebut digunakan.

Masing-masing atribut memiliki fungsi dan aturanya masing-masing, berikut penjabaranya.

Atribut Name

Atribut ini digunakan untuk mengatur indeks atau variabel pada request yang dikirim form.

<input type="text" name="nama_lengkap">

Kemudian pada server, kita dapat mengakses nilai yang dikirim form dengan mengacu pada atribut name tersebut.

Contoh disini saya menggunakan bahasa pemrograman PHP.

<?php
  $nama = $_REQUEST['nama_lengkap'];
  echo $nama;
?>

Atribut ini digunakan untuk mengatur nilai awal pada tag input.

<input type="text" name="nama_lengkap" value="Handoko">

Atribut ini digunakan untuk mengatur teks bantuan pada tag input.

Teks bantuan tersebut akan muncul ketika tag input tersebut nilainya kosong.

<input type="text" name="nama_lengkap" placeholder="Masukan Nama Lengkap">

Atribut ini digunakan untuk memvalidasi tag input, tag input harus terisi nilainya sebelum form dikirim.

Jika tag input dengan atribut required nilainya kosong pada saat form dikirim, maka akan muncul peringatan tag tersebut wajib diisi.

Atribut ini dapat dituliskan tanpa menuliskan nilainya.

<input type="text" name="nama_lengkap" required>

Atribut ini digunakan untuk mengatur tag input agar secara otomatis difokuskan pada saat halaman web dimuat.

<input type="text" name="nama_lengkap" autofocus>

Atribut ini digunakan untuk mengatur tag input agar nilainya tidak bisa diubah, namun masih bisa disalin, disorot, dsb.

Nilai pada atribut ini juga masih ikut terkirim pada pengiriman form.

<input type="text" name="nama_lengkap" value="Handoko" readonly>

Atribut ini fungsinya mirip seperti atribut readonly, yaitu untuk mengatur agar nilai pada tagnya tidak bisa diubah.

Bedanya nilai pada tag dengan atribut disabled nilainya tidak ikut terkirim pada pengiriman form.

<input type="text" name="nama_lengkap" value="Handoko" disabled>

Untuk penjelasan lebih lanjut mengenai macam-macam atribut pada tag input, anda dapat mengunjungi link berikut.