Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Checkbox: how to display text?

Tags:

I want to display the related text of the checkbox along with it.

<input id="Checkbox1" type="checkbox" value="Admin"><span>Admin User</span>

This is the most used markup to do that. But it doesn't feel good to use a separate span for the check box. And it doesn't even look good in a form.

Is there a way to relate these two with each other? Or what is the best way to do this?

like image 697
Geethanga Avatar asked Jan 16 '13 12:01

Geethanga


People also ask

How do I display a checkbox?

The <input type="checkbox"> defines a checkbox. The checkbox is shown as a square box that is ticked (checked) when activated. Checkboxes are used to let a user select one or more options of a limited number of choices. Tip: Always add the <label> tag for best accessibility practices!

How do I make a checkbox accessible on my keyboard?

Since a checkbox is an interactive control, it must be focusable and keyboard accessible. If the role is applied to a non-focusable element, use the tabindex attribute to change this. The expected keyboard shortcut for activating a checkbox is the Space key.


1 Answers

use a Label and the for attribute.

The for attribute specifies which form element a label is bound to

<input id="Checkbox1" name="Checkbox1" type="checkbox" value="Admin" />
<label for="Checkbox1">AdminUser</label>

Also give your input a name

like image 112
Liam Avatar answered Sep 28 '22 10:09

Liam