Borang HTML5: markup

Takeaways Key

HTML5 menyediakan pilihan output baca sahaja, termasuk output (hasil pengiraan atau tindakan pengguna), kemajuan (bar kemajuan), dan meter (skala yang boleh berubah antara warna bergantung pada nilai yang ditetapkan untuk atribut) . Ia juga membolehkan penggunaan elemen label sama ada di sekitar atau di sebelah input itu sendiri dengan atribut yang menyatakan id input.
Walaupun jenis input HTML5 adalah masa depan, penting untuk sentiasa menggunakan jenis input yang betul untuk data yang anda minta dan mengesahkan data pengguna pada sisi pelayan. Pengesahan sisi pelanggan tidak pernah dan tidak akan menjadi pengganti pengesahan sisi pelayan.
Ini adalah yang pertama dalam siri tiga bahagian mengenai bentuk web HTML5. Kami akan merangkumi markup asas dalam artikel ini sebelum maju ke Styling dan API pengesahan JavaScript sisi pelanggan. Saya cadangkan anda membaca ini walaupun anda sudah biasa dengan bentuk - terdapat banyak atribut baru dan gotchas! Borang HTML mungkin biasa tetapi mereka penting untuk majoriti laman web dan aplikasi. Dalam HTML4, medan input terhad kepada:

input Type = "Text"
type input = "ceckbox"
type input = "radio"
type input = "kata laluan"
type input = "Tersembunyi" - Untuk data pengguna tidak dapat melihat
input type = "file" - untuk muat naik
textarea - untuk entri teks yang lebih lama
pilih-untuk senarai drop-down
• Butang
- biasanya digunakan untuk mengemukakan borang, walaupun input Type = "Hantar" dan input Type = "Image" juga boleh digunakan.

Juga:

kemungkinan gaya CSS adalah terhad,
Kawalan tersuai seperti tarikh dan pemetik warna perlu dibangunkan dalam kod, dan
Pengesahan sisi klien diperlukan JavaScript.

jenis input html5 tambahan

Satu banjir jenis input baru telah diperkenalkan. Ini memberikan bantuan input asli dan pengesahan tanpa sebarang kod JavaScript ...
taip Keterangan e -mel Masukkan alamat e -mel Tel Masukkan nombor telefon - tiada sintaks yang ketat dikuatkuasakan tetapi rehat talian akan dikeluarkan url masukkan url cari medan carian dengan pemecahan talian dikeluarkan secara automatik nombor nombor titik terapung julat kawalan untuk memasukkan nilai anggaran, biasanya diwakili oleh gelangsar tarikh Masukkan hari, bulan dan tahun DateTime Masukkan Hari, Bulan, Tahun, Jam, Minit, Kedua dan Microsecond berdasarkan zon waktu UTC semasa DateTime-Local Masukkan tarikh dan masa tanpa zon waktu bulan Masukkan bulan dan tahun tanpa zon waktu minggu Masukkan nombor seminggu tanpa zon waktu masa Masukkan masa tanpa zon waktu warna tentukan warna

Atribut input

Kecuali dinyatakan sebaliknya, medan input boleh mempunyai sebarang atribut khusus borang berikut. Beberapa adalah atribut Boolean, iaitu, mereka tidak memerlukan nilai, misalnya

<span><span><span><input> type<span>="email"</span> name<span>="email"</span> required /></span></span></span>

Walaupun anda boleh menambahnya jika anda lebih suka sintaks seperti XHTML yang lebih ketat, mis.

<span><span><span><input> type<span>="email"</span> name<span>="email"</span> required<span>="required"</span> /></span></span></span>

atribut Keterangan nama Nama medan input nilai nilai awal diperiksa memeriksa kotak semak atau input radio maxlength Panjang maksimum rentetan yang dimasukkan. Ini juga boleh digunakan untuk medan TextArea di HTML5 minlength Panjang minimum rentetan yang dimasukkan. Ini didokumenkan tetapi, pada masa penulisan, sokongan penyemak imbas adalah miskin dan atribut menyebabkan validator HTML menjadi ralat. Pilihan alternatif adalah corak = ". {3,}"Yang akan menguatkuasakan sekurang -kurangnya tiga aksara. pemegang tempat petunjuk teks halus yang ditunjukkan dalam kotak input Autofocus Tetapkan fokus ke medan ini (tidak tersembunyi) apabila halaman dimuatkan diperlukan menunjukkan bahawa nilai mesti dimasukkan corak memastikan nilai mematuhi ungkapan biasa min Nilai minimum yang dibenarkan (jenis angka dan tarikh) maks nilai maksimum yang dibenarkan (jenis angka dan tarikh) langkah nilai granulariti. Sebagai contoh, jenis input = "nombor" min = "10" max = "19" langkah = "2" hanya akan membenarkan nilai 10, 12, 14, 16 atau 18. Autocomplete Menyediakan penyemak imbas dengan petunjuk untuk penyempurnaan auto, mis. "E -mel pengebilan" atau boleh ditetapkan untuk "ON" atau "OFF" untuk membolehkan dan melumpuhkan dengan sewajarnya InputMode Menentukan mekanisme input. Pilihan yang paling berguna:

