Vstupní atributy HTML
Tato kapitola popisuje různé atributy pro <input>
element HTML.
Atribut hodnoty
Atribut input value
určuje počáteční hodnotu pro vstupní pole:
Příklad
Vstupní pole s počátečními (výchozími) hodnotami:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
Atribut pouze pro čtení
Atribut input readonly
určuje, že vstupní pole je pouze pro čtení.
Vstupní pole pouze pro čtení nelze upravit (uživatel do něj však může tabulátorem použít, zvýraznit jej a zkopírovat text).
Hodnota vstupního pole pouze pro čtení bude odeslána při odeslání formuláře!
Příklad
Vstupní pole pouze pro čtení:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
Deaktivovaný atribut
Atribut input disabled
určuje, že vstupní pole by mělo být zakázáno.
Zakázané vstupní pole je nepoužitelné a nelze na něj kliknout.
Hodnota deaktivovaného vstupního pole nebude při odeslání formuláře odeslána!
Příklad
Deaktivované vstupní pole:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
Atribut velikosti
Atribut input size
určuje viditelnou šířku vstupního pole ve znacích.
Výchozí hodnota pro size
je 20.
Poznámka: Atribut size
funguje s následujícími typy vstupu: text, hledání, tel, url, e-mail a heslo.
Příklad
Nastavte šířku vstupního pole:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
size="4">
</form>
Atribut maxlength
Atribut input maxlength
určuje maximální počet znaků povolených ve vstupním poli.
Poznámka: Když maxlength
je nastaveno a, vstupní pole nepřijme více než zadaný počet znaků. Tento atribut však neposkytuje žádnou zpětnou vazbu. Pokud tedy chcete uživatele upozornit, musíte napsat kód JavaScript.
Příklad
Nastavte maximální délku vstupního pole:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
maxlength="4" size="4">
</form>
Atributy min a max
Vstup min
a max
atributy určují minimální a maximální hodnoty pro vstupní pole.
Atributy min
a max
pracují s následujícími typy vstupu: číslo, rozsah, datum, datum a čas-místní, měsíc, čas a týden.
Tip: Použijte společně atributy max a min k vytvoření řady právních hodnot.
Příklad
Nastavte maximální datum, minimální datum a rozsah právních hodnot:
<form>
<label for="datemax">Enter a date before
1980-01-01:</label>
<input type="date" id="datemax" name="datemax"
max="1979-12-31"><br><br>
<label for="datemin">Enter a date
after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin"
min="2000-01-02"><br><br>
<label for="quantity">Quantity
(between 1 and 5):</label>
<input type="number" id="quantity"
name="quantity" min="1" max="5">
</form>
Vícenásobný atribut
Atribut input multiple
určuje, že uživatel může do vstupního pole zadat více než jednu hodnotu.
Atribut multiple
funguje s následujícími typy vstupu: e-mail a soubor.
Příklad
Pole pro nahrání souboru, které přijímá více hodnot:
<form>
<label for="files">Select files:</label>
<input
type="file" id="files" name="files" multiple>
</form>
Atribut vzoru
Atribut input pattern
určuje regulární výraz, se kterým se při odeslání formuláře kontroluje hodnota vstupního pole.
Atribut pattern
funguje s následujícími typy vstupu: text, datum, hledání, url, tel, e-mail a heslo.
Tip: Použijte atribut globálního názvu k popisu vzoru, abyste pomohli uživateli.
Tip: Další informace o regulárních výrazech naleznete v našem výukovém programu JavaScript.
Příklad
Vstupní pole, které může obsahovat pouze tři písmena (žádná čísla ani speciální znaky):
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
Atribut zástupného symbolu
Atribut input placeholder
určuje krátkou nápovědu, která popisuje očekávanou hodnotu vstupního pole (ukázková hodnota nebo krátký popis očekávaného formátu).
Krátká nápověda se zobrazí ve vstupním poli předtím, než uživatel zadá hodnotu.
Atribut placeholder
funguje s následujícími typy vstupu: text, vyhledávání, adresa URL, tel, e-mail a heslo.
Příklad
Vstupní pole se zástupným textem:
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Požadovaný atribut
Atribut input required
určuje, že před odesláním formuláře musí být vyplněno vstupní pole.
Atribut required
funguje s následujícími typy vstupu: text, vyhledávání, adresa URL, tel, e-mail, heslo, výběr data, číslo, zaškrtávací políčko, rádio a soubor.
Příklad
Povinné vstupní pole:
<form>
<label for="username">Username:</label>
<input
type="text" id="username" name="username" required>
</form>
Atribut kroku
Atribut input step
určuje povolené intervaly čísel pro vstupní pole.
Příklad: pokud step="3", zákonná čísla mohou být -3, 0, 3, 6 atd.
Tip: Tento atribut lze použít společně s atributy max a min k vytvoření řady zákonných hodnot.
Atribut step
funguje s následujícími typy vstupu: číslo, rozsah, datum, datum a čas-místní, měsíc, čas a týden.
Příklad
Vstupní pole se zadanými zákonnými intervaly čísel:
<form>
<label for="points">Points:</label>
<input
type="number" id="points" name="points" step="3">
</form>
Poznámka: Omezení vstupu nejsou spolehlivá a JavaScript poskytuje mnoho způsobů, jak přidat nelegální vstup. Pro bezpečné omezení vstupu musí být také zkontrolováno přijímačem (serverem)!
Atribut autofokusu
Atribut input autofocus
určuje, že vstupní pole by se mělo automaticky aktivovat při načítání stránky.
Příklad
Umožněte, aby se vstupní pole „Jméno“ automaticky aktivovalo při načtení stránky:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Atributy výška a šířka
Vstup height
a width
atributy určují výšku a šířku <input
type="image">
prvku.
Tip: Vždy určete pro obrázky atributy výšky i šířky. Pokud jsou nastaveny výška a šířka, je při načtení stránky vyhrazen prostor potřebný pro obrázek. Bez těchto atributů prohlížeč nezná velikost obrázku a nemůže mu vyhradit odpovídající prostor. Efekt bude takový, že se během načítání (během načítání obrázků) změní rozložení stránky.
Příklad
Definujte obrázek jako tlačítko pro odeslání s atributy výška a šířka:
<form>
<label for="fname">First name:</label>
<input
type="text" id="fname" name="fname"><br><br>
<label for="lname">Last
name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
Atribut seznamu
Atribut input list
odkazuje na <datalist>
prvek, který obsahuje předdefinované volby pro prvek <input>.
Příklad
Prvek <input> s předdefinovanými hodnotami v <datalist>:
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Atribut automatického doplňování
Atribut input autocomplete
určuje, zda má mít formulář nebo vstupní pole zapnuto nebo vypnuto automatické doplňování.
Automatické doplňování umožňuje prohlížeči předpovědět hodnotu. Když uživatel začne psát do pole, prohlížeč by měl zobrazit možnosti pro vyplnění pole na základě dříve zadaných hodnot.
Atribut autocomplete
funguje s <form>
následujícími <input>
typy: text, vyhledávání, url, tel, e-mail, heslo, data, rozsah a barva.
Příklad
Formulář HTML se zapnutým a vypnutým automatickým doplňováním pro jedno vstupní pole:
<form action="/action_page.php" autocomplete="on">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
Tip: V některých prohlížečích může být nutné aktivovat funkci automatického doplňování, aby to fungovalo (podívejte se pod „Předvolby“ v nabídce prohlížeče).
HTML cvičení
HTML formulář a vstupní prvky
Tag | Description |
---|---|
<form> | Defines an HTML form for user input |
<input> | Defines an input control |
Úplný seznam všech dostupných značek HTML naleznete v naší Referenční příručce značek HTML .