HTML tutoriál

HOME HTML Úvod do HTML HTML editory HTML Basic HTML prvky Atributy HTML HTML nadpisy HTML odstavce HTML styly Formátování HTML HTML citace HTML komentáře HTML barvy HTML CSS HTML odkazy HTML obrázky HTML favicon HTML tabulky HTML seznamy HTML Block & Inline HTML třídy ID HTML HTML iframe HTML JavaScript Cesty souboru HTML HTML hlava Rozložení HTML HTML responzivní Počítačový kód HTML Sémantika HTML Průvodce stylem HTML HTML entity HTML symboly HTML Emojis Znaková sada HTML HTML kódování URL HTML vs. XHTML

HTML formuláře

HTML formuláře Atributy formuláře HTML HTML prvky formuláře Typy vstupu HTML Vstupní atributy HTML Atributy vstupního formuláře HTML

HTML grafika

HTML plátno HTML SVG

HTML média

HTML média HTML video Zvuk HTML HTML pluginy HTML YouTube

HTML API

Geolokace HTML HTML Drag/Drop Webové úložiště HTML HTML Web Workers HTML SSE

Příklady HTML

Příklady HTML HTML kvíz HTML cvičení HTML certifikát HTML souhrn Přístupnost HTML

HTML reference

Seznam značek HTML Atributy HTML Globální atributy HTML Podpora HTML prohlížeče HTML události HTML barvy HTML plátno HTML Audio/Video HTML Doctypes HTML znakové sady HTML kódování URL HTML jazykové kódy Zprávy HTTP HTTP metody Převodník PX na EM Klávesové zkratky

HTML formuláře


Pro shromažďování uživatelských vstupů se používá formulář HTML. Uživatelský vstup je nejčastěji odeslán na server ke zpracování.


Příklad







Element <form>

Element HTML <form>se používá k vytvoření formuláře HTML pro vstup uživatele:

<form>
.
form elements
.
</form>

Prvek <form>je kontejner pro různé typy vstupních prvků, jako jsou: textová pole, zaškrtávací políčka, přepínače, tlačítka pro odeslání atd.

Všechny různé prvky formuláře jsou popsány v této kapitole: Prvky formuláře HTML .


Prvek <input>

Element HTML <input>je nejpoužívanějším elementem formuláře.

Prvek <input>lze zobrazit mnoha způsoby v závislosti na type atributu.

Zde jsou nějaké příklady:

Typ Popis
<input type="text"> Zobrazí jednořádkové pole pro zadávání textu
<input type="radio"> Zobrazí přepínač (pro výběr jedné z mnoha možností)
<input type="checkbox"> Zobrazí zaškrtávací políčko (pro výběr nuly nebo více z mnoha možností)
<input type="submit"> Zobrazí tlačítko Odeslat (pro odeslání formuláře)
<input type="button"> Zobrazí tlačítko, na které lze kliknout

Všechny různé typy vstupu jsou popsány v této kapitole: Typy vstupu HTML .



Textová pole

<input type="text">Definuje jednořádkové vstupní pole pro zadávání textu .

Příklad

Formulář se vstupními poli pro text:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

Takto se výše uvedený HTML kód zobrazí v prohlížeči:

Jméno:

Příjmení:

Poznámka: Samotný formulář není viditelný. Všimněte si také, že výchozí šířka vstupního pole je 20 znaků.


Prvek <label>

Všimněte si použití <label>prvku ve výše uvedeném příkladu.

Značka <label>definuje štítek pro mnoho prvků formuláře.

Prvek <label>je užitečný pro uživatele čtečky obrazovky, protože čtečka obrazovky přečte nahlas štítek, když se uživatel zaměří na vstupní prvek.

Prvek <label>také pomáhá uživatelům, kteří mají potíže s klikáním na velmi malé oblasti (jako jsou přepínače nebo zaškrtávací políčka) – protože když uživatel klikne na text v <label>prvku, přepne přepínač/zaškrtávací políčko.

Atribut forznačky <label>by se měl shodovat s idatributem <input> prvku, aby je spojil dohromady.


Přepínače

<input type="radio">Definuje přepínač .

Přepínače umožňují uživateli vybrat JEDNU z omezeného počtu možností.

Příklad

Formulář s přepínači:

<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

Takto se výše uvedený HTML kód zobrazí v prohlížeči:

Vyberte si svůj oblíbený jazyk webu:




Zaškrtávací políčka

<input type="checkbox">Definuje zaškrtávací políčko .

Zaškrtávací políčka umožňují uživateli vybrat NULA nebo VÍCE možností z omezeného počtu možností.

Příklad

Formulář se zaškrtávacími políčky:

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

Takto se výše uvedený HTML kód zobrazí v prohlížeči:




Tlačítko Odeslat

<input type="submit">Definuje tlačítko pro odeslání dat formuláře do obslužného programu formuláře .

Form-handler je obvykle soubor na serveru se skriptem pro zpracování vstupních dat.

Form-handler je uveden v action atributu formuláře.

Příklad

Formulář s tlačítkem Odeslat:

<form action="/action_page.php">
  <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"><br><br>
  <input type="submit" value="Submit">
</form>

Takto se výše uvedený HTML kód zobrazí v prohlížeči:

Jméno:

Příjmení:



Atribut názvu pro <input>

Všimněte si, že každé vstupní pole musí mít nameatribut, aby bylo možné jej odeslat.

Pokud je nameatribut vynechán, hodnota vstupního pole nebude odeslána vůbec.

Příklad

Tento příklad neodešle hodnotu vstupního pole „First name“: 

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" value="John"><br><br>
  <input type="submit" value="Submit">
</form>

HTML cvičení

Otestujte se pomocí cvičení

Cvičení:

Do formuláře níže přidejte vstupní pole s typem „tlačítko“ a hodnotou „OK“.

<form>
<>
</form>