• verbatim-Kandungan bukan prosa seperti nama pengguna
• Latin - Skrip Latin seperti bidang carian
• Latin-Name-Nama, iaitu dengan Permodalan Surat Awal
• Latin-prose-kandungan prosa seperti mesej, tweet, dan lain-lain
• Numerik - Input angka di mana nombor atau julat tidak sesuai, mis. Nombor kad kredit

saiz Saiz dalam aksara untuk input teks atau kata laluan atau piksel untuk e -mel, tel, URL atau input carian. Mungkin paling baik dielakkan kerana anda harus menggunakan CSS untuk bidang gaya. baris Bilangan baris teks (Textarea sahaja) cols Bilangan lajur teks (TextArea sahaja) senarai menunjuk kepada pilihan data yang ditetapkan ejaan Tetapkan kepada Benar atau Salah untuk membolehkan atau melumpuhkan pemeriksaan ejaan bentuk ID bentuk yang dimiliki oleh input ini. Secara umum, input hendaklah bersarang di dalam bentuk, tetapi atribut ini membenarkan input ditakrifkan di mana sahaja di halaman formAction Menentukan URI untuk mengatasi tindakan borang semasa mengemukakan (hantar butang/gambar sahaja) formmethod Menentukan Dapatkan atau Hantar Untuk Mengatasi Kaedah Borang Semasa Mengemukakan (Hantar Butang/Imej Sahaja) formentype Menentukan jenis kandungan semasa mengemukakan (teks/biasa, multipart/form-data atau aplikasi/x-www-form-urlencoded pada butang/imej hantar sahaja) formtarget Menentukan tetingkap/bingkai sasaran untuk mengatasi sasaran borang semasa menghantar (hantar butang/imej sahaja) dibaca nilai input tidak dapat diubah walaupun akan disahkan dan diserahkan kurang upaya melumpuhkan input - tiada pengesahan akan berlaku dan data tidak akan dihantar
Perhatikan bahawa medan tarikh mesti selalu menggunakan YYYY-MM-DD untuk nilai, min dan max atribut.
Contoh berikut meminta e -mel wajib yang berakhir di @mysite.com dan mempunyai tumpuan apabila halaman dimuat:

<span><span><span><input> type<span>="email"</span> name<span>="email"</span> required /></span></span></span>

Datalists

Datalist mengandungi satu set pilihan yang sesuai untuk sebarang jenis input, mis.

<span><span><span><input> type<span>="email"</span> name<span>="email"</span> required<span>="required"</span> /></span></span></span>

Apabila Datalist disokong, penyemak imbas membentangkan pilihan auto-lengkap apabila anda mula menaip. Seluruh senarai biasanya ditunjukkan jika anda mengklik dua kali kawalan atau klik anak panah bawah (jika ditunjukkan). Tidak seperti drop-down pilih standard, pengguna bebas untuk mengatasi pilihan ini dan memasukkan nilai mereka sendiri. Ia mungkin untuk menetapkan nilai dan teks seperti pilihan pilih standard, mis.

<span><span><span><input>
</span></span><span>  <span>type<span>="email"</span>
</span></span><span>  <span>name<span>="login"</span>
</span></span><span>  <span>pattern<span>="@mysite\.com$"</span>
</span></span><span>  <span>autocomplete<span>="email"</span>
</span></span><span>  <span>autofocus
</span></span><span>  <span>required /></span></span></span>

Tetapi sedar bahawa pelaksanaan berbeza. Sebagai contoh, firefox auto-lengkap pada teks itu sendiri (Internet Explorer) manakala Chrome lebih suka nilai (iaitu) dan menunjukkan teks yang berwarna:

Datalists boleh dihuni oleh JavaScript jika anda ingin mengambil pilihan melalui AJAX.

Melumpuhkan pengesahan

Pengesahan untuk keseluruhan bentuk boleh dilumpuhkan dengan menetapkan atribut novalidate pada elemen borang. Sebagai alternatif, anda boleh menetapkan atribut FormNovalidate pada butang/imej hantar borang. Ingat juga bahawa menetapkan atribut kurang upaya input akan menghalang pengesahan pada medan tersebut.

medan output

Walaupun kami terutamanya membincangkan jenis input, HTML5 juga menyediakan pilihan output baca sahaja:

