elemen
Takeaways Key
input Type = "Text"
Juga:
kemungkinan gaya CSS adalah terhad,
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</span> type<span>="email"</span> name<span>="email"</span> required /></span></span>
Walaupun anda boleh menambahnya jika anda lebih suka sintaks seperti XHTML yang lebih ketat, mis.
<span><span><span><input</span> type<span>="email"</span> name<span>="email"</span> required<span>="required"</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:
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</span> type<span>="email"</span> name<span>="email"</span> required /></span></span>
Datalists
Datalist mengandungi satu set pilihan yang sesuai untuk sebarang jenis input, mis.
<span><span><span><input</span> type<span>="email"</span> name<span>="email"</span> required<span>="required"</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> <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>
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:
memisahkan dan melabelkan input
Whatwg.org bentuk spesifikasi menyatakan:
setiap bahagian bentuk dianggap sebagai perenggan, dan biasanya dipisahkan dari bahagian lain menggunakan
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</span> type<span>="email"</span> name<span>="email"</span> required /></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:
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 ...
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. Sahkan pelayan-sisi
Pengesahan penyemak imbas tidak dijamin. Walaupun anda memaksa semua orang untuk mengakses menggunakan versi terkini Chrome, anda tidak boleh menghalang:
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!

Alat AI Hot

Undress AI Tool
Gambar buka pakaian secara percuma

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Terdapat tiga cara biasa untuk memulakan permintaan HTTP dalam node.js: Gunakan modul terbina dalam, axios, dan nod-fetch. 1. Gunakan modul HTTP/HTTPS terbina dalam tanpa kebergantungan, yang sesuai untuk senario asas, tetapi memerlukan pemprosesan manual jahitan data dan pemantauan ralat, seperti menggunakan https.get () untuk mendapatkan data atau menghantar permintaan pos melalui .write (); 2.AXIOS adalah perpustakaan pihak ketiga berdasarkan janji. Ia mempunyai sintaks ringkas dan fungsi yang kuat, menyokong async/menunggu, penukaran JSON automatik, pemintas, dan lain -lain. Adalah disyorkan untuk memudahkan operasi permintaan tak segerak; 3.Node-Fetch menyediakan gaya yang serupa dengan pengambilan penyemak imbas, berdasarkan janji dan sintaks mudah

Jenis data JavaScript dibahagikan kepada jenis primitif dan jenis rujukan. Jenis primitif termasuk rentetan, nombor, boolean, null, undefined, dan simbol. Nilai -nilai tidak berubah dan salinan disalin apabila memberikan nilai, jadi mereka tidak mempengaruhi satu sama lain; Jenis rujukan seperti objek, tatasusunan dan fungsi menyimpan alamat memori, dan pembolehubah menunjuk objek yang sama akan mempengaruhi satu sama lain. Typeof dan Instanceof boleh digunakan untuk menentukan jenis, tetapi memberi perhatian kepada isu -isu sejarah TypeOfNull. Memahami kedua -dua jenis perbezaan ini dapat membantu menulis kod yang lebih stabil dan boleh dipercayai.

Helo, pemaju JavaScript! Selamat datang ke berita JavaScript minggu ini! Minggu ini kami akan memberi tumpuan kepada: Pertikaian tanda dagangan Oracle dengan Deno, objek masa JavaScript baru disokong oleh pelayar, kemas kini Google Chrome, dan beberapa alat pemaju yang kuat. Mari mulakan! Pertikaian tanda dagangan Oracle dengan percubaan Deno Oracle untuk mendaftarkan tanda dagangan "JavaScript" telah menyebabkan kontroversi. Ryan Dahl, pencipta Node.js dan Deno, telah memfailkan petisyen untuk membatalkan tanda dagangan, dan dia percaya bahawa JavaScript adalah standard terbuka dan tidak boleh digunakan oleh Oracle

