HTML - Radio Forms

Radio form elements resemble the "Scan-Tron" sheets you may have used when you were in school to take a test. They basically allow the user to "bubble" in their choice and limit each question to only one selection per radio group.

Place a radio element on to your web page by setting the type attribute of the <input> tag to "radio".

<form name="myWebForm" action="mailto:youremail@email.com" method="post">
<h4>Please select your favorite food category.</h4>
<input type="radio" name="food" /> : Italian<br />
<input type="radio" name="food" /> : Greek<br />
<input type="radio" name="food" /> : Chinese<br />
</form>

HTML Radio Fields:

By naming each field similarly with a type of cuisine, we have created a relation, or a "grouping," of radio elements. This is how we link each element together and assure that the user is able to select only one answer.

Let's now take a look at how we can group together different sets of radio elements and simulate capturing two pieces of user data: gender and favorite food.

<form name="myWebForm" action="mailto:youremail@email.com" method="post">
<h4>Please select your favorite food category.</h4>
<input type="radio" name="food" /> : Italian<br />
<input type="radio" name="food" /> : Greek<br />
<input type="radio" name="food" /> : Chinese<br />
<h4>Please select your gender.</h4>
<input type="radio" name="gender" /> : Male<br />
<input type="radio" name="gender" /> : Female<br />
Lt44/form>

HTML Multiple Radio Fields:

Words/values applied to the value attribute is the value or 'answer' passed to any server-side script language we may have in place to record the results.

HTML - Radio: The Checked Attribute

By using the checked attribute, we adjust the form to load with a value already checked as the default setting.

<form name="myWebForm" action="mailto:youremail@email.com" method="post">
<h4>Please select your favorite food category.</h4>
<input type="radio" name="food" checked="yes" /> : Italian<br />
<input type="radio" name="food" /> : Greek<br />
<input type="radio" name="food" /> : Chinese<br />
</form>

Default Italian:

Using either/or logic, radios provide a very efficient way to capture very specific data from visitors. Remember to use radio elements only when you'd like the viewer to select only a single value, just as you might expect to see when taking a multiple-choice test in school.

• Go Back
• Continue

Found Something Wrong in this Lesson?

Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!