Panduan untuk bentuk HTML & CSS (tiada hacks!)

Secara sejarah, bentuk HTML telah agak rumit - pertama, kerana sekurang -kurangnya sedikit JavaScript diperlukan, dan kedua, kerana tidak ada jumlah CSS yang dapat membuat mereka berkelakuan. Walau bagaimanapun, ini tidak semestinya benar dalam kes web moden, jadi mari kita belajar bagaimana untuk menandakan borang hanya menggunakan HTML dan CSS.

Takeaways Key

Borang HTML boleh dibuat menggunakan hanya HTML dan CSS, tanpa memerlukan JavaScript. Struktur borang dibuat menggunakan elemen

dan data dikemukakan menggunakan atribut tindakan. Atribut tambahan, seperti Enctype dan Target, boleh digunakan untuk menentukan jenis pengekodan data dan di mana output dipaparkan.

• Label adalah penting untuk kebolehgunaan dan kebolehcapaian, menerangkan apa input. Terdapat tiga cara untuk mengisytiharkan label: label bersebelahan, label ARIA, dan label pembungkus. Kaedah yang paling berkesan ialah membungkus input dalam label. Pemegang letak juga berguna untuk memberikan contoh apa yang diharapkan dalam medan input.
Terdapat pelbagai jenis input untuk dipilih, seperti butang, kotak semak, warna, tarikh, e -mel, fail, dan lain -lain. Input gaya boleh mencabar kerana lalai penyemak imbas, tetapi atribut penampilan boleh digunakan untuk menimpa ini. Pengesahan input adalah penting untuk memastikan input pengguna memenuhi kriteria tertentu, dan boleh dicapai menggunakan pengesahan asli-HTML atau JavaScript.
• membentuk struktur asas

bermula dengan elemen

.

Tidak ada yang mewah di sini. Hanya meliputi struktur asas.

Jika anda mengemukakan data borang secara semulajadi (iaitu, tanpa JavaScript), anda perlu memasukkan atribut tindakan, di mana nilai adalah URL yang anda akan menghantar data borang ke. Kaedah ini harus mendapatkan atau pos bergantung kepada apa yang anda cuba capai (jangan hantar data sensitif dengan GET).

Selain itu, terdapat juga atribut Enctype yang kurang digunakan yang mentakrifkan jenis pengekodan data yang dihantar. Juga, atribut sasaran, walaupun tidak semestinya sifat yang unik untuk bentuk, boleh digunakan untuk menunjukkan output dalam tab baru.

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

Borang berasaskan JavaScript tidak semestinya memerlukan atribut ini.

Borang

terdiri daripada input, yang mengharapkan nilai data.

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

Lihat pen

Borang 1 oleh SitePoint (@SitePoint)

pada codepen.

<span><span><span><form</span>></span>
</span>    <span><span><span><input</span> type<span>="text"</span>></span><!-- text input -->
</span>    <span><span><span><input</span> type<span>="text"</span> value<span>="Prefilled value"</span>></span>
</span><span><span><span></form</span>></span>
</span>

termasuk label untuk kebolehgunaan & kebolehaksesan yang lebih baik

Setiap input memerlukan label.

Label adalah deskriptor teks yang menerangkan apa input. Terdapat tiga cara untuk mengisytiharkan label, tetapi salah seorang daripada mereka lebih tinggi daripada dua yang lain. Mari kita menyelam sekarang.

label bersebelahan

Label yang bersebelahan memerlukan kod yang paling banyak kerana kita perlu mengisytiharkan secara eksplisit yang memasukkan label yang diterangkan. Bagi yang paling, ini adalah tidak bertentangan kerana kita boleh membungkus input di dalam label untuk mencapai kesan yang sama dengan kod kurang.

yang dikatakan, kaedah bersebelahan mungkin diperlukan dalam keadaan yang melampau, jadi inilah yang akan kelihatan seperti:

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

