Formuláře

Formulář slouží k získávání informací od uživatele, které jsou následně odeslány na server ke zpracování. Ke zpracování se nejčastěji využívá jazyka PHP. Formulářů může být na jedné stránce více, ale nesmí být do sebe vnořeny.

Tag	Atribut type=	Význam	Ukázka	Párový	Výskyt pouze v
form		formulář		ano
input	text	textový vstup		ne	<form>
	password	heslo
	radio	přepínače
	checkbox	zatrhávací políčko
	submit	odesílací tlačítko
	a další
select		výběrové pole	select option	ano	<form>
option		volba v selectu		ne	<select>, <datalist>
textarea		velké vstupní pole	dole	ano	<form>
label		popis pole		ano	<form>
fieldset		skupina polí		ano	<form>
legend		popis pole		ano	<fieldset>
optgroup		skupina voleb		ano	<select> <datalist>
button		tlačítko	button	ano	<form>
datalist		našeptávač k inputu	není vidět	ano

form

Uzavírá skupinu ovládacích polí do jednoho formuláře, který bude najednou odeslán.

Atributy tagu <form>

Atribut	Význam	Hodnoty
action	skript, který bude zpracovávat data pokud není uveden, data se odešlou na to samé URL	<form action="stranka.html"> <input type=submit value=odeslat> </form>
method	způsob předávání dat	get - pomocí URL (adresy) a jsou vidět post - data jsou šifrována, schována a nemají omezenou velikost
enctype	způsob zakódování dat	application/x-www-form-urlencoded -výchozí nastavení multipart/form-data - k odeslání souboru
target	cílové okno nebo rám	_self - v aktuálním okně (to je výchozí hodnota) _blank - v nové záložce _top - v nejhlavnějším rámu _parent - v nadřazeném rámu

 <form action="form1.php"  method="get">
 <input type="text" name="parametr" value="hodnota">
 <input type="submit" value="odeslat">
 </form>
 

input

Input znamená "vstup". Používá se ve formulářích, kde umožňuje uživateli vkládat data.

Atributy tagu <input>

Atribut	Význam	Hodnoty
type	druh vstupního pole	text | password | hidden | radio | checkbox | submit | reset | image | file | button
name	jméno pole, které se odesílá s daty	libovolné jméno
value	hodnota pole	libovolná hodnota
disabled	políčko bude šedé a nepůjde měnit (neodesílá se)	bez hodnoty
readonly	obsah pole nepůjde měnit	bez hodnoty
placeholder	předvyplněná hodnota, která při focusu může zmizet	jakýkoli text
autofocus	políčko bude mít automaticky kurzor	bez hodnoty nebo libovolná hodnota
list	připojení našeptávaných hodnot z datalistu	id tagu <datalist>
required	pokud je uveden, znamená to, že pole musí být pro odeslání formuláře vyplněné.	Atribut je typu boolean.
Další atributy jsou přípustné na základě hodnoty atributu type. Mohou to být size, maxlength, checked, autocomplete, src a accept.

 <form action="form1.php"  method="post">
<input type="text" name="text" value="napiš text"> 
<input type="text" name="text1" disabled="true" value="disable"> 
<input type="text" name="text2" readonly="true" value="readonly">    
<input type="text" name="text3" placeholder="placeholder" >     
<input type="text" name="text4" autofocus="true" value="autofocus">  
<input type="text" name="text5" list="hokejiste" placeholder="napiš našeho hokejistu">
<input type="text" name="text" value="" required="true">musí být vyplněné 

<datalist id="hokejiste">
 <option value="Jágr">
 <option value="Voráček">
 <option value="Hašek">
</datalist>
<input type="submit" value="odeslat">
</form>
 

type

Tag <input>, atribut type. Různá vstupní pole.

