Elemen atau tag input pada form HTML memiliki beberapa atribut penting.
Atribut value
Atribut value memberikan nilai awal pada tag input.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form> Data awal ini dapat diganti oleh pengguna.
Atribut readonly
Atribut readonly membuat tag menjadi tidak bisa melakukan proses input data. Tag dengan atribut readonly tidak bisa diganti nilainya.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form> Atribut disabled
Atribut disabled membuat tag menjadi tidak bisa diakses sama sekali, tidak bisa diklik, tidak bisa difokus dan tidak bisa melakukan proses input data. Tag dengan atribut disabled nilainya tidak akan dikirimkan ke server apabila form disubmit.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form> Atribut size
Atribut size menentukan lebar suatu tag ditampilkan. Atribut size hanya bisa dipakai pada input text, tel, email dan password.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4">
</form> Atribut maxlength
Atribut maxlength menentukan jumlah karakter yang bisa diinput pada suatu tag input.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
</form> Atribut min dan max
Atribut min dan max berguna untuk menentukan nilai minimum dan nilai maksimum yang bisa dimasukkan ke dalam suatu tag input. Atribut min dan max bisa dipakai pada input number, range, date dan time.
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form> Atribut multiple
Atribut multiple berguna untuk membuat input tag dapat menerima lebih dari satu input. Atribut multiple bisa dipakai pada input email dan file.
<form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form> Atribut placeholder
Atribut placeholder berguna untuk menampilkan deskripsi dalam bentuk text pada suatu tag input. Deskripsi ini dapat digunakan untuk menjelaskan banyak hal kepada pengguna. Sebagai contoh menjelaskan data apa yang harus dimasukkan pengguna, format data yang harus dipakai dan lain sebagainya. Atribut placeholder bisa dipakai pada input text, tel, email dan password.
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="Phone format : 123-45-678">
</form> Atribut required
Atribut required membuat tag pada form harus diisi sebelum form tersebut disubmit. Apabila tag tersebut masih kosong atau belum dipilih maka proses submit akan gagal. Atribut required bisa dipakai pada input text, tel, email, password, date pickers, number, checkbox, radio dan file.
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form> Tutorial sebelumnya : Tag Input HTML
Semua Tutorial HTML : Tutorial HTML