Borang HTML5: Kawalan Baru

HTML5 memperkenalkan lima elemen bentuk baru: <datalist></datalist>, <output></output>, <keygen></keygen>, <progress></progress>, dan <meter></meter>, setiap tujuan yang berbeza.

elemen

bertindak sebagai tolok, secara visual mewakili nilai dalam julat yang ditentukan. Secara kritis, ia tidak mempunyai atribut

dan tidak dikemukakan dengan borang. Nilai minimum mungkir kepada 0 atau nilai meter (mana yang lebih rendah), dan mungkir maksimum kepada 1 atau nilai meter (yang mana lebih tinggi). <meter></meter> name elemen

memaparkan peratusan penyelesaian tugas, menggunakan atribut

dan <progress></progress>. Ia menjadikan bar yang dipenuhi sebahagiannya, mulai dari kelabu (0%) hingga biru (100%). Hasil yang ditinggalkan max menghasilkan penunjuk kemajuan yang tidak pasti (selalunya bar animasi atau titik). value value elemen

memaparkan hasil yang dikira, ideal apabila pengguna melihat tetapi tidak memanipulasi nilai secara langsung. Nilainya, yang diperoleh dari bidang bentuk lain, dikemukakan dengan borang. JavaScript sering mengemas kini nilai ini secara dinamik.

<output></output>

(petikan dari "HTML5 & CSS3 untuk dunia sebenar, edisi ke -2" oleh Alexis Goldstein, Louis Lazaris, dan Estelle Weyl.

Kami telah meneroka atribut baru dan atribut elemen bentuk biasa. Walau bagaimanapun, HTML5 menawarkan lebih banyak lagi! Mari kita semak dan

, dan periksa

dan input type. <progress></progress> <meter></meter> <keygen></keygen> dan <output></output> elemen

<progress></progress> Mewujudkan tolok yang memaparkan nilai dalam julat (menggunakan <meter></meter>,

, dan

). Tidak seperti banyak input angka, ia tidak mempunyai atribut <meter></meter> dan tidak dihantar. Lalai minimum kepada 0 atau min, maksimum hingga 1 atau max. Gunakannya untuk nilai yang turun naik (mis., Skor ujian, tahap bahan api). Penyemak imbas yang disokong (Android 4.4, tetapi tidak iOS7 atau IE11) memaparkan tolok warna (kuning, hijau, merah berdasarkan julat nilai). value name value tidak boleh menunjukkan kemajuan; Gunakan value sebaliknya.

menunjukkan penyelesaian tugas (0-100%), menggunakan

dan <meter></meter>. Pelayar mengira dan memaparkan peratusan sebagai bar. <progress></progress> yang tidak ditentukan mewujudkan penunjuk kemajuan yang tidak pasti. Tidak seperti <progress></progress>, max hanya meningkat ke arah value. Ia mungkir kepada value, membolehkan pelarasan lebar dan ketinggian (ketinggian mempengaruhi jarak, bukan ketinggian bar). <meter></meter>

elemen <output></output>

<output></output> Memaparkan hasil pengiraan, dapat dilihat oleh pengguna tetapi tidak boleh diedit secara langsung. Nilainya, yang sering dikemas kini melalui JavaScript, diperolehi dari medan bentuk lain dan dikemukakan dengan borang tersebut. Atribut for menghubungkannya ke medan input yang berkaitan.

<keygen></keygen> Menjana pasangan utama awam-swasta, mengemukakan kunci awam. Sokongan berbeza -beza di seluruh pelayar (Opera, Chrome, Safari, Android, Firefox menyokongnya, tetapi tidak iOS7 atau IE11). challenge dan keytype (pada masa ini hanya rsa) adalah atributnya.

atribut contenteditable

untuk situasi di mana unsur -unsur bentuk standard tidak mencukupi (mis., Editor WYSIWYG dalam talian), atribut contenteditable (atau contenteditable="true") membuat mana -mana elemen yang boleh diedit. Walaupun tidak diserahkan secara automatik, JavaScript boleh mengendalikan penyerahan sisi pelayan. Ini sering dilihat dalam profil yang boleh diedit. Menambah contenteditable membuat elemen dan keturunannya boleh diedit (kecuali secara eksplisit ditetapkan ke contenteditable="false"). Kemas kini DOM pihak klien memerlukan JavaScript untuk menyimpan.

perubahan kepada kawalan bentuk sedia ada

elemen <form></form>

HTML5 Enhances <form></form> dengan: novalidate (mengemukakan tanpa pengesahan asli), menghilangkan action (lalai ke halaman semasa), dan formaction (mengatasi action untuk butang hantar spesifik). autocomplete juga boleh digunakan secara langsung ke elemen <form></form>.

elemen <optgroup></optgroup>

html5 membolehkan elemen bersarang <optgroup></optgroup> untuk menu pilih bertingkat.

elemen <textarea></textarea>

Atribut

<textarea></textarea> dan tidak lagi diperlukan (gunakan CSS untuk saiz). Atribut rows atribut (nilai: cols atau wrap) mengawal garis pecah pada penyerahan. soft hard Kesimpulan

Ini merangkumi banyak peningkatan bentuk HTML5. Sokongan penyemak imbas yang semakin meningkat mengurangkan pergantungan JavaScript untuk pengesahan dan penambahbaikan UI. Walaupun penyemak imbas warisan berterusan, mengamalkan bentuk HTML5 dengan polyfills yang sesuai adalah disyorkan. Bab seterusnya meneroka keupayaan video dan audio HTML5.

Soalan Lazim (Soalan Lazim)

(bahagian Soalan Lazim tetap tidak berubah, kerana ia mencerminkan maklumat yang dibentangkan dalam teks asal.) semuanya ditangani dengan sewajarnya dan selaras dengan teks yang disediakan. Oleh itu, menghasilkan semula mereka di sini akan berlebihan.

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