• output - Hasil pengiraan atau tindakan pengguna
• Kemajuan - bar kemajuan (atribut nilai dan max menentukan status)
• meter - Skala yang boleh berubah antara hijau, amber dan merah bergantung kepada nilai yang ditetapkan untuk nilai atribut, min, max, rendah, tinggi dan optimum

memisahkan dan melabelkan input

Whatwg.org bentuk spesifikasi menyatakan:

setiap bahagian bentuk dianggap sebagai perenggan, dan biasanya dipisahkan dari bahagian lain menggunakan

elemen

Menarik. Saya biasanya menggunakan div walaupun saya meragui ia penting dari perspektif semantik. Tag P adalah lebih pendek walaupun mungkin anda perlu memohon kelas untuk mengubah suai margin. Lebih penting lagi, anda harus menggunakan elemen label sama ada di sekitar atau di sebelah input itu sendiri dengan atribut yang menyatakan ID input, mis.

<span><span><span><input> type<span>="email"</span> name<span>="email"</span> required /></span></span></span>

tiada kawalan standard

Tiada garis panduan antara muka khusus untuk vendor penyemak imbas untuk diikuti. Ini disengajakan: Pemetik tarikh dikawal tetikus desktop biasa boleh menjadi terlalu kecil pada peranti mudah alih supaya vendor dapat melaksanakan alternatif berasaskan sentuhan.

Sokongan penyemak imbas

Tidak setiap jenis input dan atribut disokong dalam semua pelayar. Secara umum, pelayar yang paling moden dari IE10 termasuk asas -asas seperti e -mel dan nombor. Walau bagaimanapun, jenis tarikh hanya disokong dalam penyemak imbas WebKit dan Blink pada masa penulisan. Penyemak imbas akan kembali kepada input teks standard apabila jenis tertentu dan mengabaikan atribut apabila nilai tersebut tidak disokong.

Sentiasa gunakan jenis yang betul!

Adalah penting untuk menggunakan jenis input yang betul untuk data yang anda minta. Itu mungkin kelihatan jelas tetapi anda akan menghadapi situasi apabila anda akan tergoda untuk menggunakan input teks standard. Pertimbangkan tarikh. Sokongan adalah tampal dan ini membawa kepada isu pelaksanaan:

1. Input tarikh standard selalu mengembalikan tarikh dalam format YYYY-MM-DD tanpa mengira bagaimana pemetik tarikh dibentangkan di tempat anda.


2. IE dan Firefox akan kembali kepada input teks standard, tetapi pengguna anda mungkin mengharapkan untuk memasukkan nilai dalam format MM-DD-Yyyy atau Eropah DD-MM-Yyyy.

Pemetik tarikh JavaScript seperti yang ada di JQuery UI membolehkan anda menentukan format tersuai-atau bahkan YYYY-MM-DD untuk konsistensi-tetapi anda tidak dapat menjamin JavaScript akan diaktifkan.

Penyelesaian yang mudah adalah untuk meninggalkan input tarikh HTML5, kembali ke teks dan melaksanakan kawalan tarikh anda sendiri. Jangan. Anda tidak akan membuat pemetik tarikh tersuai yang berfungsi di semua peranti di semua resolusi skrin, menyokong papan kekunci, tetikus dan input sentuh dan terus beroperasi apabila JavaScript dilumpuhkan. Khususnya, pelayar mudah alih sering di hadapan sepupu desktop mereka dan melaksanakan kawalan skrin sentuh yang baik. Jenis input HTML5 adalah masa depan. Gunakannya dan, jika perlu, tambahkan polyfills JavaScript dalam situasi di mana anda memerlukan sokongan penyemak imbas yang baik. Tetapi ingat untuk ...

Sahkan pelayan-sisi

Pengesahan penyemak imbas tidak dijamin. Walaupun anda memaksa semua orang untuk mengakses menggunakan versi terkini Chrome, anda tidak boleh menghalang:

• pepijat pelayar atau kegagalan javascript membenarkan data tidak sah
• Pengguna menukar HTML atau skrip anda menggunakan alat penyemak imbas
• penyerahan dari sistem di luar kawalan anda, atau
• pemintasan data antara penyemak imbas dan pelayan (pastinya lebih http).

Pengesahan sisi klien tidak pernah dan tidak akan menjadi pengganti pengesahan sisi pelayan. Mengesahkan data pengguna pada pelayan adalah penting. Pada pelanggan, ia adalah yang bagus-to-have . Akhirnya, ingat tarikh boleh diterima dalam yyyy-mm-dd atau mana-mana format yang anda tentukan kepada pengguna (mm-dd-yyyy, dd-mm-yyyy, dll.) Periksa digit dalam empat aksara pertama atau gunakan bahasa ibunda/ Kaedah parsing tarikh kerangka yang diperlukan. Kami telah banyak menutupi artikel ini. Di bahagian seterusnya kita akan melihat sifat CSS yang berkaitan dengan borang.

