Using Check boxes in Forms
Check boxes allow your user to make single or multiple selections from a list.
The HTML code:
Label <input type="checkbox" name="" value="">
or
<input type="checkbox" name="" value=""> Label
Attributes
- name
- Usually refers to the name of the variable where the value entered on the form is to be stored.
- value
- Refers to the information or data entered or selected on the form.
- checked
- Displays a check mark in the desired input box. (See Code Example)
Example:
Red <input type="checkbox" name="color" value="red">
Green <input type="checkbox" name="color" value="green">
Blue <input type="checkbox" name="color" value="blue">
When using check boxes the name attribute must be the same for each check box.
In the example above, multiple check boxes would each share the name color.
In the example above multiple check boxes would include a different color in each value attribute.
The Label preceding or following the check box would match the value.
Now let's build a simple form:
Note: Try this form. Execution is via PHP. (Script below)
The HTML5 Code:
<!DOCTYPE html>
<html>
<head>
<title>Text Checkbox</title>
<meta charset="utf-8">
</head>
<body>
<form method="post" action="parse-checkbox.php">
<p><b>Check Your Favorite Pass Times:</b><br/>
<input type="checkbox" name="passtime[]" value="Watching TV">Watching TV<br/>
<input type="checkbox" name="passtime[]" value="Hiking">Hiking<br/>
<input type="checkbox" name="passtime[]" value="Surfing the Net">Surfing the net.<br/>
<input type="checkbox" name="passtime[]" value="Building Web Pages" checked>Building Web Pages.<br/>
<input type="checkbox" name="passtime[]" value="Reading a Book">Reading a book.<br/>
<input type="checkbox" name="passtime[]" value="Playing Games">Playing Games.</p>
<p><input type="submit" value="Submit"></p>
</form>
</body>
</html>
Advanced Students: Copy the code and save it in your Apache/htdocs folder ast test-checkbox.html
Execute Form With PHP
PHP scripts don't have to be in a special folder. They can be placed in the same directory or folder with your form.
Here's the simple PHP script that processes the checkbox form above.
<!DOCTYPE html>
<html>
<head>
<title>Parse Checkbox</title>
<meta charset="utf-8">
<style type="text/css">
body {
font-family: arial, tahoma,serif
}
div {
display: block;
width: 30%;
margin: 0 auto
}
</style>
</head>
<body>
<?
$passtime=$_POST['passtime'];
print "<div>";
print "<h1>Your Choices</h1>";
print "<p>";
foreach ($passtime as $value){
print "$value<br>";
}
print "</p></div>";
?>
</body>
</html>
Note: We did add some basic style settings just for reference.
Advanced Students: Copy the code and save it in your Apache/htdocs folder as parse-checkbox.php
Free Tools We Recommend
- Free Ebook How to Code in HTML5 and CSS3
- "How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
- Free Logo Generator Turbologo.com
- If you are building a website for business you need to begin thinking about creating a brand identity. An unforgettable logo could be just the start you need. You can create it free at Turbologo.com. They also provide generators for business cards and letterheads.
- FREE HTML Editor (Windows): NoteTab Light
- All the features of a commercial HTML editor.
- FREE Apache Server (Windows): IndigoAmpp
- Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
- Linux Users
- If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the BlueFish HTML editor. You'll find it in your software repository. It does have some QUIRKS, but it's FREE.
- For image resizing we've found the easiest Linux tool to be Krita.
Have you tried our Free Mobile Ready website template kit? Download Template #402 - 6 Page Kit