seperti yang anda dapat lihat dari contoh di atas, untuk atribut mesti sepadan dengan atribut id input, dan apa yang dilakukannya dijelaskan kepada peranti input yang dimiliki oleh deskriptor teks yang mana input. Peranti input kemudian akan menyampaikannya kepada pengguna (pembaca skrin, sebagai contoh, akan menentukannya melalui ucapan).

ARIA Labels

Walaupun HTML semantik lebih baik, label ARIA (aplikasi Internet yang boleh diakses) boleh mengimbangi ketiadaan mereka. Dalam kes ini, inilah label yang kelihatan seperti tanpa henti HTML :

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

Malangnya, kelemahan pendekatan ini adalah kekurangan label visual. Walau bagaimanapun, ini mungkin baik-baik saja dengan beberapa markup (contohnya,

satu bentuk input tunggal dengan tajuk dan pemegang tempat ):

<span><span><span><form</span>></span>
</span>    <span><span><span><input</span> type<span>="text"</span>></span><!-- text input -->
</span>    <span><span><span><input</span> type<span>="text"</span> value<span>="Prefilled value"</span>></span>
</span><span><span><span></form</span>></span>
</span>

(Saya akan menerangkan apa ruang letak untuk seketika.)

Label pembungkus

membungkus input dalam label adalah pendekatan yang paling bersih. Juga, terima kasih kepada CSS: fokus-fokus, kita juga boleh membuat label gaya sementara input anak mereka menerima fokus, tetapi kita akan membincangkannya kemudian.

<span><span><span><label</span> for<span>="firstName"</span>></span>First name<span><span></label</span>></span>
</span><span><span><span><input</span> id<span>="firstName"</span>></span>
</span>

Placeholders vs Labels

Perbandingan ringkas:

Label menyatakan apa input yang diharapkan

• ruang letak menunjukkan contoh jangkaan tersebut
Placships tidak direka untuk menjadi alternatif kepada label, walaupun seperti yang kita lihat dalam contoh ARIA di atas, mereka dapat menambah beberapa konteks yang hilang jika tidak ada label visual.

Sebaik -baiknya, kita harus menggunakan kedua -duanya:

Lihat pen

<span><span><span><input</span> aria-label<span>="First name"</span>></span>
</span>

Borang 2 oleh SitePoint (@SitePoint)

pada codepen.

memilih jenis input

ruang letak hanya memohon kepada input berasaskan teks, tetapi sebenarnya terdapat pelbagai jenis input yang berbeza, termasuk:

Jenis input semantik berguna semasa pengesahan bentuk, terutamanya apabila bergantung kepada pengesahan asli, yang akan kita lihat sebentar lagi. Pertama, mari kita pelajari cara gaya input ini.

<span><span><span><h1</span>></span>Subscribe<span><span></h1</span>></span>
</span><span><span><span><form</span>></span>
</span>    <span><span><span><input</span> aria-label<span>="Email address"</span> placeholder<span>="bruce@wayneenterpris.es"</span>></span>
</span><span><span><span></form</span>></span>
</span>

Input Styling

boleh dikatakan aspek yang paling menyebalkan dari borang pengekodan adalah mengatasi gaya lalai penyemak imbas. Syukurlah, hari ini, penampilan: Tiada; Mempunyai sokongan penyemak imbas 96.06% mengikut Caniuse.com.

Setelah menetapkan semula gaya lalai pelayar web dengan kod CSS berikut, kami boleh menggayakan input tetapi kami mahu, dan ini termasuk kedua -dua jenis input radio dan kotak semak:

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

Walau bagaimanapun, beberapa input ini mungkin datang dengan kebiasaan yang sukar atau bahkan mustahil untuk diatasi (bergantung kepada pelayar web). Atas sebab ini, banyak pemaju cenderung untuk kembali ke jenis lalai = "teks" atribut = nilai jika mereka mendapati kebiasaan ini tidak diingini (contohnya, "karet" pada jenis input = "nombor").

Walau bagaimanapun, ada

adalah lapisan perak ...

Menentukan InputMode

Dengan sokongan penyemak imbas web 82.3% Menurut Caniuse.com, atribut InputMode baru menentukan susun atur papan kekunci yang akan diturunkan pada peranti pegang tangan tanpa mengira jenis input yang digunakan.

