CSS анкета

• 30.01.2005

Ето какви са характеристики на една стандартна анкета:

• Въпрос
• Радиобутони за маркиране на един от възможните отговори
• Бутон за гласуване
• Връзка към резултати от гласуването

пример

И етап 2, след гласуването:

• Отново същия въпрос
• Процентно отношение на отговорите
• Графика, показваща това отношение
• Данни за броя на гласовете

пример

Построяване на логична структура

Трябва да измислим логична структура, без да се влияем от това как ще изглежда нашата анкета.

<dl>
   <dt>
      Въпрос
   </dt>

   <dd>
      <input name="radiobutton" id="q1" type="radio" »
      value="q1" />
      <label for="q1">
         Отговор 1
      </label>
   </dd><dd>
      <input name="radiobutton" id="q2" type="radio" »
      value="q2" />
      <label for="q2">
         Отговор 2
      </label>
   </dd><dd>
      <input name="radiobutton" id="q3" type="radio" »
      value="q3" />
      <label for="q3">
         Отговор 3
      </label>
   </dd>

</dl>

<div id="submit">
   <input type="submit" value="Гласувай" />
   <a href="anketa_resultati.html">Резултати</a>

</div>

По този начин, осигурихме връзка на въпроса с отговорите, посредством списъка DL > DT > DD >, а чрез етикетите label свързахме радоибутоните с въпросите.

По-интересната част е, да предвидим откъде е възможно да долетят нежелани проблеми и да нагодим елементите, така че да имаме пълен контрол над всеки един от тях. Можем да добавим и някои екстри, като tabindex, за по-лесно движение по въпросите. Ликвидираме опасността от пропадене на колони, като добавяме по един брейк преди всеки затварящ dd. Предпазваме радиобутоните от деформация, като ги обвиваме в span.

Така трябва да изглежда един напълно завършен ред от анкетата.

<dd>
   <span>
      <input name="radiobutton" id="q1" type="radio" »
      value="q1" tabindex="101" />
   </span><label for="q1">
      Отговор 1
   </label>

   <br class="clear" />

</dd>

А обвивката добива следния вид:

<div id="anketa">
   <h1>
      Анкета
   </h1>

   <form method="post" action="">
      <dl>
	     ...
      </dl>

      <div id="submit">
         <span>
            <input type="submit" value="Гласувай" />
         </span>
         <a href="anketa_resultati.html">Резултати</a>

         <br class="clear" />
      </div>
   </form>

</div>

След като сме готови с HTML-a, можем да се заемем с позиционирането на елементите. Разделил съм това на четири стъпки.

1. Нулиране на стойностите

Вече е практика, още в самото начало да се премахват всички стойности по подразбиране.

* {
   margin: 0;
   padding: 0;
   list-style: none;
   border-style: none;
}

input {
   vertical-align: middle;
}

2. Глобално описание

Направил съм анкетата да е независима от размери, както би изглеждала, ако е направена с таблица, понеже най-често срещаното решение е, да се интегрира като модул в някоя от колоните на страницата, където е желателно тя да се нагажда спрямо ширината на самата колона. За заглавие съм използвал тага h1, който е добре да бъде променен в зависимост от нивото на вложеност.

#anketa {
   font-size: .7em;
   background: #8AC3FF;
}

#anketa h1 {
   padding: 4px 8px;
   font-size: .9em;
   text-transform: uppercase;
   color: #fff;
   background: #0982D6;
   border-bottom: solid #78B4FF 1px;
}

#anketa form {
   padding: 6px;
   border-top: solid #56AAEB 2px;
}

#anketa dt {
   padding: 2px 6px 12px 22px;
   line-height: 1.1em;
   background: url(i/anketa-dt.gif) no-repeat 0 -1px;
}

#anketa dd {
   height: 1%;
   padding: 6px;
   background: #AFD8FF url(i/anketa-dd.gif) repeat-x »
   left bottom;
   border-bottom: solid 1px #8BC6FF;
}

Eлементът dd е с височина 1% и също, както <br class="clear" /> предотвратява чупенето на колоните, но за IE. Всички отстанали параметри могат да бъдат променяни, според дизайна на анкетата.

3. Гласуване

Тази стъпка създава връзката между радиобутоните и въпросите. Препоръчвам параметрите да не се променят. Те са относителни и зависят от глабалното описание на анкетата. Разбира се, според дизайна, могат да се добавят цвят и размер на шрифта.

#anketa dd span,
#anketa label {
   float: left;
   display: block;
}

#anketa dd span {
   width: 13%;
}

#anketa label {
   width: 87%;
   font-size: .9em;
   line-height: 1.2em;
}

#submit {
   padding: 6px 0 0 0;
   height: 1%;
}

Важна част е, да се направи приличен бутон за гласуване. Обвиваме input полето с span, отново за да го предпазим от деформации и да направим нещо като 3D ефект. Ето как се получава.

#submit span {
   float: right;
   background: #C6E0FF;
   border: solid 1px #0043AB;
}

#submit input {
   padding: 1px 2px;
   font: bold 11px Tahoma;
   color: #0B2763;
   background: #C6E0FF url(i/submit.gif) repeat-x »
   left bottom;
   border: solid 1px #D0E5FF;
   border-bottom: solid 1px #A4C1E8;
   border-left: solid 1px #A4C1E8;
}

До тук всико е фиксирано и резултата трябва да изглежда, както в този пример.

4. Резултати

В тази стъпка, показваме за всеки въпрос по колко процента е гласувано. Ще съпроводим резултатите с графика, което налага да променим малко структурата. Това е един пълен ред, който съдържа въпрос > резултат > графика.

<dd>   
   <strong>   
      30%   
   </strong><em>   
      Въпрос   
   </em><div>   
      <span style="width: 30%;">
         <!-- spacer -->
      </span>   
   </div>   

</dd><dd>   

Почти по същия начин, както по-горе нагаждаме двете колони за въпрос и резултат.

#anketa dd strong {
  float: right;
  width: 16%;
  font-weight: normal;
  font-size: .9em;
}

#anketa dd em {
  float: left;
  width: 76%;
  font-style: normal;
  font-size: .9em;
  line-height: 1em;
}

По-интересната част е, да направим графика, без реално да използваме картинка в кода.

#anketa dd div {
  clear: both;
  padding: 4px 0 8px 0;
}

#anketa dd div span {
  display: block;
  height: 5px;
  background: #30A1F0 url(i/skala.gif) no-repeat;
  border: solid 1px #465C70;
}

В примера, е добавен и ред с обща информация за анкетата.

Анкетата е тествана на FireFox 1.0, Internet Explorer 5+ и Opera 7.54/8beta.