type=	Druh vstupního pole	Další atributy
button	tlačítko ovládané skriptovými atributy	1. tag <input type="button" value="text"> zobrazí tlačítko s textem "text". Aby tlačítko něco dělalo, je potřeba přidat k němu nějaký ovladač události, nejčastěji onclick. 2. tag <button> je párový. Má stejnou funkci jako <input type="button">, ale může obsahovat libovolný html obsah. Např. <button onclick="stisknuto()"><img src="obrazek.jpg"></button> je tlačítko obsahující obrázek.
checkbox	zatrhávací tlačítko	checked - Atribut je typu boolean. Pokud je uveden, je políčko zaškrtnuto.
color	výběr barvy
dater	výběr data
datetime	výběr času
datetime-local	výběr data a času
email	zadání emailové adresy
file	umožní zadat soubor	accept - MINE typ nabízených souborů multiple umožní vybrat více souborů do jednoho formulářového prvku (nefunguje v IE)
hidden	skryté pole s předem nastavenou hodnotou	používá se ve specifických případech, kdy chceme s daty uživatele odeslat i nějakou další informaci, o které uživatel nemusí vědět
image	odesílací tlačítko s obrázkem	src= URL obrázku
month	výběr měsíce a roku
number	zadání čísla	min- od čísla max- do čísla
password	textové pole s hvězdičkami	size- šířka ve znacích maxlength- maximum znaků
radio	přepínač puntíků	checked - atribut bez hodnoty způsobí stisknutí puntíku
range	zadání čísla posuvníkem	min- od čísla max- do čísla
reset	tlačítko na smazání všech polí (na přednastavenou hodnotu)
search	vyhledávací pole
submit	potvrzující tlačítko způsobující odeslání formuláře
text	obyčejné textové pole	size- šířka ve znacích maxlength- maximum znaků
time	zadání času
url	zadání URL adresy
week	zadání týdnu a roku

Button

Napiš text:

 <FORM NAME="myform" ACTION="" METHOD="GET">Napiš text: <BR>
<INPUT TYPE="text" NAME="inputbox" VALUE="" size="50"> <BR>
<INPUT TYPE="button" NAME="button" Value="Button" onClick="test(this.form)">
</FORM>
 <SCRIPT LANGUAGE="JavaScript">
function test (form)
 {
    var TestVar = form.inputbox.value;
    alert ("Napsaný text: " + TestVar);
 }
 </SCRIPT>
 

    <button onclick="stisknuto()"><img src="../images/hand.ico"></button> 
    
     <script language="JavaScript">
 function stisknuto() 
 {
      window.open("http://www.seznam.cz", "_blank", "width=400,height=500")
 }    
       </script>
  

Checkbox

Na server jsou odeslána pouze zaškrtnutá pole.

Je zaškrtnutý.
Není zaškrtnutý.

 <input type="checkbox" name="A" value="1" checked="checked" > Je zaškrtnutý.<br/>
<input type="checkbox" name="B" value="2" > Není zaškrtnutý.

Checkboxy můžeme sdružít do pole. Na server poté přijde pole odeslaných hodnot, indexované od 0.

Zvolte si oblíbené barvy:
černá
bílá
modrá
zelená
žlutá

 <form action="form1.php"  method="post">
 Zvolte si oblíbené barvy:<br />
<input type="checkbox" name="barva[]" value="c"> černá<br />
<input type="checkbox" name="barva[]" value="b"> bílá<br />
<input type="checkbox" name="barva[]" value="m"> modrá<br />
<input type="checkbox" name="barva[]" value="z"> zelená<br />
<input type="checkbox" name="barva[]" value="zz"> žlutá   <br>
<input type="submit" value="odeslat">
</form>

File

Použití prvku file vyžaduje uvést v otevíracím tágu formuláře form atributy enctype="multipart/form-data" a method="post".

<input type="file" name="upFile" accept="image/*" multiple   >

Image

   <FORM ACTION="form1.php"  method="post" > 
  <INPUT TYPE="text" NAME="image" required="true"> 
  <INPUT TYPE=IMAGE SRC="../images/hand.ico" HEIGHT=110 WIDTH=160 ALT="ruka" ALIGN=ABSMIDDLE >
   </FORM>
   

Number

vyber číslo (od 1 do 5):

  <form  action="form1.php"  method="post" >
  vyber číslo (od 1 do 5):
  <input type="number" name="kolik" min="1" max="5">
  <input type="submit" value="odeslat">
  </form>
  

Radio

Tlačítka seskupujeme tak, že jim dáme stejné jméno (atribut name). Při změně volby se původní volba odznačí. Odesláno potom bude jen to vybrané tlačítko.

Vyber nej barvu:
žlutá
modrá
červená
zelená

<form  action="form1.php"  method="post" >
Vyber nej barvu:<br>
<input type="radio" name="radiobarva" value="yellow" /> žlutá<br />
<input type="radio" name="radiobarva" value="blue" checked="checked" /> modrá<br />
<input type="radio" name="radiobarva" value="red" /> červená<br />
<input type="radio" name="radiobarva" value="green" /> zelená<br />
<input type="submit" value="odeslat"> 
</form> 

Range

  <form  action="form1.php"  method="post" > 
  <input type="range" name="points" min="0" max="10">
  <input type="submit" value="odeslat"> 
  </form> 
  

Text

Krátký text na jeden řádek.

select

Výběr z více možností. Zobrazí obdélníček s rozbalovacími možnostmi nebo roletkové menu.

Atributy tagu <select>

