Tvorba webu » HTML » Formuláře v html

Formuláře v html

Vložit si na stránku formulář není nic složitého, ale problém je v tom, že jen samotný formulář nestačí. K formuláři je zapotřebí ještě php script, který vše zpracuje.

Pokud potřebujete php script 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í pole, které se odešlou.

Action

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

Method

Method určuje metodu předání dat, při použití get se budou data předávat pomocí URL (adresy), při použití post se odešlou data, které nebudou součástí url.

Imput - vstupní pole

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

Type

Type určuje druh vstupního pole pomocí něj můžete vytvořit spoustu 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, také může použít atribut maxlength, který určuje nejvyšší počet zadaných znaků.

type=password

Vlastnosti jsou stejné jaku u type=text akorát se místo textu zobrazí hvězdičky.

type=hidden

Používá se pokud chcete odeslat již 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ínací tlačítko, dalším atributem je checked, který působý zaškrtnutí pole.

type=checkbox

Při použití type=checkbox se zobrazí zaškrtávací pole, dalším atributem je checked, který působí zaškrtnutí pole.

type=button

Tlačítko používa se 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žítý ve spojení s PHP, name 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 uvadí se bez hodnoty, disabled 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í měnění políček, políčko se zobrazí šedé a nepůjde měnit, uvádí se bez hodnoty.

Multiple

Pokud chcete uživateli nabídnout více možností najednou, uvádí se 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, 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žítí 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 se do něj může zapisovat libovolný kód např. obrázky, text atd.

Label - popis polí

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

Fieldset - skupina polí

Fieldset slouží jako skupina polí, okolo 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, 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