input

Návrh a tvorba WWW stránek
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
Návrh a tvorba WWW stránek
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" />
Návrh a tvorba WWW stránek
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
Návrh a tvorba WWW stránek
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
Návrh a tvorba WWW stránek
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?')" ...
Návrh a tvorba WWW stránek
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>
Návrh a tvorba WWW stránek
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="…">
Návrh a tvorba WWW stránek
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>
Návrh a tvorba WWW stránek
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, email - 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 />
Návrh a tvorba WWW stránek
Formuláře v HTML5
nové atributy pro <form>
autocomplete
novalidate
- nabídka vyplnění dříve zadaných dat
- 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">
Návrh a tvorba WWW stránek
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)
Návrh a tvorba WWW stránek
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