Radio Grid HTML Forms

Is current?: 
Yes

The radio grid template radiogrid.htm is a type of HTML form.  

Lines 40-42 display instructions. In this file, a question stem is followed by a number of questions. Each question is displayed in a row, alongside the response options.  This is called a grid because there are multiple items and the responses are organized in columns.  Radio grids are quite popular ,as they enable placing a large number of related items in a single page in a compact way.  As users select their responses, they are able to compare their responses, which makes radio grids particularly appropriate when responses are relative.

This is the most complex, layout-wise, of all the html forms because there are 3 levels of nested tables, and you should spend some time browsing the template to understand how it works. The radio grid is contained within a table that begins in line 45 and extends till line 126.  The cellspacing for the grid table is set at 10 so that the items in distinct rows are not cramped for room.  The header table row contains the labels for the 5 response options, one per column (a 5 point, agree-disagree scale). This is followed by identically-structured item rows. Note that both the header row and the item rows have 6 columns.  The first column is blank in the header row, but it contains the item in the other rows.  We paste the code for the first two (of 9) items below.

<table class="grid" cellspacing="10">

 <tr>

   <td></td>

   <td>Strongly<br>Disagree</td>

   <td>Disagree</td>

   <td>Neither agree<br/>nor disagree</td>

   <td>&nbsp;&nbsp;&nbsp;Agree&nbsp;&nbsp;&nbsp;</td>

   <td>&nbsp;Strongly&nbsp;<br>Agree</td>

 </tr>

 <tr>

   <td class="griditem">When someone criticizes democrats, it feels like a personal insult.</td>

   <td><input type=radio  name="griditem1" value="1"></td>

   <td><input type=radio  name="griditem1" value="2"></td>

   <td><input type=radio  name="griditem1" value="3"></td>

   <td><input type=radio  name="griditem1" value="4"></td>

   <td><input type=radio  name="griditem1" value="5"></td>

 </tr>

 <tr>

   <td class="griditem">When someone praises democrats, it feels like a personal compliment.</td>

   <td><input type=radio  name="griditem2" value="1"></td>

   <td><input type=radio  name="griditem2" value="2"></td>

   <td><input type=radio  name="griditem2" value="3"></td>

   <td><input type=radio  name="griditem2" value="4"></td>

   <td><input type=radio  name="griditem2" value="5"></td>

 </tr>

</table>
                
Each item is a set of radio buttons, and they all have the same name. The values also have the same pattern as responses are on a common scale. This table has a total of 10 rows (9 questions): one row is the header row, and the remainder are item rows. Note the strategic use of <br/> in the neutral header label to ensure that all the columns have approximately the same width. Like the simple radio template, the hidden div from lines 24-34 initializes all the 9 radio buttons with the missing value of period. 

Files: