Asosiasi label HTML dengan input; UX yang buruk?

1. Apakah boleh memasukkan input di dalam label?
2. Bagaimana Anda mengaitkan label dengan input?
3. Mengapa label harus selalu dikaitkan dengan input?
4. Bagaimana Anda menyelaraskan input dan label di HTML?

Apakah boleh memasukkan input di dalam label?

Bersarang input di dalam label adalah cara alternatif untuk mengaitkannya (alih -alih menggunakan "id" dalam input dan "untuk" di label). Either way bekerja dengan baik.

Bagaimana Anda mengaitkan label dengan input?

Untuk secara eksplisit mengaitkan a <label> elemen dengan <memasukkan> elemen, pertama -tama Anda harus menambahkan atribut ID ke <memasukkan> elemen. Selanjutnya, Anda menambahkan atribut untuk <label> elemen, di mana nilai FOR sama dengan ID di <memasukkan> elemen.

Mengapa label harus selalu dikaitkan dengan input?

Bidang input tanpa label yang menyertainya dapat menyebabkan masalah aksesibilitas bagi mereka yang mengandalkan pembaca layar. Jika pembaca layar menemukan bidang input tanpa label, ia akan mencoba menemukan beberapa teks yang menyertainya untuk digunakan sebagai label.

Bagaimana Anda menyelaraskan input dan label di HTML?

Kami menentukan margin-bottom kami <Div> elemen. Kemudian, kami mengatur tampilan <label> elemen untuk "blok inline" dan memberikan lebar tetap. Setelah itu, atur properti teks-selaras ke "kanan", dan label akan disejajarkan dengan input di sisi kanan.