CACHEAPI adalah alat yang disediakan oleh penyemak imbas kepada permintaan rangkaian cache, yang sering digunakan bersempena dengan ServiceWorker untuk meningkatkan prestasi laman web dan pengalaman luar talian. 1. Ia membolehkan pemaju menyimpan sumber secara manual seperti skrip, helaian gaya, gambar, dan lain -lain; 2. Ia boleh memadankan tindak balas cache mengikut permintaan; 3. Ia menyokong memotong cache tertentu atau membersihkan seluruh cache; 4. Ia boleh melaksanakan keutamaan cache atau strategi keutamaan rangkaian melalui perkhidmatan pekerja yang mendengar acara mengambil; 5. Ia sering digunakan untuk sokongan luar talian, mempercepat kelajuan akses berulang, sumber utama dan kandungan kemas kini latar belakang; 6. Apabila menggunakannya, anda perlu memberi perhatian kepada kawalan versi cache, sekatan penyimpanan dan perbezaan dari mekanisme caching HTTP.

Janji adalah mekanisme teras untuk mengendalikan operasi tak segerak dalam JavaScript. Memahami panggilan rantaian, pengendalian ralat dan gabungan adalah kunci untuk menguasai aplikasi mereka. 1. Panggilan rantai mengembalikan janji baru melalui .then () untuk merealisasikan persamaan proses tak segerak. Setiap .then () menerima hasil sebelumnya dan boleh mengembalikan nilai atau janji; 2. Pengendalian ralat harus menggunakan .catch () untuk menangkap pengecualian untuk mengelakkan kegagalan senyap, dan boleh mengembalikan nilai lalai dalam tangkapan untuk meneruskan proses; 3. Gabungan seperti janji.all () (berjaya hanya berjaya selepas semua kejayaan), janji.race () (penyempurnaan pertama dikembalikan) dan janji.allsettled () (menunggu semua penyelesaian)

Kaedah terbina dalam JavaScript seperti .map (), .filter () dan .reduce () dapat memudahkan pemprosesan data; 1) .map () digunakan untuk menukar elemen satu hingga satu untuk menghasilkan tatasusunan baru; 2) .filter () digunakan untuk menapis elemen mengikut keadaan; 3) .reduce () digunakan untuk mengagregatkan data sebagai nilai tunggal; Penyalahgunaan harus dielakkan apabila digunakan, mengakibatkan kesan sampingan atau masalah prestasi.

Gelung acara JavaScript menguruskan operasi tak segerak dengan menyelaraskan susunan panggilan, webapis, dan barisan tugas. 1. Stack panggilan melaksanakan kod segerak, dan ketika menghadapi tugas -tugas yang tidak segerak, ia diserahkan kepada Webapi untuk diproses; 2. Selepas Webapi melengkapkan tugas di latar belakang, ia meletakkan panggil balik ke dalam barisan yang sama (tugas makro atau tugas mikro); 3. Loop acara memeriksa sama ada timbunan panggilan kosong. Jika ia kosong, panggilan balik diambil dari barisan dan ditolak ke dalam tumpukan panggilan untuk pelaksanaan; 4. Tugas -tugas mikro (seperti janji. 5. Memahami gelung acara membantu mengelakkan menyekat benang utama dan mengoptimumkan pesanan pelaksanaan kod.

Gelembung peristiwa menyebarkan dari elemen sasaran ke luar ke nod nenek moyang, sementara penangkapan peristiwa menyebarkan dari lapisan luar ke dalam ke elemen sasaran. 1. Bubbles Acara: Selepas mengklik elemen kanak -kanak, acara itu mencetuskan pendengar elemen induk ke atas. Sebagai contoh, selepas mengklik butang, ia mengeluarkan anak -anak terlebih dahulu, dan kemudian ParentClicked. 2. Tangkap Acara: Tetapkan parameter ketiga menjadi benar, supaya pendengar dilaksanakan di peringkat penangkapan, seperti mencetuskan pendengar penangkapan elemen induk sebelum mengklik butang. 3. Penggunaan praktikal termasuk pengurusan bersatu peristiwa elemen kanak -kanak, pemprosesan pemintasan dan pengoptimuman prestasi. 4. Aliran acara DOM dibahagikan kepada tiga peringkat: menangkap, sasaran dan gelembung, dan pendengar lalai dilaksanakan di peringkat gelembung.
