Tutoriál: Tvorba používateľských webových formulárov - základný formulár

Popisovanie údajov pomocou nových vstupných polí:

Formulár patrí neodmysliteľne k webovým stránkam. Je to element, pomocou ktorého môže používateľ zadávať rôzne údaje, ktoré sa následne odošlú k ďalšiemu spracovaniu.

Ľudovo povedané, formulár je jediná súčasť webovej stránky, do ktorej je možné písať :-).

HTML5 ponúka viacej nových vstupných polí, ktoré slúžia k lepšiemu zozbieranou a roztriedeniu údajov zadaných používateľmi z webovej stránky. Slúžia na to textové polia, prepínače, zaškrtávacie políčka, e-mailové polia, kalendáre, možnosti na výber farby, rôzne počítadla a jazdce.


Vytvorenie základného formulára:

Vytvoríme základný formulár HTML typu post. Použijeme jednoduché, bežné textové polia.
Jednotlivé časti formulára ako sú textové polia, popisky a tlačidla sme "zaobalili" do zoznamu.
Ďalej je v elemente "label" použitý atribút for. Je to ekvivalent identifikátora id, ktorý je použitý napr. v elemente " fieldset ". Zoznam sme použili aj preto, aby sme mali jednotlivé elementy formulára pekne pod sebou, a nemuseli za každým elementom zalamovať riadok pomocou značky " br ", či používať blokové elementy.


Tvorba jazdca:

Pomocou jazdca dávame možnosť používateľovi znížiť alebo zvýšiť číselnú hodnotu nejakého parametra. Jazdca implementujeme pomocou typu "range".

Obsluha čísel pomocou počítadla:

Zadávanie číselnej hodnoty prostredníctvom formulára nie je žiadna veda. Počítadlo ovládací prvok formulára, pomocou ktorého zvyšujeme alebo znižujeme číselnú hodnotu v poli.
Vzhľadom na skutočnosť, že ide o textové pole typu number, je možné zadávať číselné hodnoty aj klasickým spôsobom pomocou klávesnice. Musíme ale zostať v rozmedzí 0 až 1000, čo sme si nastavili pomocou atribútov min a max.

 Ako na dátum?

Jednoducho. Aj na tento typ dát máme príslušný ovládací prvok. Je tu ale jeden problém, nie všetky prehliadače tento ovládací prvok akceptujú. Dátum sa zadáva pomocou zobrazujúceho sa kalendára, v ktorom je možné si vybrať deň, mesiac a rok. Ak sa kalendár nezobrazí (prehliadač ho nepodporuje), v takomto prípade sa dátum zadáva klasicky napísaním do textového poľa.

E-mail:

V HTML existuje typ vstupného poľa, v ktorom zadávame jednu alebo viac emailových adries. Najlepšie využitie to má pri mobilných zariadeniach. Ak smartfón alebo tablet narazia vo formulári na takýto typ poľa, môže dôjsť automaticky k zmene klávesnice tak, aby bolo možné pohodlne písať mailovú adresu, t.j. objaví sa zavináč @.

Adresa URL:

K dispozícii máme pole navrhnuté pre URL adresy. Toto pole má význam pri niektorých mobilných zariadeniach, kedy dôjde k prepnutiu klávesnice tak ,aby bolo možné pohodlne písať adresu URL.

Ak potrebujem vybrať farbu:

Pole na vloženie kódu farby vo formulári má typ color.

Kód základného formulára bez použitia kaskádových štýlov CSS3:

 <form method="post" action="send.php">
	<fieldset id="osobne-informacie">
    	<legend>Informácie o projekte</legend>
        <ol>
        	<li>
            	<label for="meno">Meno</label>
                <input name="meno" autofocus id="meno" type="text">
            </li>
            <li>
                <label for="priorita">Priorita</label>
                <input min="0" max="10" name="priorita" value="0" id="priorita" type="range">
            </li>
            <li>
                <label for="odpocet">Odpočet</label>
                <input name="odpocet" min="0" max="1000" id="odpocet" type="number">
            </li>
            <li>
                <label for="datum">Dátum</label>
                <input name="datum" id="datum" value="2015-04-01" type="date">
            </li>
            <li>
                <label for="email">E-mail</label>
                <input name="e-mail" id="e-mail" type="email">
            </li>
            <li>
                <label for="url">Adresa URL</label>
                <input name="url" id="e-mail" type="url">
            </li>
            <li>
                <label for="farba">Vyber farbu</label>
                <input name="farba" id="farba" type="color">
            </li>

        	<li>
                <input value="odoslať" type="submit">
            </li>                
        </ol>         
	</fieldset>
</form>

Problémy so zobrazovaním nových typov polí:
Niektoré prehliadače, hlavne staršie, majú problém akceptovať niektoré nové typy polí. Aj napriek tomu ich vykreslia ako klasické textové pole. Takže formulár je použiteľný, čo je dôležitý fakt.

Problémy pre jednotlivé polia môžeme odstrániť napojením formulára na knižnicu jQuery IU alebo widgety YUI. Tieto polia premenia na požadovanú funkciu. Časom, keď prídu nové verzie prehliadačov, ktoré už nebudú mať problém so zobrazením týchto polí, kódy jQuery môžeme potom odstrániť.

Napríklad s poľom pre výber farby má problém Internet Explorer. Pre tento prehliadač "to rozbeháme" pomocou nasledujúceho skriptu - zásuvného modulu
, ktorý napíšeme do hlavičky " head " www dokumentu:

<head>
<meta charset="utf-8">
<title>formulár</title>
 
    <script type="text/javascript" 
      charset="utf-8"
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
    </script>
        <script type="text/javascript" charset="utf-8" src="jquery.simpleColor.js"></script>

 <script type="text/javascript">

 $(function(){
 
     function podporujFarbu() {
       
           pole = document.createElement("input");
           pole.setAttribute("type","color");
          
           var podporujTypFarby = (pole.type !== "text");
          
           if(podporujTypFarby) {
                 var testovaciRetazec = "zk";
                 pole.value=testovaciRetazec;
                 podporujTypFarby = (pole.value != testovaciRetazec);
              
               }
              return(podporujTypFarby);       
        }
       
            if (!podporujFarbu()){
               $('input[type=color]').simpleColor();
             }
 });
 </script>
</head>

Súčasťou skriptu je aj použitie knižne jQuery a zásuvného modulu, ktoré pripojíme pomocou linku. Ide o modul jquery.simpleColor.js a knižnicu 1.4.2 jquery.min.js.
Možnosť výberu farby teraz funguje už aj v prehliadači Internet Explorer.
Formulár, ktorý sme vytvorili pomocou značiek HTML nie je upravený po grafickej stránke. Poslúžia na to kaskádové štýly CSS3, ktorým sa budeme venovať v ďalších častiach tohto tutoriálu.

Výsledok:



Rubriky: