Dalam pembuatan form pada HTML tentu saja terdapat beberapa atribut yang akan digunakan nantinya pada saat memproses data dengan di webserver. berikut beberapa atribut yang digunakan pada saat pembuatan form pada HTML.
Pada tutorial sebelumnya kita sudah membahas cara membuat form pada HTML. sekarang kita akan melanjutkan tutorial bejar HTML penggunaan atribut pada form HTML. berikut beberapa atribut yang digunakan pada form HTML.
1. Atribut value. atribut ini merupakan nilai awal yang akan ditampilkan pada saat menjalankan di browser. contohnya :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Atribut Form pada html</title>
</head>
<body>
<form>
Nama Depan :<input type="text" value="nama"><br/>
Nama Belakang : <input type="text">
</form>
</body>
</html>
2. Atribut readonly. jika menggunakan atribut ini maka nilai value tidak bisa di ubah. berikut contoh penggunaan readonly pada form HTML :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Atribut Form pada html</title>
</head>
<body>
<form>
Nama Depan :<input type="text" value="nama" readonly><br/>
Nama Belakang : <input type="text">
</form>
</body>
</html>
3. atribut disabled. atribut ini digunakan untuk menonaktifkan inputan. maksudnya elemen disabled bisa digunakan akan tetapi tidak bisa di gantu atau di edit.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Atribut Form pada html</title>
</head>
<body>
<form>
Nama Depan :<input type="text" value="nama" disabled><br/>
Nama Belakang : <input type="text">
</form>
</body>
</html>
4. atribut size. atribut ini mengatur lebar kotak inputan, untuk lebih jelasnya perhatikan contoh berikut :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Atribut Form pada html</title>
</head>
<body>
<form>
Nama Depan :<input type="text" value="nama" size="50"><br/>
Nama Belakang : <input type="text">
</form>
</body>
</html>
5. atribut maxlength. atribut ini digunakan untuk menentukan jumlah inputan teks yang di batasi. untuk lebih jelasnya perhatikan contoh berikut :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Atribut Form pada html</title>
</head>
<body>
<form>
Nama Depan :<input type="text" value="nama" maxlength="10"><br/>
Nama Belakang : <input type="text">
</form>
</body>
</html>
6. atribut list. atribut ini untuk menampilkan list pada form inptan. untuk lebih jelas perhatikan contoh berikut :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Atribut Form pada html</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>
7. atribut min dan max. Min dan maks atribut menentukan nilai minimum dan maksimum untuk elemen<input>. Atribut min dan maks digunakan untuk jenis inputan seperti : nomor, kisaran, tanggal,datetime, datetime-lokal, bulan, waktu, dan minggu. perhatikan contoh berikut:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Atribut Form pada 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>
8. laceholder Attribute. atribut ini digunakan untuk sebagai pengganti dari label field. perhatikan contoh berikut :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Atribut Form pada html</title>
</head>
<body>
<form>
<input type="text" name="nama" placeholder="masukkan nama">
</form>
</body>
</html>
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon