Belajar HTML Part 16: Macam-macam Atribut Form pada HTML
Halo kawan-kawan,
Pada kesempatan sebelumnya, Kita telah belajar Cara Membuat Form di HTML (tag form).
Pada kesempatan kali ini kita akan lebih memperdalam beberapa atribut yang akan digunakan dalam Form HTML.
1. atribut value
Atribut ini merupakan nilai awal yang akan ditampilkan pada saat dijalankan di browser, contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Macam-macam Atribut Form pada HTML</title>
</head>
<body>
<form>
Nama depan= <input type="text" Value="Isi nama mu">
Nama belakang= <input type="text">
</form>
</body>
</html>
2. atribut size
Atribut ini mengatur lebar kotak inputan, untuk lebih jelasnya perhatikan code berikut:
<!DOCTYPE html>
<html>
<head>
<title>Macam-macam Atribut Form pada HTML</title>
</head>
<body>
<form>
Nama depan= <input type="text" Value="Isi nama mu" size="50">
Nama belakang= <input type="text">
</form>
</body>
</html>
3. atribut maxlength
Atribut ini digunakan untuk menentukan jumlah inputan teks yang dibatasi. Untuk lebih jelasnya perhatikan code berikut:
<!DOCTYPE html>
<html>
<head>
<title>Macam-macam Atribut Form pada HTML</title>
</head>
<body>
<form>
Nama depan= <input type="text" Value="Isi nama mu" maxlength="5">
Nama belakang= <input type="text">
</form>
</body>
</html>
4. atribut readonly
Menggunakan atribut ini maka nilai value tidak bisa di ubah. Untuk lebih jelasnya perhatikan code berikut:
<!DOCTYPE html>
<html>
<head>
<title>Macam-macam Atribut Form pada HTML</title>
</head>
<body>
<form>
Nama depan= <input type="text" Value="Isi nama mu" readonly>
Nama belakang= <input type="text">
</form>
</body>
</html>
Hasilnya tulisan "Isi nama mu" tidak dapat dihapus atau diubah
5. atribut disabled
Dengan menggunakan atribut ini, inputan dapat digunakan tetapi setelah itu tidak bisa diganti atau di edit.
<!DOCTYPE html>
<html>
<head>
<title>Macam-macam Atribut Form pada HTML</title>
</head>
<body>
<form>
Nama depan= <input type="text" Value="Isi nama mu" disabled>
Nama belakang= <input type="text">
</form>
</body>
</html>
Hasilnya hampir sama dengan atribut readonly
6. laceholder attribute.
Atribut ini digunakan untuk pengganti dari label field. Untuk lebih jelasnya perhatikan code berikut:
<!DOCTYPE html>
<html>
<head>
<title>Macam-macam Atribut Form pada HTML</title>
</head>
<body>
<form>
Nama depan= <input type="text" placeholder="Isi nama mu">
Nama belakang= <input type="text">
</form>
</body>
</html>
Hampir sama seperti atribut value, hanya saja isi tulisan "Isi nama mu" dapat menjadi latar.
7. atribut list
Atribut ini untuk menampilkan list pada form inputan. Untuk lebih jelasnya perhatikan code berikut:
<!DOCTYPE html>
<html>
<head>
<title>Macam-macam Atribut Form pada HTML</title>
</head>
<body>
<form>
Aktivitas:
<input list="Aktivitas" name="Kegiatan">
<datalist id="Aktivitas">
<option value="Membaca">
<option value="Menulis">
<option value="Menggambar">
</datalist>
</form>
</body>
</html>
8. atribut min dan max.
Atribut ini menentukan nilai minimum dan maksimum untuk elemen input. Atribut ini biasa digunakan untuk jenis inputan seperti nomor, kisaran, tanggal, datetime, datetime-lokal, bulan, waktu, minggu, tanggal lahir, dll. Untuk lebih jelasnya perhatikan code berikut:
<!DOCTYPE html>
<html>
<head>
<title>Macam-macam Atribut Form pada HTML</title>
</head>
<body>
<form>
Masukan Tahun Masuk Kuliah - Lulus Kuliah:
<input type="date" name="day" Max="1977-12-31">
<input type="date" name="day" Min="2017-01-01">
</form>
</body>
</html>
Sampai dengan tutorial belajar HTML dasar yang ke-16 ini, kita telah membahas hampir seluruh tag-tag umum yang digunakan untuk membuat halaman web. Sebagai tutorial terakhir untuk merangkum apa yang telah kita bahas hingga tutorial ini, silahkan lanjut ke Tutorial HTML Dasar (Finish).
Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2