Anketa formulářem

Anketa na webu je ze své podstaty typický formulář. Přesto mnoho lidí používá k její tvorbě odkazy. To s sebou však nese riziko, že vyhledávácí roboti budou následovat hlasovací odkazy a tím znehodnocovat výsledky hlasování.

Důvod, proč lidé nepoužívají raději formuláře může být ten, že anketa tvořená odkazy vypadá lépe a hlasovat v ní je snadnější - přesně o jeden klik. Na této stránce se pokusím nastínit, jak:

  1. udělat anketu formulářem
  2. udělat anketu, která se po výběru možnosti sama odešle
  3. udělat anketu, která vypadá jako by byla tvořena odkazy

Všechny ankety jsou tvořeny formulářem odesílaným metodou POST, takže ani ten nejdrzejší robot by si neměl dovolit v anketě hlasovat. Každý formulář bude:

1. Prostý formulář

Máte se dobře?

Zde myslím není co vysvětlovat. Text možností je obalen elementem label. Labelům je nastaven atribut for, který vždy odpovídá atributu id elementu input, pro který je určen.

HTML: 

   1:<form action="anketa-formularem.php" method="post">
   2:     <fieldset>
   3:          <legend>Máte se dobře?</legend>
   4:          <p>
   5:               <label for="option1.1">Ano</label>
   6:               <input type="radio" name="poll1" id="option1.1" value="1"  />
   7:          </p>
   8:          <p>
   9:               <label for="option1.2">Ne</label>
  10:               <input type="radio" name="poll1" id="option1.2" value="2"  />
  11:          </p>
  12:          <p>
  13:               <label for="option1.3">Nevím</label>
  14:               <input type="radio" name="poll1" id="option1.3" value="3"  />
  15:          </p>
  16:          <p>
  17:               <input type="submit" value="Hlasovat" />
  18:          </p>
  19:     </fieldset>
  20:</form>

2. Odeslání po zvolení možnosti

Máte se dobře?

Tato anketa je tvořena téměř stejným kódem. Jediné, co přibylo, je element noscript, který obaluje odesílací tlačítko. Díky tomu bude odesílací tlačítko skryto před uživately, kteří mají k dispozici JavaScript.

HTML:

   1:<form action="anketa-formularem.php" method="post" id="poll2">
   2:     <fieldset>
   3:          <legend>Máte se dobře?</legend>
   4:          <p>
   5:               <label for="option2.1">Ano</label>
   6:               <input type="radio" name="poll2" id="option2.1" value="1"  />
   7:          </p>
   8:          <p>
   9:               <label for="option2.2">Ne</label>
  10:               <input type="radio" name="poll2" id="option2.2" value="2"  />
  11:          </p>
  12:          <p>
  13:               <label for="option2.3">Nevím</label>
  14:               <input type="radio" name="poll2" id="option2.3" value="3"  />
  15:          </p>
  16:          <noscript>
  17:               <p>
  18:                    <input type="submit" value="Hlasovat" />
  19:               </p>
  20:          </noscript>
  21:     </fieldset>
  22:</form>

JavaScript:

   1:function voteByClick(id) {
   2:     var i, form, options;
   3:     // najdeme formular
   4:     form = document.getElementById(id);
   5:     // najdeme radia pro odpovedi
   6:     options = document.getElementsByName(id);
   7:     // budeme pokracovat jedine, pokud jsme
   8:     // nasli formular
   9:     if (form) {
  10:          // projdeme vsechny moznosti
  11:          for (i = 0; i < options.length; i++) {
  12:               // kazde navesime na onclick funkci,
  13:               options[i].onclick = function () {
  14:                    // ktera nejprve zkontroluje, jestli ma
  15:                    // form prirazenou nejakou funkci na onsubmit,
  16:                    // pokud ano, tak ji nejprve zavolame
  17:                    // a pokud vrati false, tak neudelame nic
  18:                    if (form.onsubmit instanceof Function && false === form.onsubmit()) {
  19:                         return;
  20:                    }
  21:                    // jinak odesleme formular
  22:                    form.submit();
  23:               }
  24:          }
  25:     }
  26:}

3. Simulace ankety tvořené odkazy

Máte se dobře?

HTML kód vypadá naprosto stejně, jako u předchozí ankety (kromě id a name). JavaScript je také podobný, rozdíl je pouze ten, že funkce přiřadí formuláři třídu voteByLabelClick, přes kterou jsou v CSS nastavené vlastnosti, které upraví vzhled formuláře.

JavaScript:

   1:function voteByLabelClick(id) {
   2:     var labels, form;
   3:     // najdeme formular
   4:     form = document.getElementById(id);
   5:     // budeme pokracovat jedine, pokud jsme
   6:     // nasli formular
   7:     if (form) {
   8:          // formulari priradime tridu "voteByLabel",
   9:          // pres kterou je v CSS definovano skryti
  10:          // radiobuttonu a obarveni labelu tak, aby
  11:          // vypadaly jako odkazy
  12:          form.className += ' voteByLabelClick';
  13:          // najdeme labely
  14:          labels = form.getElementsByTagName('label');
  15:          for (i = 0; i < labels.length; i++) {
  16:               // kazdemu opet priradime na onclick
  17:               // funkci, ktera odesle formular
  18:               labels[i].onclick = function () {
  19:                    if (form.onsubmit instanceof Function && false === form.onsubmit()) {
  20:                         return false;
  21:                    }
  22:                    // nastaveni radiu pro tuto volbu checked na true
  23:                    document.getElementById(this.htmlFor).checked = true;
  24:                    form.submit();
  25:               }
  26:          }
  27:     }
  28:}

CSS:

   1:form.voteByLabelClick label {
   2:     color: blue;
   3:     text-decoration: underline;
   4:     cursor: pointer;
   5:     cursor: hand;
   6:     float: none
   7:}
   8:form.voteByLabelClick input {
   9:     display: none;
  10:}

Pár poznámek na konec

JavaScript pro inicializaci formulářů na této stránce vypadá takto: 

   1:<script type="text/javascript">
   2:     voteByClick('poll2');
   3:     voteByLabelClick('poll3');
   4:</script>

a tento kód je umístěn před koncovou značkou pro body.

Plánujete vyrazit na dovolenou? Potom by se Vám mohl hodit anglicko-český slovník nebo překladač vět.