Input dan Label HTML: Kisah Cinta-tutorial css-php.cn

Input dan Label HTML: Kisah Cinta

Kebanyakan input mempunyai sesuatu yang sama - mereka paling gembira dengan label sahabat! Dan kebahagiaan tidak berhenti di sana. Borang dengan input dan label yang betul adalah lebih mudah bagi orang untuk menggunakan dan membuat orang gembira juga.

Dalam jawatan ini, saya ingin memberi tumpuan kepada situasi di mana kekurangan label semantik dan gabungan input menjadikannya lebih sukar bagi semua orang untuk menyelesaikan bentuk. Sejak berjuta -juta mata pencaharian orang bergantung pada bentuk, mari kita masuk ke tip terbaik yang saya tahu untuk mewujudkan hubungan yang memuaskan dan harmoni antara input dan label.

Amaran Kandungan: Dalam jawatan ini adalah tema cinta dan hubungan.

Kisah cinta bermula di sini! Mari kita tutup asas untuk membuat label dan input gembira.

Cara memasangkan label dan input

Terdapat dua cara untuk memasangkan label dan input. Satu adalah dengan membungkus input dalam label (tersirat), dan yang lain adalah dengan menambahkan A untuk atribut ke label dan ID ke input (eksplisit).

Fikirkan label tersirat sebagai memeluk input, dan label eksplisit sebagai berdiri di sebelah input dan memegang tangannya.

 <label> 
  Nama:
  <input type="text" name="name">
</label>

Salin selepas log masuk

Label eksplisit untuk nilai atribut mesti sepadan dengan nilai ID inputnya. Sebagai contoh, jika mempunyai nilai nama, maka ID juga harus mempunyai nilai nama.

 <label for="name"> name: </label>
<input type="text" name="name">

Salin selepas log masuk

Malangnya, label tersirat tidak dikendalikan dengan betul oleh semua teknologi bantuan, walaupun untuk dan atribut ID digunakan. Oleh itu, ia adalah idea terbaik untuk menggunakan label eksplisit dan bukannya label tersirat.

 
<label> 
  Nama:
  <input type="text" name="name">
</label>


<label untuk="Label-Label-Name"> Nama: </label>
<input type="text" name="name">

Salin selepas log masuk

Setiap elemen input yang berasingan hanya boleh dipasangkan dengan satu label. Dan label hanya perlu dipasangkan dengan satu input. Ya, input dan label adalah monogami. ♥ ️

Nota: Terdapat satu pengecualian untuk peraturan ini: Apabila kami bekerja dengan sekumpulan input, katakan beberapa butang radio atau kotak semak. Dalam kes ini, elemen digunakan untuk mengumpulkan elemen input tertentu, seperti butang radio, dan berfungsi sebagai label yang boleh diakses untuk seluruh kumpulan.

Tidak semua input memerlukan label

Input dengan jenis = "Hantar" atau Type = "Button" tidak memerlukan label - Atribut nilai bertindak sebagai teks label yang boleh diakses sebaliknya. Input dengan jenis = "Tersembunyi" juga baik tanpa label. Tetapi semua input lain, termasuk dan <cection> elemen, paling gembira dengan teman label.</cection>

Apa yang berlaku dalam label

Kandungan yang masuk ke dalam label harus:

Terangkan input sahabatnya. Label ingin menunjukkan kepada semua orang bahawa ia tergolong dalam pasangan inputnya.
Dapat dilihat. Label boleh diklik atau ditoreh untuk memfokuskan inputnya. Ruang tambahan yang disediakan untuk berinteraksi dengan input adalah bermanfaat kerana ia meningkatkan sasaran paip atau klik. Kami akan masuk ke dalam perkara yang lebih sedikit sahaja.
Hanya mengandungi teks biasa. Jangan menambah elemen seperti tajuk atau pautan. Sekali lagi, kita akan pergi ke "mengapa" di belakang ini lebih jauh.

