Formuláře. neomezený počet formulářových polí v rámci HTML dokumentu může být více formulářů, nelze je ale do sebe vnořovat

Transkript

1 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 HTML method metoda, kterou klient předává data serveru get (data v URL), post (data v hlavičce HTTP) autocomplete našeptávání (on/off) <form action="obsluha.php" method="post">... </form> neomezený počet formulářových polí v rámci HTML dokumentu může být více formulářů, nelze je ale do sebe vnořovat

2 Vstupní pole formulářů nepárová značka <input /> (kromě textarea a select) ve vstupních polích lze v HTML5 použít minimalizaci 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 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ů, výchozí 20) 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 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č - nejvýše jedna možnost může být vybrána stejná hodnota atributu name, rozdílné hodnoty atributu value

5 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 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 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" style="resize:none;width:50px"> 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 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>

9 Formuláře v HTML5 problematická podpora v prohlížečích (IE<10) nové hodnoty atributu type elementu input search tel - neověřuje, pro mobilní zařízení url, - ověřuje date, time, month, datetime, week number range - rozsah hodnot pomocí posuvníku color - výběr barvy z dialogu nové formulářové prvky <progress> <meter> - podíl hodnoty na celku <input type="url" name="url" id="url" required />

10 nové atributy pro <form> Formuláře v HTML5 autocomplete - nabídka vyplnění dříve zadaných dat novalidate - nevaliduje formulářové prvky, boolean nové atributy pro <input> autocomplete autofocus form="formular1" min, max placeholder pattern reguired - pouze pro jeden prvek formuláře - pokud je prvek mimo formulář - omezení hodnot v number, range, date - obdoba value - pro nastavení validace PSČ: <input type="text" name="psc" pattern="[1-9][0-9]{2}[ ]?[0-9]{2}" title="pět číslic">

11 CSS3 pseudotřídy pro formuláře input:enabled, input:disabled input:checked input:valid, input:invalid viz. pattern input:in-range zvolená hodnota v rozsahu (viz. range) input:out-of-range zvolená hodnota mimo rozsah (viz. range input:required hodnota je vyžadována input:optional hodnota není vyžadována input:read-only prvek pouze pro čtení input:read-write prvek pro čtení i zápis ::selection vybraný text (bez elementu) -moz-::selection input:focus :before, :after {content: * } vložení před/za element, nefunguje na elementy, které nemají content (input)

12 Video a audio v HTML5 dříve řešeno pomocí pluginů (flashplayer apod.) <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> podpora mp4, ogg, webm <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> podpora mp3, ogg, wav