Soalan Lazim (Soalan Lazim) Mengenai HTML5 Forms Markup

Apakah kepentingan menggunakan HTML5 dalam markup borang?

HTML5 memperkenalkan pelbagai jenis input dan atribut baru yang memberikan pengalaman pengguna yang lebih baik untuk pengisian borang. Ciri -ciri baru ini membolehkan jenis input yang lebih spesifik, seperti e -mel, tarikh, dan masa, yang boleh disahkan oleh penyemak imbas itu sendiri, mengurangkan keperluan untuk JavaScript tambahan. Ini membawa kepada kod yang lebih bersih, lebih cekap dan pengalaman pengguna yang lebih lancar.

Bagaimana HTML5 meningkatkan kebolehcapaian dalam markup borang? Sebagai contoh, atribut "yang diperlukan" boleh digunakan untuk memastikan bahawa bidang penting diisi. Atribut "tempat letak" dapat memberikan petunjuk kepada pengguna tentang jenis maklumat yang diharapkan dalam bidang. Di samping itu, atribut "Autofocus" secara automatik boleh memfokuskan kursor pada medan input tertentu apabila halaman memuatkan, membimbing interaksi pengguna dengan borang.

Apakah beberapa kesilapan yang biasa untuk dielakkan apabila menggunakan HTML5 untuk markup borang? Sebagai contoh, menggunakan jenis input yang salah boleh menyebabkan data yang salah dikemukakan. Kesilapan lain tidak memberikan penolakan yang mencukupi untuk pelayar yang lebih tua yang tidak menyokong HTML5. Ini boleh membawa kepada pengalaman pengguna yang lemah bagi mereka yang menggunakan teknologi yang lebih lama.

Bagaimana saya boleh menggunakan HTML5 untuk membuat lebih banyak bentuk interaktif? Borang interaktif. Sebagai contoh, elemen "datalist" boleh digunakan untuk membuat senarai dropdown pilihan untuk medan input, manakala elemen "kemajuan" dan "meter" boleh digunakan untuk mewakili kemajuan tugas atau nilai semasa dalam a Julat yang diketahui, masing-masing. Sebagai contoh, atribut "diperlukan" boleh digunakan untuk memastikan bahawa medan tidak dibiarkan kosong, manakala atribut "corak" boleh digunakan untuk menentukan ungkapan biasa bahawa nilai medan input mesti dipadankan. Sekiranya input tidak memenuhi kriteria ini, borang itu tidak akan dikemukakan dan pengguna akan diminta untuk membetulkan input mereka. Unsur -unsur di HTML5 memberikan petunjuk yang jelas tentang jenis kandungan yang terkandung di dalamnya, menjadikannya lebih mudah bagi pemaju dan mesin (seperti enjin carian) untuk memahami struktur dan kandungan a laman web. Ini dapat meningkatkan pengoptimuman enjin carian dan kebolehcapaian.

Bagaimana saya dapat memastikan borang html5 saya serasi dengan pelayar yang lebih tua? Pelayar yang mungkin tidak menyokong semua ciri HTML5. Ini boleh dilakukan dengan menggunakan JavaScript untuk mengesan sama ada penyemak imbas menyokong ciri tertentu dan menyediakan pelaksanaan alternatif jika tidak. 🎜> HTML5 memperkenalkan beberapa ciri yang dapat meningkatkan pengalaman mudah alih borang. Sebagai contoh, atribut "Autofocus" boleh digunakan untuk memfokuskan kursor secara automatik pada medan input tertentu apabila halaman memuatkan, mengurangkan keperluan pengguna untuk mengetuk medan secara manual. Di samping itu, jenis input baru seperti "E -mel" dan "Tel" membawa papan kekunci khusus pada peranti mudah alih, menjadikannya lebih mudah bagi pengguna untuk memasukkan jenis data yang betul.

Apakah beberapa amalan terbaik untuk menstrukturkan borang web dalam html5? Kawalan menggunakan elemen "label", dan menggunakan elemen "legenda" untuk memberikan kapsyen untuk setiap "medan". Di samping itu, penting untuk menggunakan jenis input dan atribut yang sesuai untuk memastikan kesahan data dan meningkatkan pengalaman pengguna.

Bagaimana saya boleh menggunakan CSS untuk gaya borang HTML5 saya? HTML5 membentuk pelbagai cara. Sebagai contoh, anda boleh menggunakan CSS untuk menukar warna, saiz, dan fon elemen bentuk, menambah sempadan dan latar belakang, dan menggunakan kesan hover. Di samping itu, CSS boleh digunakan untuk mengawal susun atur elemen bentuk, seperti menyelaraskan kawalan dan label bentuk, dan mewujudkan bentuk berbilang lajur.

Atas ialah kandungan terperinci Borang HTML5: markup. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!