Vstupní atributy HTML
Tato kapitola popisuje různé atributy pro <input>element HTML.
Atribut hodnoty
Atribut input valueurč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 readonlyurč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 disabledurč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 sizeurčuje viditelnou šířku vstupního pole ve znacích.
Výchozí hodnota pro sizeje 20.
Poznámka: Atribut sizefunguje 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 maxlengthurčuje maximální počet znaků povolených ve vstupním poli.
Poznámka: Když maxlengthje 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 mina maxatributy určují minimální a maximální hodnoty pro vstupní pole.
Atributy mina maxpracují 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 multipleurčuje, že uživatel může do vstupního pole zadat více než jednu hodnotu.
Atribut multiplefunguje 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 patternurčuje regulární výraz, se kterým se při odeslání formuláře kontroluje hodnota vstupního pole.
Atribut patternfunguje 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 placeholderurč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 placeholderfunguje 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 requiredurčuje, že před odesláním formuláře musí být vyplněno vstupní pole.
Atribut requiredfunguje 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 stepurč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 stepfunguje 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 autofocusurč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 heighta widthatributy 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 listodkazuje 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 autocompleteurč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 autocompletefunguje 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 .