10 Stellar Web Resources for HTML5 and CSS3
How to Register a Domain Name for Your HTML5 and CSS3 Site
How to Use IrfanView’s Built-In Effects for HTML5 and CSS3 Programming

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.


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">
 <meta charset = "UTF-8">
 <form action = "">
  <legend>Please check off your life goals...</legend>
   <input type = "checkbox"
     id = "chkPeace"
     value = "peace" />World peace
   <input type = "checkbox"
     id = "chkHarmony"
     value = "harmony" />Harmony and brotherhood
   <input type = "checkbox"
     id = "chkCash"
     value = "cash" />Cash

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
How to Build a Custom Theme for Your HTML5 and CSS3 Site with a WebsiteBaker Prebuilt Temple
Master HTML5 Video Markup
How to Organize HTML5 Text
Useful JavaScript Libraries
Format Text in an HTML5 Document

Inside Dummies.com