Samizdatová skripta

Formuláře

Formuláře slouží k získání informací či jiných dat od uživatele. Získané informace jsou následně odeslány na server ke zpracování. Ke zpracování údajů z formuláře slouží nějaký script, který zadaná data uloží do souboru či databáze nebo – je-li to soubor – tento na server nahraje. Takový script lze například napsat v PHP.

Formulář se ve stránce zobrazí jako dialogové okno s různými vstupními poli. Vnořování formulářů není dovoleno

Základní značka formuláře

<FORM action="URI" 
Method="metoda_použitá k_odeslání_dat" 
name="název" 
enctype="MIME_type_ochozích _dat" 
target="cílové_okno" 
accept-charset="kódování_ochozích_dat">
  <!-- Jednotlivá vstupní pole formuláře. Sem je možno vložit jakoukoli HMTL značku, čehož se využívá pro formátování obsahu formuláře. Nejčastěji se používají tabulky. //-->
  </FORM>

Nejdůležitější parametry značky FORM

• ACTION – adresa scriptu, kterému se mají data z formuláře odeslat. Příp. lze zadat mailto:elektronická@adresa.cz a formulář bude zpracován klientem pro e poštu, který musí mít uživatel nainstalovaný a nastavený.
• ACCEPT-CHARSET – čárkou oddělený seznam kódování dat, která musí být přijata při zpracování formuláře
• TARGET – okno, ve kterém se má otevřít stránka zadaná v parametru ACTION
• METHOD – metoda odeslání:
  • get – výchozí, data se objeví za adresou
  • post – data jsou skrytě odeslána (v těle požadavku)
• ENCTYPE – MINE typ odesílaných dat, tzn. jsou-li data z formuláře jen textového typu nebo se mají odeslat i soubory.
  • Application/x-www-form-urlencoded – odešle jen text
  • Multipart/form-data – lze posílat i soubory

Pokud mám formulář sloužit i k náhraní souborů, je potřeba, aby obsahoval ENCTYPE s příslušným MIME typem:

<form enctype="Multipart/form-data"></form>

Základní typy vstupních polí (objektů) formuláře

Značka INPUT

Nepárová značka, základní typ vstupního pole, lze využít pro vložení jednořádkového textu.

<INPUT type="typ" 
name="název" 
value="hodnota" 
size="velikost" 
maxlenght="číslo" 
checked="checked" 
title="titulek">

Nejdůležitější parametry:

• VALUE – text (název), který se zobrazí při načtení stránky
• SIZE – velikost v bodech
• MAXLENGHT – max. délka řetězce zadaného uživatelem
• CHECKED – hodnota určuje, že má být tlačítko zaškrtnuto
• TYPE – typ pole:
  • text – výchozí
  • password – místo psaných znaků zobrazí *
  • checkbox – vytvoří zaškrtávací pole
  • radio – vytvoří kruhový volič
  • submit – vytvoří tlačítko
  • reset – vytvoří tlačítko, které po stisku vymaže data zadaná do formuláře (jako název tlačítka doporučuji zadávat slova, která vystihují funkci tlačítka. – např. slouží-li formulář k přidávání inzerátů, není vhodné zadat název: vymaž inzerát)
  • file – vytvoří textové pole s tlačítkem, které po stisku vyvolá dialog pro zadání souboru
  • hidden – vytvoří skryté tlačítko
  • image – vytvoří tlačítko ozdobené obrázkem [URI]
  • button – vypadá jako submit, ale není mu přiřazena akce

K dalším parametrům patří ID, CLASS, STYLE, ALIGN, ACCEPT, READONLY, DISABLED, TABINDEX, ACCESSKEY, USEKAL, ISMAP.

Pozn: místo značky INPUT lze použít párovou značku

    <BUTTON>název tlačítka či jiné HTML značky  </BUTTON>

U této značky je atribut SUBMIT je nahrazen atributem BUTTON.

Značka TEXTAREA

Je párová značka, sloužící k zadání víceřádkového textu.

Nejdůležitější parametry:

    <TEXTAREA name="název" 
