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:

HTML Návod
HTML Návod - HOME
Úvod
Začínáme
HTML Tagy
HTML Formátování textu
HTML Atributy
HTML Barvy
HTML Odkazy
HTML Obrázky
HTML Metadata
HTML Komentáře
HTML Formuláře
HTML Tabulky
Psaní HTML značek
HTML & CSS
HTML & JAVASCRIPT
HTML Webové šablony
HTML Test
Shrnutí
Užitečné seznamy a nástroje
Kompletní seznam HTML tagů
Kódy HTML značek
Pojmenované barvy v HTML
Generátor hexadecimálního kódu barev
HTML ukázky
Hudba na web
©2008 - 2011 Klikzone.cz
Ráj aut - inzerce nových i ojetých aut