Tvorba webu » HTML » Formuláře v HTML

Formuláře v HTML

Vložit na stránku formulář není nic složitého, ale samotný formulář nestačí. Je potřeba také PHP skript, který data zpracuje.

Pokud potřebujete PHP skript, přejděte raději do sekce věnované pouze PHP.

Nejprve zdrojáky a ukázky

<input type="file">

<input type="text" value="text">

<textarea cols="40" rows="3">text</textarea>

text

<select>
<option>první</option>
<option>druhá</option>
<option>třetí</option>
</select>

první druhá třetí

<input type="checkbox">

<input type="radio" value="1" name="jedna">

<input type="submit" value="odeslat">

<input type="reset" value="vymazat">

Form - formulář

Form je párový tag, do kterého se zapisují ovládací prvky, které se odešlou.

Action

Action se používá k zadání URL skriptu, který bude data zpracovávat.

Method

Method určuje způsob předání dat. Při použití get se data předají pomocí URL, při použití post se odešlou v těle požadavku.

Input – vstupní pole

Input se používá k vytvoření tlačítek, textových polí, zaškrtávacích polí a přepínačů.

Type

Type určuje druh vstupního pole. Pomocí něj můžete vytvořit řadu vstupních polí; možné hodnoty jsou:

• type=text
• type=password
• type=hidden
• type=file
• type=radio
• type=checkbox
• type=button
• type=submit
• type=reset
• type=image

type=text

Při použití type=text se zobrazí textové pole. Jeho šířku můžete nastavit atributem size a maximální počet znaků atributem maxlength.

type=password

Vlastnosti jsou stejné jako u type=text, pouze se místo textu zobrazují hvězdičky.

type=hidden

Používá se, pokud chcete odeslat předem připravenou hodnotu. Toto pole se nezobrazuje.

type=file

Při použití type=file se objeví nabídka na přidání souboru, který se může odeslat.

type=radio

Při použití type=radio se zobrazí přepínač. Atribut checked určuje, které pole bude předem zaškrtnuté.

type=checkbox

Při použití type=checkbox se zobrazí zaškrtávací pole. Atribut checked určuje, zda bude pole předem zaškrtnuté.

type=button

Tlačítko používané ve spojení s JavaScriptem.

type=submit

Odešle formulář.

type=reset

Vrátí formulář do původních hodnot.

type=image

Tlačítko s obrázkem, který přiřadíte pomocí src jako u obrázků.

Name

Name je důležitý ve spojení s PHP. Určuje jméno pole, které se posílá s ostatními daty formuláře.

Value

Value určuje počáteční hodnotu vstupního pole (text zobrazený v textovém poli nebo na tlačítku...).

Align

Zarovnání jako u obrázků.

Disabled

Disabled se uvádí bez hodnoty a způsobí, že vstupní pole nepůjde změnit.

Readonly

Stejné jako disabled.

Select – menu

Pomocí párového tagu select můžete připravit rolovací menu, v němž bude každá položka zobrazena pomocí tagu option.

Name

Name se používá k zadání jména formuláře, toto jméno bude pak zasíláno s daty ke skriptu, který bude formulář zpracovávat.

Size

Určuje kolik řádků pod sebou se zobrazí, pokud nastavíte méně řádků než počet option tak se objeví rolovací lišta.

Disabled

Znemožní změnu polí. Pole se zobrazí šedé a nepůjde měnit; atribut se uvádí bez hodnoty.

Multiple

Pokud chcete uživateli nabídnout více možností najednou, použijte tento atribut bez hodnoty.

Option - položka seznamu

Option je položka seznamu, která se zapisuje mezi tagy select. Text za option se zobrazuje v seznamu.

Příklad

<select>
<option>položka 1</option>
<option>položka 2</option>
<option>položka 2</option>
</select>

položka 1 položka 2 položka 2

Value

Value určuje hodnotu, která se bude odesílat jako hodnota určitého pole.

Selected

Předem vybere položku ze seznamu a uvádí se bez hodnoty.

Optgroup - nadpis

Optgroup je párový, používá se jako nadpis v menu select pomocí atributu label se zapíše nadpis jednotlivých položek seznamu.

<select>
<optgroup label="první">
<option>položka 1</option>
<option>položka 2</option>
<option>položka 2</option>
</optgroup>
<optgroup label="druhá">
<option>položka 1</option>
<option>položka 2</option>
<option>položka 2</option>
</optgroup>
</select>

položka 1 položka 2 položka 2 položka 1 položka 2 položka 2

Textarea - textové pole

Textarea se používá k zapisování delších textů.

Příklad

<textarea rows="5" cols="40">
text
</textarea>

text

Name

Name se používá k zadání jména formuláře, toto jméno bude pak zasíláno s daty ke skriptu, který bude formulář zpracovávat.

Cols

Šířka pole ve znacích.

Rows

Výška pole v řádcích.

Disabled

Při použití disabled nepůjde textarea měnit.

Readonly

Jako disabled.

Wrap

Nastavuje zalamování řádků.

• wrap="soft" – řádky se smějí zalomit jen v místě mezery
• wrap="hard" – řádky se zalamují v mezerách a ve slovech, která se nevejdou na řádek
• wrap="off" – řádek se nesmí zalomit nikde

Button – tlačítko

Button se používá jako tlačítko. Jeho výhodou je, že do něj lze zapsat libovolný obsah, například obrázky nebo text.

Label - popis polí

<label for="hodnota">Zadej e-mail:</label> <input type="text" id="hodnota">

Fieldset - skupina polí

Fieldset slouží jako skupina polí, kolem které se zobrazuje rámeček. Čáru můžete přerušit tagem legend, který se zobrazí jako nadpis.

Legend - nadpis skupiny

Legend se používá jako nadpis skupiny fieldset a musí se zapisovat hned za tag fieldset.

Align

Zarovnání (left, right, center).

<fieldset>
<legend>Nadpis</legend>
A nějaké formuláře.
</fieldset>

Nadpis

A nějaké formuláře.

Reklama