All geek questions in one place

HTML liquor scale

I am trying to find code for the likert scale in HTML. I have three questions:

  • I want him to say - not to blame on the left and very to blame
  • I want to say - a lot of damage to the left and no damage to the right.

  • I want him to say - not defined on the left and very definitely on the right.

    Does anyone know how to code this?

+3
source share
4 answers

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 always include DOCTYPE, right?);)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+4
source

. li, ul. , . .

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

:
 screenshot

+2

Will the radio buttons work?

 <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>
0
source

Based on JJ's answer, it's better if you include shortcuts 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>
...
0
source

Source: https://habr.com/ru/post/1762761/

More articles:


All Articles