Atribut	Význam	Hodnoty
name	jméno pole odesílatné s daty	libovolné jméno
multiple	umožnění hromadného výběru (s Ctrl)	bez hodnoty
size	počet zobrazených řádků	číslo
disabled	políčko bude šedé a nepůjde měnit	bez hodnoty
autofocus	hned po načtení stránky bude políčko aktivní	bez hodnoty

jablko broskev

<form  action="form1.php"  method="post" > 
<select name="ovoce">
 <option value="jablko">jablko</option>
 <option value="broskev" selected="selected">broskev</option>
</select>
<input type="submit" value="odeslat">
</form> 
  

Pondělí Úterý Středa Čtvrtek Pátek Sobota Neděle

<form  action="form1.php"  method="post" > 
<select name="den[]" size="7"  multiple>
    <optgroup label="Pracovní dny">
        <option value="1">Pondělí</option>
        <option value="2">Úterý</option>
        <option value="3">Středa</option>
        <option value="4">Čtvrtek</option>
        <option value="5" selected="selected">Pátek</option>
    </optgroup>
    <optgroup label="Víkend">      
        <option value="6">Sobota</option>
        <option value="7">Neděle</option>
     </optgroup>    
</select>
<input type="submit" value="odeslat"> 
  

option

Položka výběru. Musí se vyskytovat uvnitř tagu <select> nebo <datalist>, jinak nic nedělá.

Atributy tagu <option>

Atribut	Význam	Hodnoty
value	řetězec odesílaný jako hodnota pole	řetězec
selected	položka je předem vybrána	pokud je uveden, je daná možnost předem vybrána.
disabled	položka je vidět, ale je zašedlá a nelze ji vybrat	disabled

Příklad viz u select.

textarea

Rozsáhlé vstupní pole. Nemá atribut value, za implicitní hodnotu se považuje obsah elementu.

Atributy tagu <textarea>

Atribut	Význam	Hodnoty	Podpora
name	jméno odesílané s daty	jméno
cols	šířka pole ve znacích	číslo	obvykle se šířka nastavuje spíše CSS vlastností width
rows	výška pole v řádcích	číslo	obvykle se šířka nastavuje spíše CSS vlastností height.
disabled	oblast bude šedá a nepůjde do ní psát	bez hodnoty
readonly	obsah pole nepůjde měnit	bez hodnoty
wrap	zalamování slov a řádků	hard, soft, off
autofocus	po načtení stránky se textarea sama aktivuje	autofocus
placeholder	textová nápověda k poli	text
required	pole je požadováno	required
maxlength	maximální počet znaků	číslo	neumí to IE9

<form  action="form1.php"  method="post" > 
<textarea name="komentar" maxlength="500"   required rows="3" cols="50" placeholder="Zde nám prosím napiště připomínky k našemu programu"></textarea>
<input type="submit" value="odeslat">

label

Slouží k popisu polí, je to tedy text vedle pole, který udává, k čemu pole slouží. Mnoho lidí labely nepoužívá a vedle políčka vloží prostý text. To je ale špatně a projeví se to mimo jiné například u checkboxů, kde se při kliknutí na label políčko zaškrtne, ale při kliknutí na prostý text vedle textboxu se nestane nic a musíte se trefit přímo na políčko.

for - Atribut obsahuje id elementu, ke kterému label patří.

Správně zapsaný label k checkboxu

<label for="popisek">Správně zapsaný label k checkboxu</label>
<input type="checkbox" name="spravne" value="Správně" id="popisek" /><br /> 

fieldset

Slouží k seskupení souvisejících polí ve formuláři. Vykreslí kolem nich slabý rámeček.

legend

Tag označuje nadpis fieldsetu. Zobrazuje se nad skupinou polí přes horní čáru fieldsetu. Musí být zapsána hned za značkou <fieldset>.

Atribut tagu <legend>

Atribut	Význam	Hodnoty
align	zarovnání popisku	left | right | center

Fakturační adresa:

Jméno:
Ulice:
Město:
PSČ:

Dodací adresa:

Jméno:
Ulice:
Město:
PSČ:

<form>
        <fieldset>
                <legend style="color:yellow">Fakturační adresa:</legend>
                Jméno: <input type="text" /><br />
                Ulice: <input type="text" /><br />
                Město: <input type="text" /><br />
                PSČ: <input type="text" /><br />
        </fieldset>
        <fieldset>
                <legend style="color:yellow" align="center">Dodací adresa:</legend>
                Jméno: <input type="text" /><br />
                Ulice: <input type="text" /><br />
                Město: <input type="text" /><br />
                PSČ: <input type="text" /><br />
        </fieldset>
       
</form>