I am trying to find code for a likert scale in HTML. I have three questions. 1. I want it so say Not Guilty on the left and Very Guilty 2. I want it to say A lot of Damage on the left and No Damage on the Right 3. I want it to say Not Certain on the left and Very Certain on the Right.
Does anyone know how to code this?
Would radio buttons do the job?
<style type="text/css">
#likert { text-align:center; }
#likert td { width: 70px; }
</style>
<table id="likert">
<tr>
<td><input id="radGuiltyStart" type="radio" name="Guilty" value="1" /></td>
<td><input type="radio" name="Guilty" value="2" /></td>
<td><input type="radio" name="Guilty" value="3" /></td>
<td><input type="radio" name="Guilty" value="4" /></td>
<td><input id="radGuiltyEnd" type="radio" name="Guilty" value="5" /></td>
</tr>
<tr>
<td>Not Guilty</td>
<td></td>
<td></td>
<td></td>
<td>Very Guilty</td>
</tr>
</table>
Building on JJ's answer, it's better if you include labels and put it all on one line.
<table id="likert">
<tr>
<td><label>Not Guilty<input id="radGuiltyStart" type="radio" name="Guilty" value="1" /></label></td>
<td><label><input type="radio" name="Guilty" value="2" /></label></td>
<td><label><input type="radio" name="Guilty" value="3" /></label></td>
<td><label><input type="radio" name="Guilty" value="4" /></label></td>
<td><label><input id="radGuiltyEnd" type="radio" name="Guilty" value="5" />Very Guilty</label></td>
</tr>
...
A more "modern" way to get there (without using a table):
<head>
<style type="text/css">
.likert ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
.likert li
{
float: left;
text-align: left;
list-style-type: none;
}
</style>
</head>
<body>
<div>
<ul class="likert">
<li class="likert"> Not Guilty <input id="radGuiltyStart" type="radio" name="Guilty" value="1" />
<li class="likert"><input type="radio" name="Guilty" value="2" />
<li class="likert"><input type="radio" name="Guilty" value="3" />
<li class="likert"><input type="radio" name="Guilty" value="4" />
<li class="likert"><input id="radGuiltyEnd" type="radio" name="Guilty" value="5" /> Very Guilty
</ul>
</div>
</body>
NB. I used the following DOCTYPE tag (you do always include a DOCTYPE, right?) ;)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">