Satu perkara yang berguna yang boleh anda lakukan dengan kandungan dalam label ialah menambah petunjuk pemformatan. Sebagai contoh, label untuk akan seperti yang kita harapkan. Tetapi kemudian kita dapat memberikan petunjuk kepada pengguna bahawa tarikh itu perlu dimasukkan dalam format tertentu, katakan DD-MM-Yyyy, dalam bentuk A antara label dan input yang menentukan keperluan itu. Petunjuk ini bukan sahaja menentukan format tarikh, tetapi mempunyai nilai ID yang sepadan dengan atribut aria-depuksiby pada input.

 
<label for="date"> start date </label>

<span> (DD-MM-Yyyy): </span>
<input type="date" aria-describedby="date-format" min="2021-03-01" max="2031-01-01">

Salin selepas log masuk

Dengan cara ini, kami mendapat manfaat daripada label yang jelas yang menerangkan input apa itu, dan petunjuk bonus kepada pengguna bahawa input perlu dimasukkan dalam format tertentu.

Amalan terbaik untuk hubungan yang sihat

Petua berikut melampaui asas -asas untuk menerangkan bagaimana untuk memastikan label dan input adalah gembira seperti yang boleh.

Lakukan: tambahkan label di tempat yang betul

Terdapat kriteria kejayaan WCAG yang menyatakan susunan visual halaman harus mengikuti urutan di mana unsur -unsur muncul di DOM. Itu kerana:

Pengguna dengan penglihatan rendah yang menggunakan pembesar skrin dalam kombinasi dengan pembaca skrin mungkin keliru apabila pesanan bacaan muncul untuk melangkau di skrin. Pengguna papan kekunci mungkin menghadapi masalah meramalkan di mana fokus akan pergi seterusnya apabila pesanan sumber tidak sepadan dengan urutan visual.

Fikirkanlah. Jika kita mempunyai beberapa HTML standard di mana label datang sebelum input:

 <label untuk="Orange"> Orange </label>
<input type="checkbox" name="oren">

Salin selepas log masuk

Itu meletakkan label sebelum input dalam DOM. Tetapi sekarang katakan label dan bentuk kami berada di dalam bekas yang fleksibel dan kami menggunakan perintah CSS untuk membalikkan perkara di mana input secara visual datang sebelum label:

 label {order: 2; }
input {order: 1; }

Salin selepas log masuk

Pengguna pembaca skrin, yang menavigasi antara unsur -unsur, mungkin mengharapkan input mendapat tumpuan sebelum label kerana input datang secara visual. Tetapi apa yang sebenarnya berlaku ialah label menjadi tumpuan. Lihat di sini untuk perbezaan antara menavigasi dengan pembaca skrin dan papan kekunci.

Jadi, kita harus sedar tentang perkara itu. Ia adalah konvensional untuk meletakkan label di sebelah kanan input untuk kotak semak dan butang radio. Ini boleh dilakukan dengan meletakkan label selepas input dalam HTML, memastikan perlawanan DOM dan visual.

Salin selepas log masuk

DO: periksa input dengan pembaca skrin

Sama ada input ditulis dari awal atau dihasilkan dengan perpustakaan, adalah idea yang baik untuk memeriksa kerja anda menggunakan pembaca skrin. Ini adalah untuk memastikan bahawa:

Semua atribut yang relevan wujud - terutamanya nilai yang sepadan dengan atribut untuk dan ID.
Dom sepadan dengan urutan visual.
Teks label terdengar jelas. Sebagai contoh, "DD-MM-Yyyy" dibaca secara berbeza dengan setara huruf besarnya (DD-MM-Yyyy).

Sejak beberapa tahun kebelakangan ini, saya telah menggunakan perpustakaan JavaScript, seperti Downshift, untuk membina elemen bentuk kompleks seperti autocomplete atau comboboxes di atas yang asli HTML, seperti input atau pemilihan. Kebanyakan perpustakaan membuat unsur -unsur kompleks ini boleh diakses dengan menambahkan atribut ARIA dengan JavaScript.

