Radio Button HTML Forms

Is current?: 
Yes

The radiobutton template radiobutton.htm is a type of HTML form.  

Lines 31-35 display instructions. In this template, a question is followed by a series of options.  Each option is placed next to a so-called radio button that can be selected by clicking on it.  Unlike the dropdown, this format cannot accommodate a large number of response options compactly, and it is unusual to use this format with more than 10 options. 

A single radio button item is shown below, enclosed within a table.

<table>

  <tr>

    <td>My feelings towards Charlottesville are:<br/>    

      <span class="radiotext">

       &nbsp;&nbsp;<input type="radio" value="7" name="rbitem1" />Extremely warm.<br/>

       &nbsp;&nbsp;<input type="radio" value="6" name="rbitem1" />Moderately warm.<br/>

       &nbsp;&nbsp;<input type="radio" value="5" name="rbitem1" />Slightly warm.<br/>

       &nbsp;&nbsp;<input type="radio" value="4" name="rbitem1" />Neither warm nor cold.<br/>

       &nbsp;&nbsp;<input type="radio" value="3" name="rbitem1" />Slightly cold.<br/>

       &nbsp;&nbsp;<input type="radio" value="2" name="rbitem1" />Moderately cold.<br/>

       &nbsp;&nbsp;<input type="radio" value="1" name="rbitem1" />Extremely cold.

     </span>
    </td>
  </tr>

</table> <br />

This table has one row with one data cell column. The question is followed by the <br/> tag so that the options appear below. The span tag encloses all the options, one per line. The <br/> tag creates a line break so that each option is on a separate line. In the input tag, type="radio" specifies that these are radio buttons. Each of the 7 options has the same name: rbitem1. This is important because it ensures that only 1 of the 7 options can be selected. The values 7 to 1 determine the values stored in the database based on the selection. Each line has two leading blank spaces, &nbsp;&nbsp; , that provide separation from the radio button. The appearance of the radio button and the styling of the options text follows the radiotext style definition on line 9. Note the use of the line-height property to control line spacing.

What if the participant fails to select an option? Radio buttons that are not selected are not saved when the form is submitted; that is, this implies that the rbitem1 variable will not be saved.  However, we’d like to give this variable a default value of missing, just as we did in the dropdowns.  The default value assignment happens in lines 23-26 using a div section that is hidden (not displayed).  Within this section, each radio button on the page is given a default value of period (missing value) as below. The directive checked ensures that the missing value option is selected for each item by default. This ensures that data storage for radio buttons is identical to that of dropdowns.

<div style="display:none">

  <input type="radio" name="rbitem1" value="." checked />

  <input type="radio" name="rbitem2" value="." checked />

</div>