<input>
Značka pro vložení celé řady prvků do formuláře, které např. umožní komunikaci návštěvníka se správcem webu.
Ukázka jednoduchého formuláře
<form method="get">
<input type="text" name="jmeno">
<input type="submit" value="Odeslat">
</form>
Atributy značky <input>
type
Atribut type určuje druh inputu, což je nesmírně důležité, jelikož jich je opravdu hodně. Rozebereme si jednotlivé typy inputů:
type="text"
Patří mezi nejčastější a nejběžněji užívaný typ. Zobrazuje se jako řádek, do kterého je možné vkládat libovolný text i číslovky.
type="password"
Jak už název napovídá, slouží k heslům. Rozdíl oproti type="text" je v tom, že znaky do něj vložené se zobrazují jako tečky.
type="email"
Je ve své podstatě totéž, co type="text". Rozdíl poznáte až v okamžiku, kdy přidáte atribut required, díky kterému internetový prohlížeč zkontroluje, zda obsah pole připomíná e-mailovou adresu. Pozor na to, že kontrola není stoprocentní. Prohlížeče v drtivé většině případů jen zkontrolují, zda se v poli nachází znak zavináče @ obklopený jinými znaky. Pozor, nefunguje na Safari.
type="number"
Pole, které návštěvníkovi dovolí vložit jen čísla celá (bez desetinných míst). Standardně mu dovolí, jak čísla kladná, tak i záporná. Rozsah povolených čísel je možné omezit. atributy např. min="0" a např. max="100". Pokud potřebujete, můžete i nastavit krokování. Pokud např. může být číslo jen násobek desítky můžete nastavit step="10".
type="checkbox"
Zobrazí zaškrtávací políčka na volbu (graficky většinou čtvercová). U checkbox můžete volit libovolný počet možností, pokud jich je použito více. Každý <input type="checkbox"> musí mít atribut name s originálním názvem.
type="radio"
Zobrazí zaškrtávací políčka na volbu (graficky většinou kruhová). Na rozdíl od checkbox však návštěvník stránek může zvolit jen jednu z možností. Ty <input type="radio">, u kterých chcete mít možnost zvolit jen jednu variantu musíte atributu name dát stejný název.
type="date"
Se používá pro vložení datumu. Datum může být zapsán v celé řadě formátů, avšak tento typ inputu dokáže datum zapsat takovým způsobem, aby jej systémy dokázali vždy správně identifikovat a zpracovat.
type="time"
Tak, jako date ukládá datum, tak type="time" zase uloží čas ve správném strojově zpracovatelném formátu.
type="datetime-local"
Jedno pole pro datum i čas současně. Má jednu nevýhodu. Nefunguje na prohlížeči Firefox, který je poměrně hodně rozšířen (v době psaní článku je druhý nejrozšířenější).
type="range"
Umožňuje nastavit rozsah mezi dvěma předdefinovanými hodnotami.
type="search"
Slouží např. pro vyhledávání prostřednictvím Google. Jinak vypadá naprosto stejně, jako type="text".
type="file"
Je určen pro vkládání souborů. U souborů je vhodné určovat, jaké typy souborů jsou povolené. Povolené soubory se mohou určit pomocí atributu accept.
type="submit"
Slouží jako tlačítko k odeslání formuláře kliknutím myši za účelem zpracování obsahu formuláře.
name
Patří k druhému nejdůležitějšímu atributu, pokud má být formulář odeslán k nějakému zpracování. Uvádí se do něj text, který může osahovat písmena i číslice a slouží jako název pole za účelem dalšího použití na straně zpracování formuláře.
required="required"
Dává internetovému prohlížeči pokyn, aby před odesláním formuláře zkontroloval, zda je pole správně vyplněné. Záleží na tom, o jaký druh pole se jedná. Jiné je to u type="email", type="number", atd. Funguje pouze u HTML5, což dnes již nebývá problém.
Vysvětlení dalších značek ve formuláři
Kam dál
Naše služby Kurz základy HTML a CSS Kurz tvorby webových stránek pomocí systému Joomla