CODEWITHSUNDEEP
htmlcss
Geethanga
Geethanga

Reputation: 1846

Checkbox: how to display text?

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?

Upvotes: 21

Views: 68752

Answers (3)

Liam
Liam

Reputation: 29654

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

Upvotes: 43

Roman
Roman

Reputation: 2175

Instead of using for attribute you can use the nested <input type="checkbox">:

<label><input name="Checkbox1" type="checkbox">Admin User</label>

Upvotes: 28

Veger
Veger

Reputation: 37906

Instead of using <span> you can use the <label>-tag:

<label for="Checkbox1">Admin User</label>

It will 'attach' the label to your checkbox in a sense that when the label is clicked, it is as if the user clicked the checkbox.

For the styling, you need to apply your own styles to make them look 'together' yourself.

Upvotes: 4

Related Questions