lebih baik daripada apa -apa, kan?

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

Mengesahkan Input Pengguna

Sekiranya anda memilih pengesahan asli-HTML ke atas penyelesaian JavaScript, ingat bahawa InputMode tidak mencapai apa-apa dalam hal ini. InputMode = "E -mel"

tidak akan mengesahkan alamat e -mel, sedangkan input Type = "E -mel" akan. Itulah perbezaannya. meletakkan ini, mari kita bincangkan apa yang mencetuskan pengesahan:

Membuat peraturan tersuai

<span><span><span><form</span>></span>
</span>    <span><span><span><input</span> type<span>="text"</span>></span><!-- text input -->
</span>    <span><span><span><input</span> type<span>="text"</span> value<span>="Prefilled value"</span>></span>
</span><span><span><span></form</span>></span>
</span>

Peraturan tersuai memerlukan pengetahuan tentang ekspresi biasa JavaScript, seperti yang digunakan oleh objek REGEXP (tetapi, tanpa membungkus slash atau petikan). Berikut adalah contoh yang menguatkuasakan aksara huruf kecil (a -z) dan minlength/maxlength dalam satu peraturan:

Maklumat lanjut di sini.

<span><span><span><label</span> for<span>="firstName"</span>></span>First name<span><span></label</span>></span>
</span><span><span><span><input</span> id<span>="firstName"</span>></span>
</span>

Nota: Pengesahan Front-end (asli-HTML atau sebaliknya) tidak boleh digunakan sebagai pengganti pengesahan sisi pelayan!

Styling Valid/Invalid States

hanya untuk kejelasan tambahan, ini adalah bagaimana kita akan menjadi kesahan gaya:

Houston, kami mempunyai masalah!

<span><span><span><input</span> aria-label<span>="First name"</span>></span>
</span>

input cuba mengesahkan nilai mereka (atau kekurangannya) dengan serta -merta, jadi kod berikut (yang hanya menunjukkan keadaan yang sah/tidak sah sementara input memegang nilai) mungkin lebih baik:

Ini menunjukkan gaya yang sah/tidak sah tetapi hanya apabila

letak

<span><span><span><h1</span>></span>Subscribe<span><span></h1</span>></span>
</span><span><span><span><form</span>></span>
</span>    <span><span><span><input</span> aria-label<span>="Email address"</span> placeholder<span>="bruce@wayneenterpris.es"</span>></span>
</span><span><span><span></form</span>></span>
</span>

tidak ditunjukkan (kerana pengguna menaip sesuatu).

Lihat pen Borang 3 oleh SitePoint (@SitePoint)

pada codepen.

perkara asas lain

Menghantar data borang

Menghantar data borang ke pelayan biasanya memerlukan input mempunyai atribut nama. Ini juga terpakai kepada input tersembunyi:

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

Menerima input jangka panjang

Pada dasarnya, adalah perkara yang sama seperti , kecuali fakta bahawa Textareas mempunyai sokongan multiline. Ya, pastinya lebih intuitif, tetapi alas adalah cara yang betul untuk menerima input jangka panjang dari pengguna. Plus, ia menerima kebanyakan (jika tidak semua) atribut yang input lakukan.

mengumpulkan input untuk kebolehcapaian yang lebih baik

Walaupun bentuk yang lebih pendek menawarkan pengalaman pengguna yang lebih baik, kadang -kadang lebih lama tidak dapat dielakkan. Dalam senario sedemikian, elemen

boleh digunakan untuk mengandungi input yang berkaitan, dengan kanak -kanak digunakan sebagai tajuk/tajuk untuk

:

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

perkara yang bagus untuk diketahui

Melumpuhkan input

Menambah atribut yang dilumpuhkan boleh menyebabkan input (atau mana -mana elemen yang fokus) tidak berfungsi, walaupun ini biasanya akan digunakan/tidak diterapkan melalui JavaScript. Begini cara ia berfungsi, walaupun:

