Návrh a tvorba WWW stránek 1/8. Formuláře

Transkript

1 Návrh a tvorba WWW stránek 1/8 Formuláře význam předávání hodnot od uživatele skriptům mezi značkami <form> a </form> základní atributy action definuje obslužný skript, nelze v XHTML method metoda, kterou klient předává data serveru get (data v URL), post (data v hlavičce HTTP) <form action="obsluha.php" method="post">... </form> neomezený počet formulářových polí v rámci XHTML dokumentu může být více formulářů, nelze je ale do sebe vnořovat

2 Návrh a tvorba WWW stránek 2/8 Vstupní pole formulářů nepárová značka <input /> (kromě textarea a select) ve vstupních polích je zakázána minimalizace atributů atribut type určuje typ vstupního pole atribut name jednoznačný identifikátor vstupního pole! Nesouvisí s atributem id! atribut value výchozí hodnota ovládacího prvku atribut disabled vstupní pole není editovatelné (zešednutí) data z tohoto pole nejsou předána skriptu atribut readonly podobné disabled, nelze editovat atribut accesskey rychlý přístup k položkám formuláře element label popisek aktivující formulářové pole <label for="jmeno" >Jméno:</label> <input type="text" value="vstup" name="jmeno" id="jmeno" />

3 Návrh a tvorba WWW stránek 3/8 Vstupní pole formulářů typy text a password <input type="text" name="jmeno" value="hodnota" /> nejpoužívanější typ, umožňuje zadávat řetězec znaků atribut value implicitní hodnota vepsaná do vstupního pole atribut size délka vstupního pole (počet znaků) atribut maxlength maximální počet znaků, které lze do pole zadat atribut readonly hodnotu vstupního pole nelze změnit typ password místo každého znaku se zobrazí znak * nelze použít schránku pro kopírování - bezpečnost

4 Návrh a tvorba WWW stránek 4/8 Vstupní pole formulářů typy checkbox a radio <input type="checkbox" name="jmeno" value="ano" checked="checked" /> zaškrtávací pole atribut checked implicitní nastavení zatržení atribut value definuje hodnotu vkládanou do odesílaných dat <input type="radio" name="jmeno" value="ano" checked="checked" />a <input type="radio" name="jmeno" value="ne" />b přepínač - právě jedna možnost může být zaškrtnutá stejná hodnota atributu name, rozdílné hodnoty atributu value lze použít atribut checked maximálně u jedné položky

5 Návrh a tvorba WWW stránek 5/8 Zpracování formulářů typy submit a reset tlačítka pro obsluhu formuláře reset nastavení implicitních hodnot vstupních polí submit předání dat obslužnému skriptu (v action) atribut value nápis na tlačítku atribut size šířka tlačítka tlačítek typu submit může být ve formuláři více, např. při ANO/NE pokud není uveden atribut value, doplní se standardní hodnota <input type="submit" value="odeslat" /> <input type="reset" value="vymazat" /> u tlačítka reset (submit) je vhodné zajistit obsluhu v případě, kdy je tlačítko stisknuto omylem <form onreset="return confirm('vymazat hodnoty?')"...

6 Návrh a tvorba WWW stránek 6/8 Ostatní typy hidden, button, image, file hidden skryté pole s předem nastavenou hodnotou slouží k předávání hodnot proměnných v php button obecné tlačítko, neslouží pro odeslání formuláře význam ve spojení s vlastností onclick existuje i samotná značka <button> <input type="button" value="klik" onclick="alert('!!')" /> image grafické odesílací tlačítko <input type="image" src="obr.gif" alt="odeslat" /> file upload souboru na server, musí být metoda post zakázán atribut value bezpečnost <form action="obsluha.php" method="post" ENCTYPE="multipart/form-data"><- jedna se o soubor --> <input type="file" name="soubor" /></form>

7 Návrh a tvorba WWW stránek 7/8 Ostatní typy textarea a select párové značky textarea textové pole atributy name, cols (počet znaků na šířku), rows (počet znaků na výšku), disabled, readonly, wrap (zalamovánířádků) <textarea rows="5" cols="30" name="text"> Výchozí text. </textarea> select výběr z nabídky atributy name, multiple, size, disabled <select name="povolani[]" size="2" multiple="multiple"> <option value="st">student</option> <option value="pr" selected="selected">pracující</option> <option value="du">důchodce</option> </select> sdružování položek <optgroup label=" ">

8 Návrh a tvorba WWW stránek 8/8 Kombinované tlačítko button uživatelem definované tlačítko <button type="button" name="tlacitko"> <img src="obr.gif" alt="obrázek" align="left" /> <p>popisný text</p> </button> typ tlačítka může být button, submit, reset Sdružování formulářových polí části formuláře jsou vizuálně odděleny párová značka <fieldset> pojmenování skupiny formulářových polí - <legend> <fieldset> <legend>osobní</legend> <input /><input /> </fieldset>