Forms: checkboxes - A Smarter Way To Learn HTML & CSS (2015)

A Smarter Way To Learn HTML & CSS(2015)

54
Forms: checkboxes

Checkboxes work like radio buttons, except that the user can check more than one. Let’s add checkboxes that allow the user to give us some feedback.

This is the code.

<form action="send-email.php" method="post">
Last name:
<br>
<input type="text" name="surname" size="25"maxlength="40">
<br><br>
How did you find us?<br>
<input type="radio" name="found-thru" value="Google" checked="checked"> Google
<input type="radio" name="found-thru" value="Review"> Review
<input type="radio" name="found-thru" value="Friend"> Friend
<br><br>
How would you describe our site?<br>
<input type="checkbox" name="feedback" value="Wonderful" checked="checked"> Wonderful
<input type="checkbox" name="feedback" value="Fabulous"> Fabulous
<input type="checkbox" name="feedback" value="Brilliant"> Brilliant
<br><br>
Message:
<br>
<textarea name="message" rows="4" cols="30"></textarea>
<br><br>
<input type="submit" value="Send email message">
</form>

Again, as with radio buttons, each checkbox has its own separate input tag. And again, what binds all the checkboxes in a group together is that they’re all given the same name. In the example, the name is “feedback.”

You’re familiar with the beginning part by now.

input type="checkbox"

The name, shared by all the checkboxes in a particular checkbox group, binds all the checkboxes within the group together. You make up the name.

name="feedback"

The value is the word or words sent to the processing program telling the program that this box has been checked.

value="Wonderful"

The next part is optional. When you include it in a tag, it means the box is checked by default. You can use this specification to pre-check as many boxes as you like. If you omit it from all checkbox tags, no box is pre-checked.

checked="checked"

Finally, there’s the text that the user sees. It would normally be the same word or words that you specify for value.

Wonderful

In your HTML file add two checkboxes to the form you’ve already coded. Save the file. Display the page. Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-54-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/54.html