<span><span><span><form</span>></span>
</span>    <span><span><span><input</span> type<span>="text"</span>></span><!-- text input -->
</span>    <span><span><span><input</span> type<span>="text"</span> value<span>="Prefilled value"</span>></span>
</span><span><span><span></form</span>></span>
</span>

dan CSS yang disertakan, jika diperlukan:

<span><span><span><label</span> for<span>="firstName"</span>></span>First name<span><span></label</span>></span>
</span><span><span><span><input</span> id<span>="firstName"</span>></span>
</span>

Walau bagaimanapun, jika semua yang anda mahu lakukan ialah menambah isyarat visual tambahan yang mengisyaratkan bahawa input pengguna tidak sah, kemungkinan besar anda ingin menggunakan

General Sibling Combinator (~). Kod berikut pada dasarnya bermaksud "butang hantar yang mengikuti mana -mana elemen dengan input tidak sah". Ini tidak mengubah sebarang fungsi, tetapi apabila kita memanfaatkan pengesahan bentuk HTML asli (yang mengendalikan melumpuhkan/membolehkan kemampuan hantar secara automatik), ini baik-baik saja:

<span><span><span><input</span> aria-label<span>="First name"</span>></span>
</span>

Melumpuhkan input, tetapi menghantar data pula

campuran dan , contoh berikut akan memastikan bahawa nilai tidak dapat diubah. Perbezaannya ialah, tidak seperti kurang upaya, nilai bacaan dihantar sebagai data borang; Dan tidak seperti Tersembunyi, Readonly dapat dilihat:

<span><span><span><h1</span>></span>Subscribe<span><span></h1</span>></span>
</span><span><span><span><form</span>></span>
</span>    <span><span><span><input</span> aria-label<span>="Email address"</span> placeholder<span>="bruce@wayneenterpris.es"</span>></span>
</span><span><span><span></form</span>></span>
</span>

Mengubah kenaikan

Input berasaskan angka mempunyai "butang putaran" untuk menyesuaikan nilai berangka, dan mereka juga menerima atribut langkah yang menentukan nilai tambahan alternatif bagi setiap pelarasan:

<span><span><span><label</span>></span>
</span>    First name<span><span><span><input</span>></span>
</span><span><span><span></label</span>></span>
</span>

bentuk gaya, label, dan medan pada fokus

kita boleh menggunakan fokus-fokus: untuk gaya

mana-mana ibu bapa input yang kini menerima fokus. Kemungkinan besar elemen ini akan menjadi input , , atau

kontena:

<span><span><span><label</span>></span>
</span>    First name<span><span><span><input</span> placeholder<span>="Bruce"</span>></span>
</span><span><span><span></label</span>></span>
</span>

menghantar pelbagai nilai dengan satu input

Pelbagai adalah sah untuk jenis input fail dan e -mel:

<span><span><span><input</span> type<span>="button"</span>></span>
</span><span><span><span><input</span> type<span>="checkbox"</span>></span>
</span><span><span><span><input</span> type<span>="color"</span>></span>
</span><span><span><span><input</span> type<span>="date"</span>></span>
</span><span><span><span><input</span> type<span>="datetime-local"</span>></span>
</span><span><span><span><input</span> type<span>="email"</span>></span>
</span><span><span><span><input</span> type<span>="file"</span>></span>
</span><span><span><span><input</span> type<span>="hidden"</span>></span> <!-- explained later -->
</span><span><span><span><input</span> type<span>="image"</span>></span>
</span><span><span><span><input</span> type<span>="month"</span>></span>
</span><span><span><span><input</span> type<span>="number"</span>></span>
</span><span><span><span><input</span> type<span>="password"</span>></span>
</span><span><span><span><input</span> type<span>="radio"</span>></span>
</span><span><span><span><input</span> type<span>="range"</span>></span>
</span><span><span><span><input</span> type<span>="reset"</span>></span>
</span><span><span><span><input</span> type<span>="search"</span>></span>
</span><span><span><span><input</span> type<span>="submit"</span>></span> <!-- submits a form -->
</span><span><span><span><input</span> type<span>="tel"</span>></span>
</span><span><span><span><input</span> type<span>="text"</span>></span> <!-- the default -->
</span><span><span><span><input</span> type<span>="time"</span>></span>
</span><span><span><span><input</span> type<span>="url"</span>></span>
</span><span><span><span><input</span> type<span>="week"</span>></span>
</span>

