#1 Prvek <input>
Toto je navazující část na formuláře. Prvek <input> slouží jako vstup pro uživatele, který do něj zadává text, datum, barvy, zaškrtává políčka apod.
#2 Typy vstupů
Existuje mnoho typů vstupů, které může uživatel vkládat. V prvním sloupci se nachází slovo nebo slovní spojení, které patří do atributu type, například <input type="text">.
| Typ | Popis |
|---|---|
| button | Tlačíko |
| checkbox | Zaškrtávací políčko, lze jich označit vícero |
| color | Zvolení barvy na škále |
| date | Kalendář, na kterém lze vybrat přesné datum |
| Jednořádkový textový vstup, který musí obsahovat znak „@“ | |
| file | Možnost nahrát soubor z počítače |
| hidden | Skrytý vstup, není jej vidět |
| image | Pošle souřadnice, kde bylo na obrázek kliknuto |
| number | Jednořádkový, pouze číselný vstup |
| password | Jednořádkový textový vstup, jehož znaky není vidět (měněny na „•“) |
| radio | Zaškrtávací políčko, které lze označit pouze jedno ze skupiny |
| range | Výběr z rozsahu (často 0–100) |
| reset | Tlačítko, které resetuje (maže) formulář |
| search | Jednořádkový textový vstup |
| submit | Potvrzovací tlačítko, které odesílá potvrzení pro skripty nebo PHP |
| tel | Jednořádkový číselný vstup |
| text | Jednořádkový textový vstup |
| time | Výběr přesného času |
| url | Jednořádkový textový vstup, jenž musí obsahovat URL adresu |
#3 Atributy pro <input>
Atributy prvku <input> patří k jedním z nejrozsáhlejších. Zde naleznete jejich přehled.
Poslední sloupec „Odesílá se“ ukazuje, zda se hodnota daného atributu, nebo celý vstup s daným atributem odesílá při potvrzení nebo to naopak atribut blokuje.
| Atribut | Popis | Pro typ vstupu | Odesílá se |
|---|---|---|---|
| autocomplete | Je povoleno automatické doplňování | Všechny textové, range, date, color | |
| autofocus | Při načtení vyhledávač automaticky přejde na pozici vstupu a označí jej | Všechny | |
| disabled | Do vstupu nelze nic zadat | Všechny | Ne |
| height | Výška vstupu pro obrázek | image | |
| list | Název datalistu pro výběr z možností | Žádný, pro <datalist> | |
| maxlength | Určuje maximální počet znaků | Všechny textové | |
| min | Určuje minimální hodnotu vstupu | number, range, date, time | |
| max | Určuje maximální hodnotu vstupu | number, range, date, time | |
| multiple | Povoluje zadat vícero vstupů | email, file | |
| placeholder | Krátký text, který se zobrazuje dokud je vstup prázdný | Všechny | Ne |
| readonly | Pouze pro čtení, nelze nic zapisovat | Všechny | Ano |
| required | Povinné vyplnit daný vstup | Všechny textové, checkbox, radio, file, date | |
| size | Určuje počet viditelných znaků při zadávání | text, search, tel, url, email, password | |
| step | Intervaly možných číselných vstupů | number, range, date, time | |
| value | Počáteční hodnota ve vstupu | Všechny | Ano |
| width | Šířka vstupu pro obrázek | image |