HTML5 diprakarsai oleh WhatWG (Web Hypertext Application Technology Working Group). Nama awal adalah aplikasi web 1.0. Standar ini menyerap standar Web Forms 2.0 dan diadopsi oleh organisasi W3C untuk bergabung ke dalam generasi berikutnya dari standar HTML5.
Kata pengantar
Karena bahasa dengan bahasa pemrograman paling luas saat ini, bahasa HTML memiliki karakteristik kompatibilitas platform yang mudah digunakan, cepat, dan multi-browsing. Namun, dengan kemajuan zaman, standar HTML stagnan. Kali ini, pembaruan standar HTML5, yang masih sedang dikembangkan, dapat dikatakan telah membawa vitalitas baru ke bahasa markup ini. Artikel ini akan fokus pada Formulir Web 2.0 di HTML5, yaitu bagian formulir.
Formulir adalah kontrol umum (set) di halaman web. Dari pendaftaran situs web dan login ke sistem manajemen data perusahaan, pada dasarnya ada formulir. Alasan mengapa formulir sangat penting terutama karena mereka bertanggung jawab atas tugas memperbarui dan berinteraksi dengan sejumlah besar pengguna dan data latar belakang web. Pengembang web dapat dikatakan mencintai dan membenci formulir web. Mereka menyukai fungsi mereka yang nyaman untuk mengumpulkan dan mengatur data, dan mereka membenci fungsi mereka sebagian besar. Beberapa fungsi yang tampaknya biasa pada pengguna situs web akhir, seperti pemeriksaan jenis input, verifikasi formulir, petunjuk kesalahan, dll., Semua pengembang perlu menghabiskan banyak upaya untuk menggunakan javascript dan pemrograman DOM untuk memenuhi poin fungsional yang dibutuhkan secara alami ini. Dengan popularitas AJAX, beberapa perpustakaan alat JavaScript seperti Dojo, Yui, dll. Telah menyediakan widget JavaScript yang nyaman atau API untuk mengurangi beban pengembang.
Formulir Web HTML5 2.0 adalah peningkatan komprehensif pada formulir web saat ini. Sambil mempertahankan fitur yang sederhana dan mudah digunakan, ini menambahkan banyak kontrol bawaan atau atribut kontrol untuk memenuhi kebutuhan pengguna dan mengurangi pemrograman pengembang. Menurut pendapat saya, HTML5 terutama telah meningkatkan formulir web saat ini dalam aspek -aspek berikut:
<input type = url> </input><input type = email> </input>
<input type = date> </input>
<Pilih Data = http: // domain/getMyOptions> </ pilih>
<input type = Teks diperlukan> </input><Input Tipe = Nomor Min = 10 Max = 100> </Input>
<mubhission><nama bidang = indeks nama = 0> Peter </field>
<nama bidang = indeks kata sandi = 0> Kata sandi </field>
</symission>
Saya akan menggunakan sistem formulir baru HTML5 untuk membuat antarmuka pendaftaran pengguna yang sederhana, termasuk nama pengguna, kata sandi, tanggal lahir, masalah kerahasiaan, dll. Kode ini adalah sebagai berikut:
<! Doctype html> <html> <head> <tyle> p label {width: 180px; float: kiri; Teks-Align: Benar; Padding-Right: 10px} tabel {margin-left: 80px} tabel td {border-bottom: 1px solid #cccccc} input.submit {margin-left: 80px} </tyle> </head> <body> <bentuk acti email untuk mendaftar) </label> <input name = 'name' wajib tipe = 'email'> </input> </p> <p> <label for = 'password'> kata sandi </label> <input name = 'password' yang diperlukan tipe = 'kata sandi'> </input> </p> <p> <label untuk = 'ulang tahun' Tanggal Ulang Tahun '> THEGET </label> </p> <p> </label untuk =' ulang tahun 'Tanggal Lahir </label> <input> </p> <p> <label untuk =' ulang tahun 'Tanggal Lahir </label> <input =' Tipe = 'DATE =' Tanggal '/Tanggal Ulang Tahun'> for = 'gender'> kewarganegaraan </label> <pilih name = 'country' data = 'country.xml'> </schect> </p> <p> <label for = 'photo'> avatar pribadi </label> <input type = 'file' name = 'photo' accept = 'Image/*' PERTANYAAN </td> <td> Jawaban </td> <td> </td> </pead> <tr id = questionId ulangi = templat-pengulangan = 1 REPEIN-MIN = 1 Repeat-max = 3> <td> <Input Type = Teks = Pertanyaan [pertanyaan] .q> </td> <td> <tdpute = questions = questions = questions [question] .q> </td> <td> <td- typon = questions = questions = question = [question] .q> </td> <td td> <input type = questions = questions = question = [question]. type = Remove> delete </button> </td> </tr> </able> <p> <input type = 'kirim' value = 'kirim' class = 'kirim'/> </p> </form> </body> </html>Karena standar HTML5 masih sedang dikembangkan, browser yang berbeda mendukung fitur HTML5 sangat terbatas. Di antara mereka, Opera mendukungnya lebih baik dalam bentuk. Contoh ini berjalan secara normal di Opera9. Rendering adalah sebagai berikut:
Contoh ini menggunakan beberapa elemen formulir HTML5 baru, seperti kotak input tipe email (ID) dan kotak input tipe tanggal (tanggal lahir). Dan model duplikat digunakan untuk memandu pengguna untuk mengisi masalah kerahasiaan. Dalam mengunggah avatar yang dipersonalisasi, dengan membatasi jenis file, pengguna dapat memilih gambar untuk mengunggah konten yang memenuhi standar. Kotak input pemilihan drop-down untuk pemilihan kebangsaan pengguna digunakan dalam bentuk sumber data penjangkauan. Sumber data penjangkauan menggunakan coutries.xml, dan kontennya adalah sebagai berikut:
<pilih xmlns = http: //www.w3.org/1999/xhtml> <pection> China </pection> <pection> Jepang </pection> <pection> Korea </pection> </tect>
Dan enctype form adalah aplikasi/x-www-form+xml, yaitu, pengiriman HTML5 XML. Jadi setelah verifikasi formulir dilewatkan, konten formulir akan dikirimkan dalam XML. Anda juga akan menemukan bahwa jika tidak ada nilai di kotak input ID, atau jika serangkaian jenis non-email dimasukkan, setelah Anda mencoba mengirimkan formulir, akan ada pesan kesalahan, yang bawaan ke browser.
Pembaruan HTML5 untuk membentuk kontrol tidak diragukan lagi sangat menarik. Artikel ini menjelaskan beberapa fitur baru dari formulir, dan beberapa fitur baru juga sangat menarik. Saya percaya bahwa dengan pengembangan standar yang mendalam dan peningkatan lebih lanjut dari dukungan browser untuk HTML5, pekerjaan merancang bentuk yang sederhana dan mudah digunakan akan menjadi sangat mudah.