Fungsi autoselesai sekarang menjadi fitur yang disukai di internet. Jika Anda mengetik sesuatu di dalam kolom formulir, browser akan menawarkan daftar saran kata - jika fungsi tersebut diaktifkan dan didukung oleh browser -.
<input type="text" autocomplete="on" />
Dengan nilai on, autoselesai diaktifkan untuk kolom tersebut. Mulai sekarang, browser akan mengingat nilai-nilai yang dimasukkan ke dalam kolom dan menawarkannya kemudian dalam bentuk daftar pilihan. Dengan cara ini, formulir dapat diisi dengan lebih cepat.
Sekarang, perilaku ini tidak diinginkan pada setiap kolom. Dalam kasus-kasus seperti itu, autoselesai dapat dinonaktifkan secara eksplisit. Untuk melakukan hal ini, berikan atribut autocomplete nilai off.
<input type="text" autocomplete="off" />
Sebagai alternatif, Anda juga dapat menambahkan atribut autocomplete ke elemen form. Tergantung pada apakah nilai on atau off
<form autocomplete="on"> .. </form>
Jika ada pengaturan yang berlawanan di dalam formulir, pengaturan tersebut akan berlaku.
<form autocomplete="on"> Nama: <input type="text" name="nama_depan" autocomplete="off" /><br /> Nama Belakang: <input type="text" name="nama_belakang" /><br /> Kode Pos: <input type="text" name="kode_pos" /><br /> Kota: <input type="text" name="kota" /> </form>
Dalam contoh ini, fitur autoselesai akan diterapkan pada semua kolom formulir, karena nilai atribut autocomplete dari elemen form diatur sebagai on. Pengecualian hanya berlaku untuk kolom nama_depan. Karena pada kolom ini, autoselesai dinonaktifkan dengan cara eksplisit.
Untuk fitur autoselesai berfungsi, fitur ini harus didukung oleh browser tertentu dan tidak boleh dinonaktifkan. Selain itu, daftar nilai yang ditampilkan hanya menampilkan nilai-nilai yang sebelumnya sudah pernah dimasukkan sebelumnya.
Agar benar-benar dapat memengaruhi nilai dalam daftar saran, HTML5 memperkenalkan elemen datalist. Elemen ini tidak menghasilkan tampilan yang terlihat di browser. Nilai-nilai untuk daftar saran dapat ditentukan melalui elemen-elemen option yang ada di bawahnya. Berikut adalah contoh:
<div> Bahasa: <br /> <input type="text" autocomplete="on" list="bahasa" /> </div> <datalist id="bahasa"> <option value="HTML5"></option> <option value="XHTML"></option> <option value="PHP"></option> <option value="JavaScript"></option> </datalist>
Terhubungkan logis antara kolom input dan elemen datalist melalui atribut list dari elemen input. Untuk itu, nilai yang digunakan harus sama antara atribut list dan atribut id dari elemen datalist.
Atur Fokus
Fokus dapat secara otomatis diberikan kepada sebuah kolom formulir ketika halaman dimuat. Fungsi ini biasanya Anda kenali dari halaman beranda Google. Ketika halaman tersebut dimuat, Anda bisa langsung memasukkan kata kunci pencarian tanpa perlu menempatkan kursor secara manual di dalam kolom pencarian.
HTML5 memiliki atribut autofocus untuk kasus-kasus seperti ini. Atribut ini menyebabkan kolom formulir yang diberi atribut tersebut akan secara otomatis meraih fokus ketika halaman dimuat.
Contoh:
<form> <input name="kolom_cari" autofocus="autofocus" /> <input type="submit" value="Cari" /> </form>
Browser yang tidak mengenal atribut autofocus akan mengabaikannya. Hal ini tidak memberikan dampak negatif. (Namun tentu saja, dalam hal ini kolom tidak akan difokuskan).
Verifikasi Masukan
Hingga saat ini, masukan formulir tidak dapat diverifikasi hanya dengan bantuan HTML. Jika Anda ingin memeriksa apakah pengguna benar-benar telah memasukkan alamat email ke dalam kolom formulir, biasanya menggunakan JavaScript atau PHP. Dalam HTML5, "jongkok" semacam itu sudah tidak perlu lagi. Karena mulai sekarang, HTML sudah memiliki API validasi. Fitur ini sangat memudahkan dalam memverifikasi masukan formulir dengan usaha yang sangat sedikit.
HTML5 memiliki beberapa aturan yang menentukan cara validasi bidang dilakukan. Misalnya, kolom input dengan tipe email akan dicek apakah alamat email yang ditulis memenuhi syarat secara sintaksis.
• url - Diperiksa untuk URL
• email - Diperiksa untuk alamat email
• range - Diperiksa untuk angka desimal
• number - Diperiksa untuk angka desimal
Untuk menandai suatu kolom sebagai kolom wajib diisi, berikan atribut required padanya.
<input id="vname" name="vname" type="text" required="required" />
Suatu bidang yang ditandai dengan ini harus diisi, sehingga tidak boleh kosong.
Namun perhatian: Untuk validasi bidang, beberapa persyaratan tertentu harus dipenuhi.
• Elemen harus diberi atribut nama name.
• Elemen harus berada di dalam elemen form, artinya berada dalam formulir HTML. Sebagai alternatif, koneksi ke formulir juga dapat dibuat melalui atribut form.
• Elemen tidak boleh memiliki atribut readonly atau disabled.
Penerapan yang tepat akan menjadi seperti ini:
<form action="form.php">
<input id="vname" name="vname" type="text" required="required" />
<input type="submit" />
</form>
Di sini browser akan memeriksa apakah bidang sudah diisi. Jika bidang kosong dan masih mencoba mengirimkan formulir, maka browser seharusnya memberikan pesan kesalahan.
Di sepanjang seri ini, telah dijelaskan beberapa kali tentang jenis bidang formulir email, range, number, tel dan url. Bidang-bidang ini tidak hanya diperiksa apakah mengandung nilai, tetapi juga apakah nilai yang dimasukkan benar.
<form action="form.php">
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Pada bidang dengan jenis email, misalnya, akan diperiksa apakah nilai yang dimasukkan benar-benar alamat email yang benar secara sintaksis. Jika tidak demikian, browser akan memberikan pesan kesalahan.
Browser bertanggung jawab atas penampilan pesan kesalahan.
Persyaratan Validasi Tidak Otomatis
Tidak selalu validasi otomatis dari input diinginkan. Jika ingin mencegah validasi formulir secara keseluruhan, maka atribut novalidate ditambahkan ke elemen form.
<form action="form.php" novalidate>
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Sebagai alternatif, atribut formnovalidate dapat ditambahkan ke tombol Kirim. Ini bermanfaat misalnya ketika bersamaan dengan tombol Kirim, terdapat tombol untuk menyimpan formulir sementara.
<form action="form.cgi" method="post">
<input id="email" name="email" type="email" />
<input type="submit" name="submit" value="Kirim" />
<input type="submit"
formnovalidate="formnovalidate" value="Simpan" />
<input type="submit"
formnovalidate="formnovalidate" value="Keluar" />
</form>
Dalam kasus ini, formulir hanya akan divalidasi melalui tombol Kirim pertama. Sementara itu, dua tombol lainnya digunakan untuk Simpan dan Keluar sehingga tidak memerlukan validasi.