Walau bagaimanapun, manfaat unsur -unsur HTML asli yang dipertingkatkan menggunakan JavaScript benar -benar hilang jika JavaScript dipecahkan atau dilumpuhkan, menjadikannya tidak dapat diakses. Oleh itu, semak ini dan berikan alternatif yang diberikan oleh pelayan, tanpa javascript sebagai sandaran yang selamat.

Semak ujian borang asas ini untuk menentukan bagaimana input dan label atau legenda sahabatnya harus ditulis dan diumumkan oleh pembaca skrin yang berbeza.

Adakah: Jadikan label kelihatan

Menyambungkan label dan input adalah penting, tetapi sama pentingnya adalah menjaga label kelihatan. Mengklik atau mengetuk label yang kelihatan memfokuskan rakan inputnya. Ini adalah tingkah laku HTML asli yang memberi manfaat kepada sejumlah besar orang.

Bayangkan label yang ingin dengan bangga menunjukkan hubungannya dengan inputnya:

Yang mengatakan, akan ada masa apabila reka bentuk memerlukan label tersembunyi. Oleh itu, jika label mesti disembunyikan, adalah penting untuk melakukannya dengan cara yang boleh diakses. Kesilapan yang biasa adalah menggunakan paparan: Tiada atau penglihatan: Tersembunyi untuk menyembunyikan label. CSS ini memaparkan sifat sepenuhnya menyembunyikan elemen - bukan sahaja secara visual tetapi juga dari pembaca skrin.

Pertimbangkan menggunakan kod berikut untuk menyembunyikan label secara visual:

 /* Untuk unsur-unsur yang tidak dapat difokuskan. Untuk elemen yang fokus secara asli */
/ * Gunakan .visually tersembunyi: tidak (: fokus): tidak (: aktif) */
.visually tersembunyi {
  lebar sempadan: 0! Penting;
  klip: rect (1px, 1px, 1px, 1px)! Penting;
  Ketinggian: 1px! Penting;
  Limpahan: Tersembunyi! Penting;
  Padding: 0! Penting;
  Kedudukan: Mutlak! Penting;
  White-Space: Nowrap! Penting;
  lebar: 1px! Penting;
}

Salin selepas log masuk

Kitty Giraudel menerangkan secara mendalam bagaimana untuk menyembunyikan kandungan secara bertanggungjawab.

Apa yang harus dielakkan

Untuk memelihara dan mengekalkan hubungan yang sihat antara input dan label, ada beberapa perkara yang tidak perlu dilakukan ketika memasangkannya. Mari kita masuk ke dalam apa dan bagaimana untuk mencegahnya.

Jangan: Jangkakan input anda sama dalam setiap penyemak imbas

Terdapat beberapa jenis input yang tidak disokong dalam beberapa pelayar desktop yang lebih tua. Sebagai contoh, input yang Type = "Tarikh" tidak disokong dalam Internet Explorer (IE) 11, atau bahkan di Safari 14 ¹ (dikeluarkan September 2020). Input seperti ini jatuh ke jenis = "teks". Jika input tarikh tidak mempunyai label yang jelas, dan ia secara automatik jatuh ke input teks dalam pelayar yang lebih tua, orang mungkin keliru.

Jangan: Gantikan label dengan pemegang tempat

Inilah sebab mengapa atribut tempat letak pada input tidak boleh digunakan sebagai pengganti label:

Tidak semua pembaca skrin mengumumkan ruang letak.
Nilai pemegang tempat berada dalam bahaya dipotong pada peranti yang lebih kecil, atau apabila halaman diterjemahkan dalam penyemak imbas. Sebaliknya, kandungan teks label boleh dengan mudah membungkus ke barisan baru.
Hanya kerana pemaju dapat melihat teks pemegang tempat kelabu pucat di skrin retina besar mereka, di dalam bilik yang terang, dalam persekitaran bebas gangguan, tidak bermakna semua orang boleh. Seorang pemegang tempat boleh membuat mereka yang mempunyai penglihatan yang baik menatap mata mereka dan akhirnya berputus asa dalam bentuk.