rows="počet_řádků" 
cols="počet_sloupců"> Text   </TEXTAREA>

Další parametry: DISABLED, READONLY, TABINDEX, ACCESSKEY.

Značka SELECT

Párová, zobrazí se jako výběrové menu. Jednotlivé položky jsou ohraničené párovou značkou .

Nejdůležitější parametry:

<SELECT name=„název" size=„výška_vlajky">Položky menu  </SELECT>

Další parametry: DISABLED, TABINDEX, ACCESSKEY, MULTIPLE (= povolit označení více položek).

Značka OPTION

Párová, položka menu. Tuto značku lze zapisovat i jako nepárovou.

Nejdůležitější parametry:

<OPTION value="odesílaná_hodnota" >Název položky  </OPTION>

Další parametry: DISABLED, SELECTED (= položka, která je vybraná po načtení stránky).

Příklady použití jednotlivých komponent

 <input name="jmeno" type="text" size="30" maxlenght="10"> 

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

<h3>Jedna skupina </h3>
 <input name="polozky" type="radio" value="0" checked="checked">Položka 0 <br>
 <input name="polozky" type="radio" value="1">Položka 1 <br>
 <input name="polozky" type="radio" value="2">Položka 2 <br>
 <input name="polozky" type="radio" value="3">Položka 3 <br>
 <input name="polozky" type="radio" value="4">Položka 4 <br>
 <br>
 <h3>Druhá skupina </h3>
 <input name="polozky1" type="radio" value="0">Položka 0 <br>
 <input name="polozky1" type="radio" value="1">Položka 1 <br>
 <input name="polozky1" type="radio" value="2">Položka 2 <br>
 <input name="polozky1" type="radio" value="3">Položka 3 <br>
 <input name="polozky1" type="radio" value="4">Položka 4 <br>

 <input name="moznosti[]" type="checkbox" value="0" checked="checked">Možnost 0 <br>
 <input name="moznosti[]" type="checkbox" value="1">Možnost 1 <br>
 <input name="moznosti[]" type="checkbox" value="2">Možnost 2 <br>
 <input name="moznosti[]" type="checkbox" value="3">Možnost 3 <br>
 <input name="moznosti[]" type="checkbox" value="4">Možnost 4 <br>

 <input name="soubor" type="file">   

 <select name="volby[]" size="2" multiple>
 <option value="1">hodnota 1</option> 
 <option value="2">hodnota 2</option>
 <option value="3">hodnota 3</option>
 <option value="4">hodnota 4</option>
 <option value="5">hodnota 5</option>
 </select> <br /> <br /> <br /> <br /> <br />
 <select name="vyber">
 <option value="1">hodnota 1</option>
 <option value="2">hodnota 2</option>
 <option value="3">hodnota 3</option>
 <option value="4">hodnota 4</option>
 <option value="5">hodnota 5</option>
 </select>

<select name="os">
 <optgroup label="ms-dos">
 <option label="3.3" value="dos3.3">MS-DOS 3.3</option>
 <option label="4.0" value="dos4.0">MS-DOS 4.0</option>
 <option label="5.0" value="dos5.0">MS-DOS 5.0</option>
 <option label="6.22" value="dos6.22">MS-DOS 6.22</option>
 </optgroup>
 <optgroup label="windows">
 <option label="3.1" value="win3.1">windows 3.1</option>
 <option label="95" value="win95">windows 95</option>
 <option label="98" value="win98">windows 98</option>
 </optgroup>
 <optgroup label="windows NT"></option>
 <option label="3.51" value="nt3.51">windows NT 3.51</option>
 <option label="4.0 Enterprise Edition" value="nt4.0EE">windows NT 4.0 Enterprise studio</option>
 <option label="4.0 Server" value="nt4.0SRV">windows NT server</option>
 <option label="4.0 worksttion" value="nt4.0WKS">windows NT 4.0 Workstation</option>
 </optgroup>
 </select>

 <textarea name="text" rows="5" cols="25">Text...................
 </textarea>

<fieldset>
<legend>Health information:</legend>
Height <input type="text" size="3" />
Weight <input type="text" size="3" />
</fieldset>

css