Dengan berkembangnya HTML4 menjadi HTML5, bertambahlah berbagai
fungsi dan tag tambahan, begitu juga dengan Atribut dari form HTML. Kali ini
kita akan membahas mengenai atribut form yang ada pada HTML5. Atribut baru dari
<form> :
§
autocomplete
§
novalitade
Beberapa atribut baru tag <input>
yang sering digunakan dalam form validasi adalah:
- min : nilai minimal yang dapat dimasukkan dalam field. Dapat digunakan pada tipe input number dan date
- max : nilai maksimal yang dapat dimasukkan dalam field. Dapat digunakan pada tipe input number dan date
- step : interval nilai yang dapat dimasukkan. Dapat digunakan untuk tipe input number
- pattern : pola input yang harus dimasukkan oleh user. Menggunakan format regex dalam javascript.
- required : menentukan apakah field ini harus diisi apa tidak
- placeholder : bantuan pengisian field. berupa contoh isi field ketika field kosong dan kursor tidak terdapat dalam field tersebut.
Atribut autocomplete menentukan apakah form /input field
autocomplete harus on atau off. Ketika autocomplete on, browser akan secara
otomatis menyempurnakan nilai berdasarkan pada nilai yang user telah masukkan
sebalumnya. Tip: Memungkinkan autocomplete "on" untuk form, dan
"off" untuk spesifik input field. Catatan : Atribut autocomplete
bekerja dengan <form> dan diikuti oleh type <input> : tex. search,
url, email, password, datepickers, range, dan color.
Atribut novalidate pada <form>
Atribut novalidate merupakan atribut boolean. Ketika dihadirkan,
maka akan menentukana form-data(input) yang tidak perlu divalidasi ketika
dimasukkan.
Atribut autofocus pada <input>
Atribut autofocus merupakan atribut boolean. Ketika hadir, akan
menentukan element <input> secara otomatis harus get focus ketika halaman
load.
Atribut form pada <input> Atribut form menentukan satu atau
banyak form yang dimiliki sebuah element input. Tip : untuk memilih lebih dari
satu form, gunakan pemisah spasi dari ids form Input diletakkan diluar form
HTML (tapi tetap bagian dari form).
Atribut pattern pada <input> Atribut
pattern menentukan ekspresi regular dari nilai element <input> dicek
lagi. Catatan : Atribut pattern bekerja dengan diikuti dengan input type :
text, search, url, tel, email, dan password. Tip : Gunakan atribut tittle
global untuk mendeskripsikan pattern untuk membantu user.
Tip : Pelajari tentang regular expressions di Javascript.
Atribut require pada <input> Atribut
require atribut boolean. Ketika hadir, akan menentukan input field yang harus
diisikan sebelum mensubmitkan form. Catatan : Atribut require bekerja dengan
diikuti input type : text, search, url, tel, email, password, date picker,
number, checkbox, radio, dan file.
Atribut Placeholder pada <input>
Atribut placaholder menentukan petunjuk pendek yang
mendeskripsikan nilai yang dimaksud dari input field. Petunjuk kecil
ditampilkan dalam field input sebelum user mengenterkan nilai. Catatan :
Atribut placeholder bekerja dengan diikuti input type : text, search, url, tel,
email, dan password.
Contoh 1 :
Contoh 2 :
Referensi :
