HTML checkboxes and radio buttons are good to use in form elements where you need to gather some data from the client. This article will be about the frontend markup that will create checkboxes and radio buttons on the screen. Check out php or express-js (quick http framework for node-js) if you would like to learn how to handle the data.
Checkboxes and radio buttons in HTML are most often found in forms – they are seen a lot when choosing between multiple choices and agreeing or disagreeing to a website’s Terms of Service or Privacy Statement.
In HTML, checkboxes are marked up as inputs that are of type
<!DOCTYPE html> <html> <body> <h1>Am I checked?</h1> <form action="/action_page.php"> <input type="checkbox" id="yes1" name="yes1" value="Yup!" checked aria-checked> <label for="yes1"> I am checked by default</label><br> <input type="checkbox" id="no1" name="no1" value="Nope!"> <label for="no1"> I am not checked by default.</label><br> <input type="checkbox" id="yes2" name="yes2" value="Click Me!"> <label for="yes2"> Click the Checkbox!</label><br><br> <input type="submit" value="Submit"> </form> </body> </html>
Checkboxes have several attributes associated with them.
typeattribute. The input type needs to be set to
- ID: remember with ID’s they have to be unique to your file.
- The name and value are useful to have assigned so that can deal with the data that is collected after the form is submitted.
checkedattribute, because it is not assigned to anything, is known as a boolean attribute. Having
checkedthere means that it is automatically set to true. The default is false, so you only have to set it if you would like for the checkbox to be checked.
Another type of input that can be used in addition to checkboxes are radio buttons. The term comes from the car industry, oddly enough. Car stereos used to have physical buttons where only one button could only be pushed at a time. If you were to push another selection, the previous button would be deselected.
The difference between using checkboxes and a set of radio buttons is that the radio buttons let you choose only one selection, just like the car stereo version. The rest of the buttons disable after you check your selection so more than one radio button can’t be selected. Checkboxes, on the other hand, can have multiple selections.
To change checkbox inputs to radio button inputs, you have to do two things: First, change the input type to
radio, and lastly, have the name value match on all the radio buttons. This is what disables the rest of the buttons when one is selected.
<!DOCTYPE html> <html> <body> <h1>Display Radio Buttons</h1> <form action="/action_page.php"> <p>Please select a cat:</p> <input type="radio" id="kitty1" name="cat" value="tabby"> <label for="kitty1"><img src="http://www.placekitten.com/100/100" alt="kitty1" /></label><br> <input type="radio" id="kitty2" name="cat" value="snow-cat"> <label for="kitty2"><img src="http://www.placekitten.com/110/101" alt="kitty2" /></label><br> <input type="radio" id="kitty3" name="cat" value="rally-cat"> <label for="kitty3"><img src="http://www.placekitten.com/150/135" alt="kitty3" /></label> <br> <p>Please select your age:</p> <input type="radio" id="age1" name="age" value="30"> <label for="age1">0 - 30</label><br> <input type="radio" id="age2" name="age" value="60"> <label for="age2">31 - 60</label><br> <input type="radio" id="age3" name="age" value="100"> <label for="age3">61 - 100</label><br><br> <input type="submit" value="Submit"> </form> </body> </html>
In the code editor, you’ll see that there is a label associated with each checkbox and each radio button. This not only labels your checkboxes and buttons so you know what they mean, but it assists in making sure the site is accessible as well. The one attribute that is super important is the
for attribute. This is how we know which checkbox or radio button the label belongs to. Put the ID of the label that you want to associate with that label and then the text for that label between the two tags.
When it comes to CSS and working with it, it was my perception that radio buttons and checkboxes were one of the more difficult concepts to wrap my mind around. I would recommend not only doing a few repetitions with this HTML form element, but also try to style it as well with the CSS that you do know. You’ll get this in no time!