Atribut dalam tag Input
Atribut value
Atribut value menentukan nilai awal untuk bidang masukan:
<form action="">
First name:<br>
<input type="text" name="firstname"
value="John">
</form>
Atribut readonly
Atribut readonly menentukan bahwa field input hanya bisa dibaca (tidak dapat diubah):
<form action="">
First name:<br>
<input type="text" name="firstname"
value="John" readonly>
</form>
Atribut disabled
Atribut disabled menentukan bahwa kolom masukan dinonaktifkan.
Bidang masukan yang dinonaktifkan tidak dapat digunakan dan tidak dapat diklik, dan nilainya tidak akan dikirim saat mengirimkan formulir:
<form action="">
First name:<br>
<input type="text" name="firstname"
value="John" disabled>
</form>
Atribut size
Atribut size menentukan ukuran (dalam karakter) untuk bidang masukan:
<form action="">
First name:<br>
<input type="text" name="firstname"
value="John" size="40">
</form>
Atribut maxlength
Atribut maxlength menentukan panjang maksimum yang diizinkan untuk bidang masukan:
<form action="">
First name:<br>
<input type="text" name="firstname"
maxlength="10">
</form>
Dengan atribut maxlength, field input tidak akan menerima lebih dari jumlah karakter yang diijinkan.
Atribut maxlength tidak memberikan umpan balik apapun. Jika Anda ingin memberi tahu pengguna, Anda harus menulis kode JavaScript.
Catatan: Pembatasan masukan tidak mudah dilakukan, dan JavaScript menyediakan banyak cara untuk menambahkan masukan ilegal. Untuk membatasi input dengan aman, itu harus diperiksa oleh receiver (server) juga!
Atribut HTML5
HTML5 menambahkan atribut berikut untuk <input>:
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height and width
- list
- min and max
- multiple
- pattern (regexp)
- placeholder
- required
- step
dan atribut berikut untuk <form>:
- autocomplete
- novalidate
Atribut autocomplete
Atribut autocomplete menentukan apakah field formulir atau masukan harus dilengkapi atau dimatikan secara otomatis.
Saat autocomplete aktif, browser akan secara otomatis menyelesaikan nilai masukan berdasarkan nilai yang telah dimasukkan pengguna sebelumnya.
Kiat: Mungkin saja ada autocomplete "on" untuk formulir, dan "nonaktif" untuk bidang masukan tertentu, atau sebaliknya.
Atribut autocomplete bekerja dengan <form> dan jenis <input> berikut: teks, search, url, tel, email, password, datepickers, range, dan color.
Contoh:
Bentuk HTML dengan autocomplete pada (dan off untuk satu bidang masukan):
<form action="/action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
Tip: Di beberapa browser Anda mungkin perlu mengaktifkan fungsi autocomplete agar bisa berfungsi.
Atribut novalidate
Atribut novalidate adalah atribut <form>.
Saat ini, novalidate menentukan bahwa data formulir tidak boleh divalidasi saat diajukan.
Contoh
Menunjukkan bahwa form tidak boleh divalidasi saat submit:
<form action="/action_page.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
Atribut autofocus
Atribut autofocus menentukan bahwa field input secara otomatis akan mendapatkan fokus saat halaman dimuat.
Contoh
Biarkan field masukan "First name" secara otomatis mendapatkan fokus saat halaman dimuat:
First name:<input type="text" name="fname" autofocus>
Catatan: Atribut autofocus dari tag input tidak didukung di Internet Explorer 9 dan versi sebelumnya.
Atribut form
Atribut form menentukan satu atau lebih bentuk elemen <input> miliknya.
Tip: Untuk merujuk ke lebih dari satu formulir, gunakan daftar id daftar yang dipisahkan oleh spasi.
Contoh
Bidang masukan yang berada di luar bentuk HTML (namun masih merupakan bagian dari formulir):
<form action="/action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
Last name: <input type="text" name="lname" form="form1">
Atribut formaction
Atribut formaction menentukan URL file yang akan memproses kontrol input saat formulir dikirimkan.
Atribut formaction menggantikan atribut action dari elemen <form>.
Atribut formasi digunakan dengan type = "submit" dan type = "image".
Contoh
Bentuk HTML dengan dua tombol kirim, dengan berbagai tindakan:
<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="/action_page2.php"
value="Submit as admin">
</form>
Atribut formenctype
Atribut formenctype menentukan bagaimana data form harus dikodekan saat dikirimkan (hanya untuk form dengan metode = "post").
Atribut formenctype menimpa atribut enctype elemen <form>.
Atribut formenctype digunakan dengan type = "submit" dan type = "image".
Contoh
Kirim form-data yang dikodekan secara default (tombol kirim pertama), dan dikodekan sebagai "multipart / form-data" (tombol kirim kedua):
<form action="/action_page_binary.asp" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>
Atribut formmethod
Atribut formmethod mendefinisikan metode HTTP untuk mengirimkan form-data ke URL tindakan.
Atribut formmethod mengesampingkan atribut metode dari elemen <form>.
Atribut formmethod dapat digunakan dengan type = "submit" dan type = "image".
Contoh
Tombol kirim kedua menggantikan metode HTTP dalam form:
<form action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formmethod="post" value="Submit using POST">
</form>
Atribut formnovalidate
Atribut formnovalidate menimpa atribut novalidate elemen <form>.
Atribut formnovalidate dapat digunakan dengan type = "submit".
Contoh
Formulir dengan dua tombol kirim (dengan dan tanpa validasi):
<form action="/action_page.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Submit without validation">
</form>
Atribut formtarget
Atribut formtarget menentukan nama atau kata kunci yang menunjukkan di mana menampilkan respons yang diterima setelah mengirimkan formulir.
Atribut formtarget menimpa atribut target elemen <form>.
Atribut formtarget bisa digunakan dengan type = "submit" dan type = "image".
Contoh
Formulir dengan dua tombol kirim, dengan jendela target yang berbeda:
<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank"
value="Submit to a new window">
</form>
Atribut height dan width
Atribut height dan width menentukan tinggi dan lebar elemen <input type = "image">.
Selalu tentukan ukuran gambar. Jika browser tidak mengetahui ukurannya, halaman akan berkedip saat gambar dimuat.
Contoh
Tentukan gambar sebagai tombol kirim, dengan atribut height dan width:
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
Atribut list
Atribut list mengacu pada elemen <datalist> yang berisi opsi yang telah ditentukan sebelumnya untuk elemen <input>.
Contoh
Elemen <input> dengan nilai yang telah ditentukan sebelumnya dalam <datalist>:
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Atribut min dan max
Atribut min dan max menentukan nilai minimum dan maksimum untuk elemen <input>.
Atribut min dan max bekerja dengan jenis masukan berikut: number, range, date, datetime-local, month, time dan week.
Contoh
elemen <input> dengan nilai min dan max:
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
Atribut multiple
Beberapa atribut menentukan bahwa pengguna diperbolehkan memasukkan lebih dari satu nilai pada elemen <input>.
Beberapa atribut bekerja dengan jenis masukan berikut: email, dan file.
Contoh
Bidang upload file yang menerima banyak nilai:
Select images: <input type="file" name="img" multiple>
Atribut pattern
Atribut pattern menentukan ekspresi reguler bahwa nilai elemen <input> dicentang.
Atribut pattern bekerja dengan jenis masukan berikut: text, search, url, tel, email, dan password.
Tip: Gunakan atribut judul global untuk menjelaskan pola untuk membantu pengguna.
Kiat: Pelajari lebih lanjut tentang ekspresi reguler di tutorial JavaScript kami.
Contoh
Bidang masukan yang hanya berisi tiga huruf (tidak ada angka atau karakter khusus):
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
Atribut placeholder
Atribut placeholder menentukan petunjuk yang menggambarkan nilai yang diharapkan dari bidang masukan (nilai sampel atau deskripsi singkat dari formatnya).
Petunjuk ditampilkan di bidang masukan sebelum pengguna memasukkan nilai.
Atribut placeholder bekerja dengan jenis masukan berikut: text, search, url, tel, email, dan password.
Contoh
Bidang masukan dengan teks placeholder:
<input type="text" name="fname" placeholder="First name">
Atribut required
Atribut required menentukan bahwa field masukan harus diisi sebelum mengirimkan formulir.
Atribut required bekerja dengan jenis masukan berikut: text, search, url, tel, email, password, date pickers, number, checkbox, radio, dan file.
Contoh
Bidang masukan yang dibutuhkan:
Username: <input type="text" name="usrname" required>
Atribut step
Atribut step menentukan interval jumlah hukum untuk elemen <input>.
Contoh: jika step = "3", nomor legal bisa -3, 0, 3, 6, dll.
Tip: Atribut step dapat digunakan bersama dengan atribut maks dan min untuk membuat rentang nilai hukum.
Atribut step bekerja dengan jenis masukan berikut: number, range, date, datetime-local, month, time dan week.
Contoh
Bidang masukan dengan interval jumlah hukum tertentu:
<input type="number" name="points" step="3">
HTML Form dan Input Elements
| Tag | Description |
|---|---|
| <form> | Mendefinisikan bentuk HTML untuk input pengguna |
| <input> | Mendefinisikan sebuah kontrol input |
Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2