Sebaik sahaja watak dimasukkan ke dalam input, pemegang tempatnya menjadi tidak kelihatan - kedua -dua visual dan pembaca skrin. Sekiranya seseorang terpaksa menyemak semula maklumat yang telah mereka masukkan dalam bentuk, mereka perlu memadamkan apa yang dimasukkan hanya untuk melihat pemegang tempat lagi.
Atribut tempat pemegang tidak disokong dalam IE 9 dan ke bawah, dan hilang apabila input difokuskan pada IE 11. Satu lagi perkara yang perlu diperhatikan: Warna pemegang tempat tidak dapat disesuaikan dengan CSS dalam IE 11.

Pemegang letak adalah seperti kawan yang muncul apabila semuanya sempurna, tetapi hilang apabila anda memerlukannya. Sepasang input dengan label yang bagus dan kontras tinggi. Label tidak flaky dan setia kepada input 100% masa.

Kumpulan Nielsen Norman mempunyai artikel yang mendalam yang menjelaskan mengapa ruang letak dalam bidang bentuk berbahaya.

Jangan: Gantikan label dengan atribut atau elemen lain

Apabila tiada label hadir, beberapa pembaca skrin akan mencari teks bersebelahan dan mengumumkannya. Ini adalah pendekatan hit-and-miss kerana mungkin pembaca skrin tidak akan menemui sebarang teks untuk diumumkan.

Sampel kod di bawah datang dari laman web sebenar. Label telah digantikan dengan elemen yang tidak disambungkan secara semantik ke input.

 <dana>
  <span> nombor kad </span>
  <dana>
    <input type="text" value="" name="cardNumber" maxlength="40">
  
</dana></dana>

Salin selepas log masuk

Kod di atas harus ditulis semula untuk memastikan kebolehcapaian dengan menggantikan rentang dengan label dengan untuk = "CardNumber" di atasnya. Ini adalah penyelesaian yang paling mudah dan mantap yang memberi manfaat kepada kebanyakan orang.

Walaupun label boleh digantikan dengan rentang yang mempunyai ID dengan nilai yang sepadan dengan atribut Aria-Labelledby input, orang tidak akan dapat mengklik rentang untuk memfokuskan input dengan cara yang sama label membenarkan. Ia adalah yang terbaik untuk memanfaatkan kuasa unsur-unsur HTML asli dan bukannya mencipta semula mereka. Kisah cinta antara input asli dan elemen label tidak perlu ditulis semula! Ia hebat seperti.

Jangan: Masukkan elemen interaktif di dalam label

Hanya teks biasa yang perlu dimasukkan ke dalam label. Elakkan memasukkan perkara seperti tajuk, atau elemen interaktif seperti pautan. Tidak semua pembaca skrin akan mengumumkan label dengan betul jika ia mengandungi sesuatu selain teks biasa. Juga, jika seseorang mahu memfokuskan input dengan mengklik labelnya, tetapi label itu mengandungi pautan, mereka boleh mengklik pautan secara tidak sengaja.

Salin selepas log masuk

Contoh kehidupan sebenar

Saya selalu mendapati bahawa contoh kehidupan sebenar membantu saya memahami sesuatu dengan betul. Saya mencari web dan mendapati contoh label dan input dari perpustakaan komponen dan laman web yang popular. Di bawah ini, saya menerangkan di mana unsur -unsur jatuh pendek dan bagaimana ia dapat diperbaiki untuk memastikan pasangan yang lebih baik.

Perpustakaan Komponen: Bahan

MATTERUI adalah perpustakaan komponen React berdasarkan sistem reka bentuk Google. Ia termasuk komponen input teks dengan corak label terapung yang telah menjadi popular untuk banyak pereka dan pemaju:

