Atribut nilai menentukan nilai awal untuk bidang masukan:
Contoh
<form action = "">Atribut readonly
Nama depan: <br>
<input type = "text" name = "nama depan" value = "John">
<br>
Nama belakang: <br>
<input type = "text" name = "nama belakang">
</form>
Atribut readonly menentukan bahwa field input hanya bisa dibaca (tidak dapat diubah):
Contoh
<form action = "">
Nama depan: <br>
<input type = "text" name = "nama depan" value = "John" readonly>
<br>
Nama belakang: <br>
<input type = "text" name = "nama belakang">
</form>
Atribut readonly tidak memerlukan nilai. Sama seperti menulis readonly = "readonly".
Atribut yang dinonaktifkan
Atribut yang dinonaktifkan menentukan bahwa kolom masukan dinonaktifkan.
Elemen yang dinonaktifkan tidak dapat digunakan dan tidak dapat diklik.
Unsur yang dinonaktifkan tidak akan dikirim
Contoh
<form action = "">
Nama depan: <br>
<input type = "text" name = "nama depan" value = "John" disabled>
<br>
Nama belakang: <br>
<input type = "text" name = "nama belakang">
</form>
Atribut yang dinonaktifkan tidak memerlukan nilai. Sama seperti menulis cacat = "cacat".
Atribut ukuran
Atribut ukuran menentukan ukuran (dalam karakter) untuk bidang masukan:
Contoh
<form action = "">Atribut maksimal
Nama depan: <br>
<input type = "text" name = "nama depan" value = "John" size = "40">
<br>
Nama belakang: <br>
<input type = "text" name = "nama belakang">
</form>
Atribut maxlength menentukan panjang maksimum yang diizinkan untuk bidang masukan:
Contoh
<form action = "">
Nama depan: <br>
<input type = "text" name = "nama depan" maxlength = "10">
<br>
Nama belakang: <br>
<input type = "text" name = "nama belakang">
</form>
Dengan atribut maxlength, kontrol input tidak akan menerima lebih dari jumlah karakter yang diijinkan.
Atribut tidak memberikan umpan balik apapun. Jika ingin mengingatkan pengguna, Anda harus menulis kode JavaScript.
Catatan Pembatasan masukan tidak mudah. JavaScript menyediakan banyak cara untuk menambahkan masukan ilegal.
Untuk membatasi input dengan aman, batasan 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 / pelengkapan otomatis
Atribut pelengkapan otomatis menentukan apakah field formulir atau masukan harus dilengkapi atau dimatikan secara otomatis.
Saat pelengkapan otomatis aktif, browser secara otomatis melengkapi nilai berdasarkan nilai yang telah dimasukkan pengguna sebelumnya.
Kiat: Mungkin saja ada pelengkapan otomatis "on" untuk formulir, dan "nonaktif" untuk bidang masukan tertentu, atau sebaliknya.
Atribut autocomplete bekerja dengan <form> dan jenis <input> berikut: teks, pencarian, url, tel, email, password, datepickers, range, dan color.
Opera Firefox Chrome Firefox Internet Explorer
Contoh
Formulir HTML dengan pelengkapan otomatis pada (dan tidak untuk satu bidang masukan):
<form action = "action_page.php" autocomplete = "on">
Nama depan: <input type = "text" name = "fname"> <br>
Nama belakang: <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 pelengkapan otomatis agar bisa berfungsi.
Atribut novalidate
Atribut novalidate adalah atribut <form>.
Saat ini, novalidate menentukan bahwa data formulir tidak boleh divalidasi saat diajukan.
Opera Firefox Chrome Firefox Internet Explorer
Contoh
Menunjukkan bahwa form tidak boleh divalidasi saat submit:
<form action = "action_page.php" novalidate>Atribut autofocus
E-mail: <input type = "email" name = "user_email">
<input type = "submit">
</form>
Atribut autofocus adalah atribut boolean.
Saat ini, ia menentukan bahwa elemen <input> secara otomatis akan mendapatkan fokus saat halaman dimuat.
Opera Firefox Chrome Firefox Internet Explorer
Contoh
Biarkan field masukan "First name" secara otomatis mendapatkan fokus saat halaman dimuat:
Nama depan: <input type = "text" name = "fname" autofocus>Atribut bentuk
Atribut bentuk menentukan satu atau lebih elemen <input> miliknya.
Tip: Untuk merujuk ke lebih dari satu formulir, gunakan daftar id daftar yang dipisahkan oleh spasi.
Opera Firefox Chrome Firefox Internet Explorer
Contoh
Bidang masukan yang berada di luar bentuk HTML (namun tetap merupakan bagian dari formulir):
<form action = "action_page.php" id = "form1">
Nama depan: <input type = "text" name = "fname"> <br>
<input type = "submit" value = "Submit">
</form>
Nama belakang: <input type = "text" name = "lname" form = "form1">
Atribut formasi
Atribut formaction menentukan URL file yang akan memproses kontrol input saat formulir dikirimkan.
Atribut formaction menggantikan atribut action dari elemen <form>.
Atribut formaction digunakan dengan type = "submit" dan type = "image".
Opera Firefox Chrome Firefox Internet Explorer
Contoh
Bentuk HTML dengan dua tombol kirim, dengan berbagai tindakan:
<form action = "action_page.php">Atribut formenctype
Nama depan: <input type = "text" name = "fname"> <br>
Nama belakang: <input type = "text" name = "lname"> <br>
<input type = "submit" value = "Submit"> <br>
<input type = "kirimkan" formaction = "demo_admin.asp"
Nilai = "Kirim sebagai admin">
</form>
Atribut formenctype menentukan bagaimana form-data harus dikodekan saat mengirimkannya ke server (hanya untuk form dengan method = "post").
Atribut formenctype menimpa atribut enctype elemen <form>.
Atribut formenctype digunakan dengan type = "submit" dan type = "image".
Opera Firefox Chrome Firefox Internet Explorer
Contoh
Kirim form-data yang dikodekan secara default (tombol kirim pertama), dan dikodekan sebagai "multipart / form-data" (tombol kirim kedua):
<form action = "demo_post_enctype.asp" method = "post">Atribut formmethod
Nama depan: <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 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".
Opera Firefox Chrome Firefox Internet Explorer
Contoh
Tombol kirim kedua menggantikan metode HTTP dalam bentuk:
<form action = "action_page.php" method = "get">Atribut formnovalidate
Nama depan: <input type = "text" name = "fname"> <br>
Nama belakang: <input type = "text" name = "lname"> <br>
<input type = "submit" value = "Submit">
<input type = "submit" formmethod = "post" formaction = "demo_post.asp"
Nilai = "Kirim menggunakan POST">
</form>
Atribut novalidate adalah atribut boolean.
Saat ini, ia menentukan bahwa elemen <input> tidak boleh divalidasi saat diajukan.
Atribut formnovalidate menggantikan atribut novalidate elemen <form>.
Atribut formnovalidate dapat digunakan dengan type = "submit".
Opera Firefox Chrome Firefox Internet Explorer
Contoh
Formulir dengan dua tombol kirim (dengan dan tanpa validasi):
<form action = "action_page.php">Atribut formtarget
E-mail: <input type = "email" name = "userid"> <br>
<input type = "submit" value = "Submit"> <br>
<input type = "submit" formnovalidate value = "kirim tanpa validasi">
</form>
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".
Opera Firefox Chrome Firefox Internet Explorer
Contoh
Sebuah formulir dengan dua tombol kirim, dengan jendela target yang berbeda:
<form action = "action_page.php">
Nama depan: <input type = "text" name = "fname"> <br>
Nama belakang: <input type = "text" name = "lname"> <br>
<input type = "submit" value = "Submit as normal">
<input type = "submit" formtarget = "_ blank"
Value = "Kirim ke jendela baru">
</form>
Atribut tinggi dan lebar / Height and width
Atribut tinggi dan lebar menentukan tinggi dan lebar elemen <input>.
Atribut tinggi dan lebar hanya digunakan dengan <input type = "image">.
Catatan Selalu tentukan ukuran gambar. Jika browser tidak mengetahui ukurannya, halaman akan berkedip-kedip saat gambar dimuat.
Opera Firefox Chrome Firefox Internet Explorer
Contoh
Tentukan gambar sebagai tombol kirim, dengan atribut tinggi dan lebar:
<input type = "image" src = "img_submit.gif" alt = "Kirimkan" width = "48" height = "48">Atribut List
Atribut daftar mengacu pada elemen <datalist> yang berisi opsi yang telah ditentukan sebelumnya untuk elemen <input>.
Opera Firefox Chrome Firefox Internet Explorer
Contoh
Elemen <input> dengan nilai yang telah ditentukan sebelumnya dalam <datalist>:Atribut min dan max
<input list = "browser">
<datalist id = "browser">
<option value = "Internet Explorer">
<option value = "Firefox">
<option value = "Chrome">
<option value = "Opera">
<option value = "Safari">
</Datalist>
Atribut min dan max menentukan nilai minimum dan maksimum untuk elemen <input>.
Atribut min dan max bekerja dengan jenis masukan berikut: jumlah, rentang, tanggal, datetime, datetime-local, month, time and week.
Opera Firefox Chrome Firefox Internet Explorer
Contoh
Elemen <input> dengan nilai min dan max:Atribut ganda
Masukkan tanggal sebelum 1980-01-01:
<input type = "date" name = "bday" max = "1979-12-31">
Masukkan tanggal setelah 2000-01-01:
<input type = "date" name = "bday" min = "2000-01-02">
Kuantitas (antara 1 dan 5):
<input type = "number" name = "quantity" min = "1" max = "5">
Beberapa atribut adalah atribut boolean.
Saat ini, ia menentukan bahwa pengguna diperbolehkan memasukkan lebih dari satu nilai pada elemen <input>.
Beberapa atribut bekerja dengan jenis masukan berikut: email, dan file.
Opera Firefox Chrome Firefox Internet Explorer
Contoh
Bidang unggahan file yang menerima banyak nilai:
Pilih gambar: <input type = "file" name = "img" multiple>Atribut pola
Atribut pola menentukan ekspresi reguler bahwa nilai elemen <input> dicentang.
Atribut pola bekerja dengan jenis masukan berikut: teks, pencarian, url, tel, email, dan kata sandi.
Tip: Gunakan atribut judul global untuk menjelaskan pola untuk membantu pengguna.
Kiat: Pelajari lebih lanjut tentang ekspresi reguler di tutorial JavaScript kami.
Opera Firefox Chrome Firefox Internet Explorer
Contoh
Bidang masukan yang hanya berisi tiga huruf (tidak ada angka atau karakter khusus):
Kode negara: <input type = "text" name = "country_code" pattern = "[A-Za-z] {3}" title = "Tiga huruf kode negara">Atribut placeholder
Atribut placeholder menentukan petunjuk yang menggambarkan nilai yang diharapkan dari bidang masukan (nilai sampel atau deskripsi singkat format).
Petunjuk ditampilkan di kolom masukan sebelum pengguna memasukkan nilai.
Atribut placeholder bekerja dengan jenis masukan berikut: teks, pencarian, url, tel, email, dan kata sandi.
Opera Firefox Chrome Firefox Internet Explorer
Contoh
Bidang masukan dengan teks placeholder:
<input type = "text" name = "fname" placeholder = "nama depan">Atribut required / dibutuhkan
Atribut yang dibutuhkan adalah atribut boolean.
Saat ini, ia menentukan bahwa bidang masukan harus diisi sebelum mengirimkan formulir.
Atribut yang dibutuhkan bekerja dengan jenis masukan berikut: teks, pencarian, url, tel, email, kata sandi, pemilih tanggal, nomor, kotak centang, radio, dan file.
Opera Firefox Chrome Firefox Internet Explorer
Contoh
Bidang masukan yang dibutuhkan:
Username: <input type = "text" name = "usrname" required>Atribut step / langkah
Atribut langkah menentukan interval jumlah hukum untuk elemen <input>.
Contoh: jika step = "3", nomor legal bisa -3, 0, 3, 6, dll.
Tip: Atribut langkah dapat digunakan bersama dengan atribut maks dan min untuk membuat rentang nilai hukum.
Atribut langkah bekerja dengan jenis masukan berikut: nomor, rentang, tanggal, datetime, datetime-local, month, time and week.
Opera Firefox Chrome Firefox Internet Explorer
Contoh
Bidang masukan dengan interval jumlah hukum tertentu:
<input type = "number" name = "points" step = "3">
Out Of Topic Show Konversi KodeHide Konversi Kode