A Smarter Way To Learn HTML & CSS(2015)
53
Forms: radio buttons
Now we’ll add radio buttons to the form. Radio buttons allow the user to make one and only one selection. We’ll ask the user to tell us how she found our site.
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>
Message:
<br>
<textarea name="message" rows="4" cols="30"></textarea>
<br><br>
<input type="submit" value="Send email message">
</form>
Notice that each radio button has its own separate input tag. What binds all the radio buttons in a group together is that they’re all given the same name. In the example, I’ve given it the name “found-thru.”
It begins as other input tags do, but specifies “radio” instead of “text,” “submit,” or another input type...
input type="radio"
The name, shared by all the radio buttons in a particular radio button group, binds all the buttons within the group together. You make up the name…
name="found-thru"
The value is the word or words sent to the processing program telling the program which button has been checked.
value="Google"
The next part is optional. When you include it in a tag, it means the button is checked by default. Since only one button in a group can be checked, you would include this in only one button tag within a group. If you omit it, no button is checked by default.
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.
In your HTML file add two radio buttons to the form you’ve already coded. Save the file. Display the page.
Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-53-1.html.
Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/53.html