Bisakah bidang input memiliki dua label?

134

Mary memiliki bentuk kecil, dan ladangnya berlabel begitu.
Setiap kali kesalahan merayap masuk, kebingungan akan menabur.

Saya punya label untuk setiap bidang input ... urusan standar yang cukup. Setelah memvalidasi formulir, saya menampilkan paragraf kecil yang bermanfaat di bagian atas formulir yang merinci informasi apa yang hilang atau salah.

Bisakah saya memiliki dua label untuk bidang input yang sama? Satu dalam bentuk yang benar, dan satu dalam teks pengingat validasi? Apakah ada alasan saya tidak boleh melakukan ini?

html forms labels

— aslum
sumber

Sudahkah Anda mencoba apa yang terjadi? Jika berhasil, saya tidak percaya itu akan menyebabkan kerusakan pada formulir Anda atau halaman. Dan Anda akan mendapatkan nilai tambah karena penggunaannya akan dapat mengklik kesalahan validasi dan mendapatkan fokus pada bidang yang benar.

— Felipe Cypriano

Saya tidak mencobanya, tapi saya rasa itu mungkin. Tetapi saya tidak merekomendasikan menggunakannya, karena label mendefinisikan untuk apa bidang ini, pesan kesalahan tidak. Jadi saya tidak harus menggunakan label untuk memvalidasi peringatan.

— Guido Hendriks

Apakah ini pertanyaan umum tentang desain / kegunaan UI?

— jball

Ya. Ini "berfungsi" ... tetapi adakah alasan mengapa ini desain yang buruk? Saya menduga itu mungkin karena alasan aksesibilitas, tetapi untuk pengguna normal, saya pikir dapat mengklik pesan kesalahan dan dibawa ke bidang yang kacau akan membuat segalanya lebih mudah ... Saya hanya tidak tahu apakah itu akan mengacaukan "pembaca tunanetra" atau sejenisnya.

— aslum

Dalam beberapa kasus, lebih mudah untuk menempatkan kontrol dan teks Anda di dalamnya label. Anda bahkan dapat menghilangkan atribut fordan id. The spesifikasi menyebut asosiasi implisit ini.

— rybo111

Jawaban:

158

Saya menganggap pertanyaan ini tentang formulir HTML. Dari spesifikasi :

Elemen LABEL dapat digunakan untuk melampirkan informasi ke kontrol. Setiap elemen LABEL dikaitkan dengan tepat satu kontrol bentuk.

Dengan demikian, setiap kontrol bentuk dapat direferensikan oleh beberapa label, tetapi setiap label hanya bisa merujuk satu kontrol. Jadi, jika masuk akal untuk memiliki label kedua untuk kontrol (dan dalam situasi yang Anda jelaskan), jangan ragu untuk menambahkan label kedua.

— James Sumners
sumber

Ini lebih merupakan pertanyaan kegunaan / aksesibilitas daripada HTML. Html berfungsi.

— aslum

Kita semua harus hanya menggunakan kode yang valid, jika tidak hal-hal akan rusak di masa depan atau untuk orang lain atau dengan beberapa perpustakaan JS atau apa pun.

— SHernandez

Jawaban yang benar adalah Rob. Solusi ini berfungsi untuk pengguna yang terlihat dan gagal di beberapa pembaca layar. Aslum, tebak Anda menerima jawaban jummers di atas sebelum Rob mengirimkan jawabannya.

— rattler kandang

@ AvramLavinsky tidak, ini adalah jawaban yang benar untuk "dapatkah suatu bidang memiliki dua label?" Speknya cukup jelas. Bagaimana klien memilih untuk menafsirkan itu terserah mereka. Tautan Anda ke "aria-dideskripsikan", yang menghubungkan ke "aria-berlabel", adalah cara untuk "memperbaiki" pembaca layar yang rusak.

— James Sumners

Funny MDN mengatakan "Satu input dapat dikaitkan dengan banyak label." developer.mozilla.org/en-US/docs/Web/HTML/Element/label

— 2540625

HTML itu legal, dan berfungsi (mengklik salah satu label akan mengalihkan fokus ke bidang yang dimaksud).

Agak sulit untuk dilakukan dengan benar karena alasan aksesibilitas.

Ini bukan pendekatan "umum", dan karena itu setidaknya satu pembaca layar umum (saya diuji dengan NVDA) hanya membaca label pertama ketika Anda mengalihkan fokus ke bidang - itu mengabaikan label tambahan untuk bidang yang sama.

Jadi, jika pesan kesalahan Anda ada di bagian atas halaman, pengguna yang tunanetra atau rabun yang menabrak bidang hanya akan mendengar pesan kesalahan saat mendarat di bidang yang dipermasalahkan, bukan label "asli" di sebelahnya.

Oleh karena itu - jika Anda mengucapkan pesan kesalahan dengan benar, itu mungkin hal yang baik (tentu lebih baik daripada hanya menyorot bidang yang tidak valid dengan warna merah!).

— Rob Whelan
sumber

Ini benar, dan cara yang benar untuk mengkodekan ini adalah melalui atribut yang dijelaskan oleh aria

— cage rattler

Ya, Anda dapat memiliki beberapa titik label pada kontrol formulir yang sama. Ini sangat legal :

<label for="fname">First name</label>
<label for="fname">Enter your info</label>
<label for="fname">Why not a third label</label>
<input type="text" id="fname" name="fname">

Ini hanyalah contoh ... biasanya Anda akan membungkus garis-garis ini dengan satu label karena mereka sudah dekat.

— Gert Grenander
sumber

+1 untuk tautan ke dokumen yang menyatakan dengan jelas bahwa "Lebih dari satu LABELdapat dikaitkan dengan kontrol yang sama dengan membuat beberapa referensi melalui foratribut."

— alexg