Di antara elemen yang ditingkatkan HTML5, yang paling penting adalah elemen bentuk. Dalam HTML5, formulir telah sangat dipangkas, dan beberapa fitur yang sebelumnya membutuhkan pengkodean JavaScript sekarang dapat dengan mudah diimplementasikan tanpa pengkodean. Sebelum memulai diskusi, satu hal yang perlu diperhatikan:
Dalam HTML5, kontrol formulir dapat berada di luar satu atau lebih bentuk yang berasal. Oleh karena itu, kontrol formulir seperti bidang, label, dan input memiliki semua atribut formulir untuk mengidentifikasi bentuk yang dimiliki oleh kontrol formulir. Di html5 :1. Elemen Formulir itu sendiri menambahkan dua atribut baru: AutoComplete dan Novalidate. Properti AutoComplete digunakan untuk mengaktifkan fitur daftar saran drop-down, dan properti Novalidate digunakan untuk mematikan fitur validasi formulir, yang berguna saat pengujian.
2. Elemen Fieldset menambahkan tiga atribut baru: Nonaktifkan, Nama dan Formulir. Properti Disable digunakan untuk menonaktifkan bidang, properti nama digunakan untuk mengatur nama bidang, dan nilai properti formulir adalah ID dari satu atau lebih formulir di mana ladang itu berada. Seperti yang disebutkan sebelumnya, ketika bidang ditempatkan di luar formulir, Anda harus mengatur properti formulir dari tag fieldset, sehingga fieldset dapat dengan benar terkait dengan satu atau lebih formulir.
3. Selain atribut untuk, elemen label hanya menambahkan atribut formulir. Perlu disebutkan di sini bahwa atribut untuk, yang belum pernah saya perhatikan sebelumnya. Atribut untuk digunakan untuk menentukan kontrol formulir yang terpasang pada label. Dengan cara ini, saat mengklik label ini, kontrol formulir terlampir akan mendapatkan fokus, seperti:
<Form Action = "demo_form.asp" id = "form1">
<label untuk = "name"> klik saya </label> <input id = "name" type = "text"> </input>
<input type = "kirim" value = "kirim" />
</form>
Klik Klik saya dan kotak input berikut akan mendapatkan fokus.
4. Elemen input memperkenalkan beberapa jenis dan atribut baru untuk meningkatkan kegunaan formulir. Jenis input baru ini sangat berguna untuk mengatur dan mengklasifikasikan data. Sayangnya, tidak ada browser yang dapat mendukung semua jenis ini dengan baik.
Selain tombol asli, teks, kirim, kotak centang, radio, pilih, kata sandi, HTML5 menambahkan jenis input baru berikut:
Warna: WarnaBerbagai Tanggal: Tanggal, Datetime, Datetime-Local, Month, Week, Time
Email: Email
Nomor: Nomor
Jangkauan
Cari: Cari
Telepon: Tel
Jenis URL: URL
Anda dapat menjalankan contoh berikut untuk melihat status dukungan dari berbagai browser:
<Form Action = "demo_form.asp">
Pilih warna favorit Anda: <input type = "color" name = "favcolor" />
Ulang tahun: <input type = "date" name = "bday" />
Ulang Tahun (Tanggal dan Waktu): <Input Type = "Datetime" Name = "Bdaytime" />
Ulang Tahun (Tanggal dan Waktu): <Input Type = "DateTime-Local" Name = "Bdaytime" />
Ulang tahun (bulan dan tahun): <input type = "month" name = "bdaymonth" />
Pilih Waktu: <Input Type = "Time" Name = "USR_TIME" />
Pilih A Week: <input type = "week" name = "week_year" />
Kuantitas (antara 1 dan 5): <input type = "number" name = "kuantitas" min = "1" max = "5" />
Kuantitas (antara 1 dan 10): <input type = "range" name = "point" min = "1" max = "10" />
Cari Google: <input type = "cari" name = "googlesearch" />
Telepon: <input type = "tel" name = "usrtel" />
Tambahkan beranda Anda: <input type = "url" name = "homePage" />
E-mail: <input type = "email" name = "usremail" />
<input src = "kirimbutton.png" type = "kirim" />
</form>
Berikut ini adalah properti input yang baru ditambahkan:
AutoComplete : Secara otomatis menampilkan informasi yang dimasukkan sebelumnya, dengan nilai hidup atau mati. Berlaku untuk teks, pencarian, url, tel, email, kata sandi, datepicker, rentang, dan jenis warna. Autofokus : Secara otomatis mendapatkan fokus setelah halaman dimuat. Formulir : Menentukan bentuk inputnya, yang dapat berupa banyak. Format : Menentukan halaman (URL) atau file yang memproses input ini setelah formulir diajukan. FormEnctype : Menentukan bagaimana data dikodekan setelah formulir dikirimkan. FormMethod : Menentukan metode HTTP untuk mengirim data formulir, yang akan mengganti metode HTTP dari formulir yang sesuai. Formnovalidate : Validitas data tidak diperiksa sebelum disampaikan. FormTarget : Menentukan tempat untuk menampilkan konten formulir setelah pengiriman. Tinggi, Lebar : Panjang dan lebar kotak input, hanya berlaku untuk tipe gambar. Max, min : Nilai maksimum dan minimum dari nilai input. Berlaku untuk jumlah yang bermakna, kisaran, jenis tanggal. Beberapa : apakah akan mengizinkan beberapa nilai dimasukkan, cocok untuk tipe email dan file. Pola : Menentukan ekspresi reguler untuk memverifikasi nilai input, berlaku untuk teks, pencarian, url, tel, email, kata sandi. Placeholder : Informasi cepat sebelum input, berlaku untuk teks, pencarian, url, tel, email, kata sandi. Diperlukan : Apakah diperlukan, jika tidak diperlukan, formulir tidak dapat diserahkan. Ini berlaku untuk teks, pencarian, url, tel, email, kata sandi, pemilih tanggal, nomor, kotak centang, radio, dan jenis file. Langkah : Masukkan nilai langkah saat tumbuh secara otomatis, cocok untuk angka, rentang, tanggal, datetime, datetime-lokal, bulan, waktu dan jenis minggu. Daftar : Daftar kandidat item input perlu digunakan bersama dengan elemen datasist. Atribut daftar dapat digunakan pada jenis ini: Teks, Pencarian, URL, Tel, Email, Tanggal, Nomor, Kisaran, dan Warna. Diperkirakan berlaku di Firefox. Lihat contoh kecil:<fieldset>
<fegend> favorit </fegend>
<p>
<label>
<input type = "text" name = "Favorites" List = "Options">
<datalist id = "options">
<Opsi value = "a">
<nilai opsi = "b">
<nilai opsi = "c">
</Datalist>
</label>
</p>
</fieldset>
Contoh berikut mencoba menggunakan berbagai properti, yang dapat dijalankan di browser yang berbeda untuk melihat efek aktual:
<Form Action = "demo_form.asp">
E-mail: <input type = "email" name = "email" autocomplete = "on" />
Gambar: <input type = "gambar" src = "img_submit.gif"/>
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 = "kuantitas" min = "1" max = "5" />
Pilih Gambar: <Input Type = "File" Name = "IMG" Multiple = "Multiple" />
Kode negara: <input type = "text" name = "country_code" pola = "[a-za-z] {3}" />
Nama Depan: <input type = "Text" name = "fname" placeholder = "nama depan" />
Nama pengguna: <input type = "text" name = "usrname" wajib = "diperlukan" />
Nomor: <input type = "number" name = "point" step = "3" />
<input type = "kirim" />
<input type = "kirim" format = "demo_admin.asp" value = "kirim sebagai admin" />
<input type = "kirim" formulactype = "multipart/form-data" value = "Kirim sebagai multipart/form-data"/>
<input type = "kirim" rumus = "post" format = "demo_post.asp" value = "Kirim menggunakan postingan" />
<input type = "kirim" formnovalidate = "formnovalidate" value = "kirim tanpa validasi" />
<input type = "kirim" formTarget = "_ blank" value = "Kirim ke jendela baru" />
</form>
<Form Action = "demo_form.asp" id = "form1">
Nama Depan: <Input Type = "Text" Name = "FName" />
<input type = "kirim" value = "kirim" />
</form>
Nama Belakang: <Input Type = "Text" Name = "Lname" Form = "Form1" />
Saran: Meskipun tidak semua browser mendukung semua jenis, Anda masih didorong untuk menggunakan tipe baru ini, karena bahkan jika browser tidak mendukungnya, itu hanya akan merosot menjadi kotak input teks sederhana. Referensi Praktis: Tutorial W3C: http://www.w3schools.com/html5/default.aspBimbingan HTML5 Resmi: http://dev.w3.org/html5/html-author/
Situs web panduan yang cukup bagus: http://html5doctor.com/
HTML5 Tutorial Cina: http://www.html5china.com/
Blog front-end yang bagus: http://www.pjhome.net/default.asp?cateId=1
Pengetahuan Terkait Tentang Formulir Operasi JS: http://www.vevb.com/xugang/archive/2010/08/12/1798005.html