A likert scale in HTML
I am trying to开发者_Go百科 find code for a likert scale in HTML. I have three questions:
I want it to say - Not Guilty on the left and Very Guilty
I want it to say - A lot of Damage on the left and No Damage on the Right
I want it to say - Not Certain on the left and Very Certain on the Right.
Does anyone know how to code this?
Here's a simplified version of Bill's answer. You don't need to class each individual li if you put it on the whole ul. I'd definitely agree that this is not the appropriate or semantic use of the table element. This is a list of answers.
.likert li {
float: left;
list-style-type: none;
}<ul class="likert">
<li> Not Guilty </li>
<li><input type="radio" name="guilty" value="1" /></li>
<li><input type="radio" name="guilty" value="2" /></li>
<li><input type="radio" name="guilty" value="3" /></li>
<li><input type="radio" name="guilty" value="4" /></li>
<li><input type="radio" name="guilty" value="5" /></li>
<li> Very Guilty </li>
</ul>Demo in Fiddle
Screenshot:
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">
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>
...
加载中,请稍侯......
精彩评论