Tvorba webu » HTML » Formuláře v html

Formuláře v html

Tak asi jako každého vás zlákaly formuláře.

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"></TEXTAREA>

<SELECT>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</SELECT>
a b c d

<INPUT TYPE="checkbox">

<INPUT TYPE="radio" value="1" name="jedna">

<INPUT TYPE="submit" value="odeslat">

<INPUT TYPE="reset" value="vymazat">

Form - formulář podrobný popis

Form je párový tag uzavírají se do něj ovládací pole které se nakonec odešlou.

Action - atribut

Atribut action se používá k zadání url ke skriptu který bude data zpracovávat jako hodnota se uvádí URL.

Method - atribut

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

Enctype - atribut

Atribut enctype se moc nevyužívá jeho hodnoty jsou application/x-www-form-urlencoded a multipart/form-data.

Imput - vstupní pole

Imput neboli vstupní pole se používá k vytvoření tlačítek, textových polích zaškrtávacích polí a přepínacích polí atd...tento tag není párový.

Type - atribut

Atribut type určuje druh vstupního pole pomocí něj můžete vytvořit spoustu formulářů, má hodně hodnot

type=text

při použití text se zobrazí textové pole, jeho šířku můžete nastavit pomocí atributy size jeho hodnota je počet písmen které se do pole vejdou, také může použít atribut maxlength který určuje nejvyšší počet zadaných znaků.

type=password

Při použití password budou vlastnosti stejné jaku u text akorát se místo textu zobrazí hvězdičky.

type=hidden

Tato hodnota se používá jako skryté pole s předem zadanou hodnotou.

type=file

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

type=radio

Při použití 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í checkbox se zobrazí zaškrtávací pole, dalším atributem je checked který působí zaškrtnutí pole.

type=button

Objeví se tlačítko které bude ovládáno skripty.

type=submit

Při použití submit se zobrazí tlačítko které bude odesílat formuláře.

type=reset

Při použití reset se zobrazí tlačítko které bude vracet formulář do původního nastavení.

type=image

Při použití image musíte přidat další atribut src který určuje url obrázku který se zobrazí jako tlačítko.

Příklad:

<input type="text"> výsledek:

Name - atribut

Atribut name určuje jméno pole která se posílá s ostatními daty formuláře, jako hodnota se uvádí jméno.

Value - atribut

Atribut value určuje počáteční hodnoto vstupního pole( text zobrazený v textovém poli nebo na tlačítku...)jako jeho hodnota se uvádí text který chcete.

Align - atribut

Pomocí atributu align můžete vstupní pole zarovnávat stejně jako u obrázků.

Disabled - atribut

Atribut disabled zobrazí políčko šedé a nepůjde měnit.Tento atribut se uvádí bez hodnoty

Readonly - atribut

Atribut readonly zobrazí vstupní pole které nepůjde měnit.Tento atribut se uvádí bez hodnoty.

Select - menu

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

Name - atribut

Atribut 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 - atribut

Pomocí atributu size můžete nastavit kolik řádků pod sebou se zobrazí pokud nastavíte méně řádků než počet option tak se objeví rolovací lišta.

Disabled - atribut

Pomocí tohoto atributu můžete znemožnit měnění políček, políčko se zobrazí šedé a nepůjde měnit.Tento atribut se uvádí bez hodnoty.

multiple - atribut

Tento atribut se používá pokud chcete uživateli nabídnout více možností najednou, bude se moc vybrat hned několik možností najednou.Multiple se uvádí bez hodnoty.

Option - položka seznamu

Nepárový tag 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 - atribut

Atribut value určuje hodnotu která se bude odesílat jako hodnota určitého pole, jako hodnota se uvádí cokoli.

Selected - atribut

Atribut selected umožňuje předem vybrat položku se seznamu.Tento atribut se uvádí bez hodnoty.

Optgroup - nadpis

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

Textarea - textové pole

Tag textarea je párový, používá se k zapisování delších textů, text zapsaný mezi tagy textarea se zobrazuje.

Příklad:

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

Name - atribut

Atribut 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 - atribut

atribut cols určuje šířku pole ve znacích jako jeho hodnota se uvádí počet znaků.

Rows - atribut

Atribut rows se používá k nastavení výšky pole v řádcích, jeho hodnota se uvádí jako počet řádků.

Disabled - atribut

Pomocí tohoto atributu můžete znemožnit měnění políček, políčko se zobrazí šedé a nepůjde měnit.Tento atribut se uvádí bez hodnoty.

Readonly - atribut

Při použití tohoto atributu nepůjde obsah pole měnit, readonly se uvádí bez hodnoty.

Wrap - atribut

Pomocí tohoto atributu můžete nastavit zalamování slov a řádků, wrap nabývá třemi hodnotami.První soft (wrap="soft") v tomto případě se řádky smějí zalomit jen v místě mezery.Druhá hard (wrap="hard") řádky se zalamují v mezerách a ve slovech které se nevejdou na řádek.Třetí off (wrap="off") působí že řádek se nesmí zalomit nikde.

Button - tlačítko

Element 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í

Nepárový tag label se používá jako popisek polí a zapisuje přímo před něj, pomocí atributu for se spojí s vstupním polem hodnota for musí být stejná jako id vstupního pole.
<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 legent který se zobrazí jako nadpis.Tento tag je párový.

Legent - popis skupiny

Legent se používá jako popisek skupiny fieldset, musí se zapisovat hned za tag <fieldset>.Tento tag je párový.

Align

Pomocí tohoto atributu můžete nadpis zarovnat, left (align="left") se zarovná do leva, right (align="right") se zarovná do prava a center (align="center") se vycentruje.

Příklad

<FORM ACTION="http://rneco.wz.cz" METHOD="GET">
<fieldset>
jméno: <INPUT TYPE="text" NAME="textove_pole" VALUE="zadej jméno" SIZE="20" MAXLENGTH="60"><BR>
heslo: <INPUT TYPE="password" NAME="heslo" SIZE="20"><BR>
<INPUT TYPE="radio" NAME="prvni" VALUE="1" checked>zabezpečený přístup<BR>
<INPUT TYPE="radio" NAME="druha" VALUE="2">vstup bez hesla<BR>
<INPUT TYPE="radio" NAME="treti" VALUE="3"> zapoměli jste heslo?<BR>
<INPUT TYPE="submit" NAME="tlacitko" VALUE="přihlásit se ">
</fieldset>
</FORM>

zobrazit příklad

Reklama