How to Build Check Boxes for Your HTML5 and CSS3 Based Web Pages

Check boxes are a useful tool for HTML5 and CSS3 web page developers. Check boxes are used when you want the user to turn a particular choice on or off.

image0.jpg

Each check box represents a true or false value that can be selected or not selected, and the status of each check box is completely independent from the others. The user can check none of the options, all of them, or any combination.

This code shows that check boxes use your old friend the tag:

<!DOCTYPE html>
<html lang = "en-US">
 <head>
 <meta charset = "UTF-8">
 <title>checkBoxes.html</title>
 </head>
 <body>
 <form action = "">
  <fieldset>
  <legend>Please check off your life goals...</legend>
  <p>
   <input type = "checkbox"
     id = "chkPeace"
     value = "peace" />World peace
  </p>
  <p>
   <input type = "checkbox"
     id = "chkHarmony"
     value = "harmony" />Harmony and brotherhood
  </p>
  <p>
   <input type = "checkbox"
     id = "chkCash"
     value = "cash" />Cash
  </p>
  </fieldset>
 </form>
 </body>
</html>

You're using the same attributes of the tag, but they work a bit differently than the way they do in a plain old text box:

  • Theis. That's how the browser knows to make a check box, rather than a text field.

  • The checkbox still requires an ID. If you'll be writing programming code to work with this thing (and you will, eventually), you'll need an ID for reference.

  • The value is hidden from the user. The user doesn't see the actual value. That's for the programmer (like the object). Any text following the check box only appears to be the text associated with it.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.