Menulis Kod Borang Shorthand

Jika borang hanya terdiri daripada , , atau , terdapat kaedah singkat untuk menandakan borang HTML. Berikut adalah contoh:

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

berbanding dengan ini:

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

adakah saya terlepas apa -apa?

HTML adalah lebih intuitif daripada itu, katakan, 10 tahun yang lalu. Ia sentiasa berkembang dan tidak syak lagi akan ada lebih banyak lagi untuk menambah subjek borang HTML/CSS dalam masa yang ditetapkan. Salah satu contoh yang muncul di fikiran adalah elemen datalist, yang pada masa ini boleh menjadi kereta (terutama di Firefox). Tetapi itu, adakah saya terlepas apa -apa?

Saya akan berakhir dengan menyatakan bahawa terdapat beberapa aspek bentuk HTML yang saya tidak membincangkan kerana penggunaannya tidak disyorkan, termasuk:

• autofocus (buruk untuk kebolehcapaian)
• autocomplete (tidak menggunakan autocomplete mestilah pilihan pengguna, bukan lalai)
• AccessKey (sokongan buruk dan kebolehcapaian)
• novalidate (ini tidak berguna tanpa JavaScript)

Soalan Lazim Mengenai Borang HTML

Apakah bentuk HTML?

Borang HTML adalah elemen penting yang digunakan untuk mengumpul dan mengumpulkan input pengguna pada laman web. Ia membolehkan pengguna memasukkan data, membuat pilihan, dan menyerahkan maklumat kepada pelayan untuk diproses.

Untuk membuat borang HTML asas, anda menggunakan elemen

dan memasukkan pelbagai elemen input seperti medan teks, kotak semak, butang radio, dan butang di dalamnya. Tag borang mempunyai atribut seperti tindakan dan kaedah yang menentukan di mana data harus dihantar dan bagaimana ia harus diproses.

Jenis Input Biasa Sertakan medan teks (), ceckboxes (), butang radio (), senarai dropdown (), dan butang ().

Bagaimana saya mengendalikan input pengguna dalam borang HTML?

Input pengguna dikendalikan menggunakan skrip sisi pelayan atau skrip sisi klien (seperti JavaScript). Atribut tindakan borang menentukan URL di mana data dihantar, dan atribut kaedah mentakrifkan kaedah HTTP (get atau pos) yang digunakan untuk penyerahan. bentuk?

Kaedah GET menambahkan data ke URL, dapat dilihat di bar alamat, dan sesuai untuk data yang kurang sensitif. Kaedah pos menghantar data dalam badan permintaan, menyimpannya tersembunyi dari pengguna, menjadikannya lebih selamat untuk maklumat sensitif.

Borang data boleh disahkan menggunakan atribut HTML seperti yang diperlukan atau dengan menggunakan JavaScript untuk pengesahan yang lebih kompleks. JavaScript membolehkan anda melakukan pengesahan masa nyata, memastikan data yang dimasukkan memenuhi kriteria tertentu sebelum penyerahan.

Ya, anda boleh gaya bentuk HTML menggunakan CSS. Anda boleh mengubah suai rupa elemen bentuk, menyesuaikan susun atur, dan memohon gaya untuk meningkatkan daya tarikan visual dan pengalaman pengguna secara keseluruhan.

Bolehkah saya memuat naik fail menggunakan borang HTML?

Ya, anda boleh mengaktifkan muat naik fail dengan elemen . Ini membolehkan pengguna memilih dan menghantar fail melalui borang. Atribut Enctype borang harus ditetapkan kepada "Multipart/Form-Data" untuk muat naik fail.

Atas ialah kandungan terperinci Panduan untuk bentuk HTML & CSS (tiada hacks!). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!