Шкала Ликерта в HTML - PullRequest
Новая
       0

Шкала Ликерта в HTML

4 голосов
/ 02 сентября 2010

Я пытаюсь найти код для шкалы Ликерта в HTML.У меня есть три вопроса:

  1. Я хочу, чтобы это было сказано - невиновен слева и Очень виноват
  2. Я хочу сказать - много повреждений слева и нет поврежденийсправа

  3. Я хочу сказать - не определенно слева и очень определенно справа.

    Кто-нибудь знает, как это кодировать?

Ответы [ 4 ]

4 голосов
/ 02 сентября 2010

Более «современный» способ добраться туда (без использования таблицы): 

<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. Я использовал следующий тег DOCTYPE (вы do всегда включаете DOCTYPE, верно?);) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 голосов
/ 26 июня 2014

Вот упрощенная версия ответа Билла. Вам не нужно классифицировать каждого человека 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

0 голосов
/ 02 сентября 2010

Опираясь на ответ JJ, будет лучше, если вы добавите метки и поместите их все в одну строку. 

<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 голосов
/ 02 сентября 2010

Будут ли работать радио-кнопки? 

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