A likert scale in HTML_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-14 23:53 出处：网络

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

相关专题：css

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 likert scale in HTML

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>
...