Name and For with Checkboxes

HTML & CSS
1

Sad as it may be, I am learning how to use HTML Checkboxes for the first time today. :blush:

I want to use good coding practices.

When I use Textboxes, I follow this coding style…

    <label for="firstName"><b>*</b>First Name:</label>
    <input id="firstName" name="firstName" type="text" maxlength="30"

…which has a FOR and NAME to connect Label and Textbox.

Can I do the same thing with Checkboxes?

2

You could! It would be easier to just wrap your checkboxes in a label, that way you don’t need ID’s. Something like:

<label><input type="checkbox"> Item 1</label>
<label><input type="checkbox"> Item 2</label>
<label><input type="checkbox"> Item 3</label>
<label><input type="checkbox"> Item 4</label>
3

Yes each checkbox should have a label.

FYI you can optimize that HTML and remove that <b>*</b>

label[for="firstName"]::before
{
  content:'*';
  font-weight:bold;
}
4

Thank you Ryan, I was about to say something about it :wink:

5

Okay, I was going to ask about wrapping in another thread, but you killed two birds with one stone!

I can still have an id=‘’ in the checkbox input, right?

And I most certainly will need a name=‘’ still, right?

6

The id can still be present yes.

The name sure you’ll need that especially since I gather you will be parsing it with PHP.

7

Here is what I have so far as a test…

        <label><input id="interest_01" name="interest[]" type="checkbox" value="Football"> Football</label><br/>
        <label><input id="interest_02" name="interest[]" type="checkbox" value="Basketball"> Basketball</label><br/>
        <label><input id="interest_03" name="interest[]" type="checkbox" value="Baseball"> Baseball</label><br/>

(RIght now the goal is to learn the mechanics of Checkboxes - I will worry about CSS later after I have the HTML and PHP working!)

8

WHy not set the labels to display:block; and remove the need for <br /> :slight_smile: .

I know you said you wouldn’t worry about it but something basic like that can be done in these stages.

9

I’ll focus on the CSS if you are volunteering to do the PHP… :wink:

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.