Home >> HTML návod >> HTML Formuláře

HTML Formuláře

V této lekci se seznámíme s HTML formuláři. Naučíme se jak vytvořit základní prvky formuláře, jak je sloučit v jeden formulář a také si řekneme, jak je možné formuláře použít.

Formuláře naleznete téměř na každém webu. Slouží například pro vyhledávání, pro uživatelské komentáře, pro komunikaci mezi tvůrci webu a uživateli nebo také pro přihlášení uživatele atd.

Tvorba formulářů

Při tvoření formulářů se používá pouze několik tagů. Všechny vstupní pole sjednocuje v jeden formulář párový tag <form>. Samotná vstupní pole se tvoří pomocí tagů <input>, <textarea> a <select>.

K vytvoření fukčního formuláře, který bude umožňovat uživatelům například vložit komentář ke článku, ovšem samotné HTML stačit nebude. To se stará pouze o vizuální stránku formuláře. K chodu formuláře je třeba ješte skript (například: PHP nebo JavaScript). V této lekci však skripty tvořit nebudeme, naučíme se jak vytvořit formulář pomocí HTML.

tag <form>

HTML tag <form> je párový tag, kterým se vyznačuje formulář. Uvádí se vždy na začátku a na konci formuláře.


<form>

<input type="text">

<input type="submit">

</form>

Odkazuje se jím také na skript, který má zpracovat data z formuláře a metodu jak mají být data odeslána. Například:


<form action="nejaky_skript" method="get">

Tag <input>

Nepárový HTML tag <input> je najčastěji požívaným tagem u formulářů. pomocí atributu type a jeho příslušných hodnot jej lze použít například pro textové pole, přepínač, zaškrtávací políčko atd.

Příklad:


<input type="text" >

Možné hodnoty atributy type

V této tabulce naleznete všechny možné hodnoty atributu type:

Hodnota	Popis	Ukázka
button	Tlačítko bez jakékoliv předdefinované funkce `<input type="button" value="tlačítko">`
checkbox	Zaškrtávací tlačítko `<input type="checkbox" value="neco">fotbal`	fotbal
file	Prvek pro upload souboru na web `<input type="file">`
hidden	Skryté pole `<input type="hidden">`
image	Obrázkové odesílací tlačítko `<input type="image" src="odesilaci-tlacitko.jpg">`
password	Textové pole pro heslo `<input type="password" size="15" value="heslo">`
radio	Přepínač `<input type="radio" value="ovoce">borůvky`	borůvky
reset	Tlačítko, které resetuje formulář `<input type="reset">`
submit	Tlačítko pro odeslání formuláře `<input type="submit">`
text	Textové pole `<input type="text">`

Tag <textarea>

HTML tag <textarea> se používá pro textové pole, které je určeno pro větší množství textu. Pomocí atributu cols lze definovat počet znaků na řádek a atributem rows počet viditelných řad.


<textarea cols="30" rows="3"></textarea>

Tag <select>

Html tag <select> se používá pro vytvoření rolovací nabídky. Na výběr je jedna z několika možností - ty jsou tvořeny pomocí tagu <option>. Ovšem pomocí atributu multiple lze vybírat i více možností najednou.


<select>

  <option value="fotbal">Fotbal</option>

  <option value="hokej">Hokej</option>

  <option value="tennis">Tennis</option>

  <option value="golf">Golf</option>

</select>

Výsledek:

Další lekce >>

<< Předchozí lekce