Mengklik pada input terasa lancar dan kelihatan hebat. Tetapi itulah masalahnya. Kualitinya kebanyakannya kulit dalam.

Pada masa menulis jawatan ini, beberapa isu yang saya dapati dengan komponen ini termasuk:

Tidak ada pilihan untuk mempunyai label di luar input untuk menawarkan kawasan interaktif yang meningkat untuk memfokuskan input.
Terdapat pilihan untuk menambah petunjuk seperti yang kita lihat sebelumnya. Malangnya, petunjuk hanya dikaitkan dengan input melalui jarak dan bukan melalui ID yang sepadan dan Aria-DepribedBy. Ini bermakna tidak semua pembaca skrin akan dapat mengaitkan mesej pembantu dengan input.
Label itu berada di belakang input dalam DOM, menjadikan pesanan visual tidak betul.
Input kosong kelihatan seperti ia sudah diisi, sekurang -kurangnya selagi ia tidak aktif.
Label slaid apabila input diklik, menjadikannya tidak sesuai untuk mereka yang lebih suka gerakan yang dikurangkan.

Adam Silver juga menjelaskan mengapa label terapung bermasalah dan mendapat kritikan terperinci mengenai reka bentuk input teks bahan.

Laman web: HuffPost

Laman web HuffPost mempunyai artikel yang mengandungi borang langganan surat berita:

Pada masa menulis postingan blog ini, input e -mel yang digunakan oleh HuffPost dapat mendapat manfaat daripada beberapa penambahbaikan:

Kekurangan label bermakna klik yang lebih kecil atau ketik sasaran. Daripada label terdapat atribut ARIA-label pada input.
Saiz fon pemegang tempat dan nilai input adalah 11px kecil, yang boleh sukar dibaca.
Seluruh input hilang tanpa JavaScript, yang bermaksud orang tidak mempunyai cara untuk mendaftar ke surat berita jika JavaScript dilumpuhkan atau pecah.

Pernyataan penutupan

Sebilangan orang yang mengejutkan berjuang untuk memasukkan maklumat ke dalam input yang tidak dibina dengan baik. Senarai itu termasuk orang yang mempunyai kecacatan kognitif, motor dan fizikal, gangguan spektrum autisme, kecederaan otak, dan penglihatan yang lemah. Orang lain yang berjuang termasuk mereka yang tergesa -gesa, pada sambungan yang buruk, pada peranti kecil, pada peranti lama, dan tidak dikenali dengan bentuk digital, antara yang lain.

Di samping itu, terdapat banyak sebab mengapa JavaScript mungkin memecahkan atau dimatikan dalam penyemak imbas, yang bermaksud input menjadi tidak berfungsi atau tidak boleh diakses sepenuhnya. Terdapat juga orang yang mampu melihat laman web tetapi yang boleh memilih untuk menggunakan papan kekunci bersama dengan pembaca skrin.

Mesej yang saya ingin dapatkan ialah label gembira dan pasangan input adalah penting . Tidak kira jika borang anda cantik jika tidak dapat digunakan. Saya boleh bertaruh bahawa hampir semua orang lebih suka mengisi bentuk yang hodoh tetapi mudah digunakan daripada yang cantik yang menyebabkan masalah.

Terima kasih

Saya ingin mengucapkan terima kasih kepada orang -orang berikut kerana membantu saya dengan jawatan ini: Eric Eggert, Adam Silver, Dion Dajka, dan Kitty Giraudel. Pengetahuan kebolehcapaian gabungan mereka adalah kekuatan yang harus diperhitungkan!

Nota kaki

¹ DatePicker sebenarnya disokong dengan baik dalam iOS 14 dan sangat bagus. Seseorang akan membayangkan bahawa versi macOS telah berada di kaki langit. ⮑

Atas ialah kandungan terperinci Input dan Label HTML: Kisah Cinta. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!