Pada tutor sebelumnya kita sudah membahas Membuat Form Pada HTML. Sekarang kita akan melanjutkan tutorial belajar HTML penggunaan atribut pada form HTML. Berikut beberapa atribut yang digunakan pada form HTML.
Atribut Value
Atribut ini merupakan nilai awal yang akan ditampilkan pada saat menjalankan di browser. Berikut Contohnya :
<!DOCTYPE html>
<html>
<head>
<title>HTML : ATRIBUTE HTML</title>
</head>
<body>
<form>
Nama : <input type="text" name="nama" value="Nama Depan"><br>
Nama Belakang : <input type="text">
</body>
</html>
 |
| Hasil script saat di run |
Atribut Readonly
Jika menggunakan atribut ini maka nilai value tidak dapat diubah, hanya dapat di baca. Di bawah ini adalah contoh penggunaanya :
<!DOCTYPE html>
<html>
<head>
<title>HTML : ATRIBUTE FORM </title>
</head>
<body>
<form>
Nama Depan : <input type="text" name="nama" value="Nama" readonly><br>
Nama Belakang : <input type="text">
</body>
</html>
 |
| Hasil script setelah di run |
Atribut Disabled
Atribut ini digunakan mematikan inputan.
Maksudnya element disabled dapat digunakan tetapi inputan tidak dapat
diganti dan tidak bisa diklik. Berikut adalah contohnya :
<!DOCTYPE html>
<html>
<head>
<title>HTML : ATRIBUTE FORM </title>
</head>
<body>
<form>
Nama Depan : <input type="text" name="nama" value="Nama" disabled><br>
Nama Belakang : <input type="text">
</body>
</html>
|
| Hasil script saat di run |
Atribut ini mengatur lebar kotak inputan, Untuk lebih jelasnya perhatikan contoh berikut :
<!DOCTYPE html>
<html>
<head>
<title>HTML : ATRIBUTE FORM </title>
</head>
<body>
<form>
Nama : <input type="text"> <br>
Alamat : <input type="text" name="nama" value="Alamat" size="40">
</body>
</html>
 |
| Hasil script saat di run |
Atribut ini digunakan untuk menentukan jumlah inputan teks yang dibatasi. Untuk lebih jelasnya perhatikan contoh berikut :
<!DOCTYPE html>
<html>
<head>
<title>HTML : ATRIBUTE </title>
</head>
<body>
<form>
Nama Depan : <input type="text" name="nama" value="Nama" maxlength="8"><br>
Nama Belakang : <input type="text">
</body>
</html>
 |
| Hasil script saat di run |
Atribut ini untuk menampilkan list pada form input dengan menampilkan pilihan untuk di inputkan. Lebih jelasnya perhatikan contoh berikut :
<!DOCTYPE html>
<html>
<head>
<title>HTML : ATRIBUTE </title>
</head>
<body>
<form>
<input list="browser" name="internet">
<datalist id="browser">
<option value="chrome">
<option value="mozilla">
<option value="opera">
</datalist>
</form>
</body>
</html>
 |
| Hasil script di run |
Atribut ini menentukan nilai minimum dan maksimum untuk element <input>. Atribut min dan max digunakan untuk jenis inputan seperti : Nomor, Kisaran, Tanggal, Date Time, Date Time Lokal, Bulan, Waktu, Minggu. Perhatikan contoh berikut :
<!DOCTYPE html>
<html>
<head>
<title>HTML : ATRIBUTE HTML</title>
</head>
<body>
<form>
<input type="date" name="day" max="1979-12-31">
<input type="date" name="day" min="2000-01-02">
</form>
</body>
</html>
 |
| Hasil script saat di run |
Placeholder Atribut
Atribut ini digunakan sebagai pengganti file dari file label field. menampilkan keterangan yang dapat hilang otomatis saat di klick. Perhatikan contoh berikut:
<!DOCTYPE html><html>
<head>
<title>HTML : ATRIBUTE HTML </title>
</head>
<body>
<form>
<input type="text" name="nama" placeholder="Masukkan nama">
<input type="text" name="password" placeholder="Password">
</form>
</body>
</html>
 |
| Hasil script saat di run |
REFERENSI : www.malasngoding.com
EmoticonEmoticon