Haloo… Masih membahas tentang cara membuat formulir ya. Ada beberapa hal yang harus saya tambahkan penjelasannya, karena di tulisan sebelumnya belum sempat dibahas padahal cukup penting.
Ada atribut yang bisa ditambahkan pada semua jenis formulir baik itu input, select, textarea dan fungsinya sangat penting. Tidak ada value pada atribut ini, cukup dituliskan nama atributnya saja. Nah kegunaan dari atribut ini di antaranya adalah:
- required. Untuk memalidasi isian dari formulir apakah sudah terisi/terpilih atau belum. Jika tidak diisi/dipilih maka formulir tidak akan bisa dikirim. Bentuk penulisannya begini:
<input type="text" required>. Contohnya lihat bagaimana agar isian form wajib diisi. - disabled. Gunanya untuk “mematikan” (ngeri banget istilahnya 🙂 ) atau menonaktifkan formulir. Elemen atau jenis apa saja yang diberi atribut ini tidak akan bisa diapa-apakan, bahkan diklik pun tidak ada reaksi. Misalnya:
<input type="checkbox" disabled>. - readonly. Kalau yang ini masih bisa diklik, tetapi isiannya tidak bisa diubah. Contohnya:
<textarea name="alamat" readonly>Palangka Raya, Kalimantan Tengah</textarea>. - autofocus. Adapun yang ini sebaiknya digunakan hanya untuk 1 objek saja dalam sebuah formulir. Biasanya pada isian yang paling atas atau isian yang pertama. Fungsinya untuk memindahkan kursor (ngeri ga apa itu kursor 😆 ) ke elemen atau objek tersebut. Misalnya:
<input type="password" autofocus>, maka saat halaman ini diakses kursornya langsung berada di dalam kotak isian.
Semua atribut di atas bisa digabung dalam 1 jenis formulir lho 😎
Supaya lebih jelas, silakan coba latihan berikut ini. Simpan kode dengan nama file 53-html-formulir-atribut-umum.html.
<!DOCTYPE html>
<html>
<head>
<title>Formulir Atribut Umum</title>
</head>
<body>
<h2>Data Diri</h2>
<p>Harap isi data diri Anda.</p>
<form>
<table>
<tr>
<td>NIM</td>
<td><input type="text" name="nim" required></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" name="nama" autofocus></td>
</tr>
<tr>
<td>Hobi</td>
<td>
<input type="checkbox" name="hobi[]" value="Menyanyi" disabled>Menyanyi<br>
<input type="checkbox" name="hobi[]" value="Memancing" disabled>Memancing<br>
<input type="checkbox" name="hobi[]" value="Main Game">Main Game<br>
</td>
</tr>
<tr>
<td>Alamat</td>
<td>
<textarea name="alamat" cols="30" rows="4" readonly>Palangka Raya, Kalimantan Tengah</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="simpan" value="Simpan">
</td>
</tr>
</table>
</form>
</body>
</html>
Coba dijalankan dan dilihat di mana kursornya berada? coba juga mengubah alamatnya bisa atau tidak? 😉
Gambarannya seperti ini.
Kita lanjutkan di halaman sebelah.