7. Formuláře

Značka <FORM>

V poslední době nabyly formuláře značného významu. Párová značka <FORM> slouží k ohraničení formuláře. Má několik atributů, z nichž si uveďme jen ty, které budeme používat:
viz skripta

Značka <INPUT>

Nepárová značka <INPUT> vytváří prvek určený pro vstup údajů. Má několik atributů, z nichž si uveďme ty nejpoužívanější:

• type – specifikuje typ vstupního prvku, může nabývat hodnot:

  text

  Textové políčko určené k vyplnění. Hodnota atributu size určuje délku zobrazeného políčka ve znacích, hodnota atributu maxlength pak maximální počet znaků, které lze do políčka zadat. Hodnotou atributu value lze do políčka zobrazit počáteční text, který může uživatel použít, doplnit či přepsat. Je-li uveden atribut readonly, pak obsah tohoto políčka je určen pouze ke čtení a může jej modifikovat pouze skript.

  password

  Textové políčko, jehož text není zobrazován (místo textu se píší pouze hvězdičky). Je-li hodnotou atributu value uveden nějaký implicitní text, pak i tento je zobrazen jako hvězdičky.

  button

  Jednoduché tlačítko, s jehož stiskem může být spojena skriptem definovaná akce. Hodnota atributu value specifikuje text napsaný na tlačítku. Délka zadaného textu udává šířku tlačítka.

  image

  Tlačítko s obrázkem, jehož URL je specifikováno hodnotou atributu src.

  checkbox

  Jednoduchý element určený k zatržení (zatržítko). Opakovaným kliknutím myší do tohoto políčka měníme jeho hodnotu. Je-li uveden atribut checked, pak je toto políčko implicitně zatrženo.

  radio

  Přepínací tlačítko obdobné typu checkbox s tím rozdílem, že u série těchto tlačítek může být stisknuté pouze jedno. Příslušnost k sérii tlačítek je určena hodnotou atributu name.

  hidden

  Speciální typ vstupního elementu, který se nezobrazí, atributem value lze však ovlivňovat jeho hodnotu.

  reset

  Tlačítko pro nastavení počátečních hodnot formuláře.

  submit

  Tlačítko pro odeslání dat vyplněného formuláře.

  
  
• name – symbolické jméno daného elementu,
• value – pro textové prvky nastavuje počáteční hodnotu, u prvků typu checkbox či radio vrací hodnotu, kterou uživatel zvolí,
• size – velikost zobrazeného prvku ve znacích, resp. v pixelech,
• maxlength – maximální povolený počet znaků ve vstupním poli,
• src – pro typ image udává URL použitého obrázku.

Příklad 7.1

<FORM name="form1">
  <INPUT type="text" name="textpole1" size="10">
  vstupní pole 1<BR>
  <INPUT type="text" name="textpole2" size="10" maxlength="15">
  vstupní pole 2<BR>
  <INPUT type="text" name="textpole3" size="10" value="abcd">
  vstupní pole 3<BR>
  <INPUT type="password" name="textpole4" size="10" maxlength="15">
  vstupní pole 4<BR>
  <INPUT type="password" name="textpole5" size="10" maxlength="15" value="heslo">
  vstupní pole 5<BR>
</FORM>

Vytvořili jsme formulář se jménem form1, který sestává z pěti vstupních prvků. Typ jednotlivých prvků je určen hodnotou atributu type. Všechny prvky mají velikost 10 znaků určenou hodnotou atributu size. Prvním prvkem je textové pole pojmenované textpole1. Počet znaků, které můžeme napsat není omezen. Ve druhém textovém poli s názvem textpole2 jsme omezili počet znaků, které lze do vstupního pole napsat, na 15. Třetí textové pole textpole3 má nastavenu počáteční hodnotu abcd atributem value. Čtvrtý vstupní prvek typu password s pojmenováním textpole4 místo každého napsaného znaku zobrazí hvězdičku. Maximálně lze napsat 15 znaků. Poslední prvek textpole5 má již přednastavenu hodnotu heslo.

Příklad 7.2

<FORM name="form2">
  <INPUT type="button" name="tlac1" value="OK"><BR>
  <INPUT type="button" name="tlac2" value="  OK  "><BR>
  <INPUT type="button" name="tlac3" value="abcd"><BR>
  <INPUT type="button" name="tlac4" value="ABCD"><BR>
</FORM>

Vytvořili jsme formulář form2, který má celkem čtyři prvky typu button, každý umístěný na samostatném řádku v důsledku opakovaného užití značky <BR>. Šířka druhého tlačítka byla uměle zvětšena přidáním mezer do řetězce udávajícího popis tlačítka. Přestože popisky třetího a čtvrtého tlačítka mají stejný počet znaků, tlačítka mají různou šířku v důsledku užití proporcionálního písma k popisu tlačítek. Vidíme, že zarovnání tlačítek a dalších vstupních prvků formuláře do pravoúhlé struktury je velice pracné, a proto si v dalším příkladě ukážeme, jak využít pro zarovnání prvků formuláře tabulku.

Příklad 7.3

<FORM name="form3">
  <TABLE>
    <TR>
      <TD>Jméno:
      <TD><INPUT type="text" name="jmeno" size="20">
    <TR>
      <TD>Příjmení:
      <TD><INPUT type="text" name="prijmeni" size="20">
    <TR>
      <TD>E-mail:
      <TD><INPUT type="text" name="email" size="25"
                 value="student@mail.fce.vutbr.cz">
    <TR>
      <TD>Heslo:
      <TD><INPUT type="password" name="heslo" size="10">
  </TABLE>
</FORM>

Formulář form3 obsahuje celkem čtyři vstupní prvky, které tvoří buňky druhého sloupce tabulky. Bližšího vysvětlení snad není ani třeba.

Příklad 7.4

<FORM name="form4">
  <B>Vyberte si nápoj:</B><BR>
  <INPUT type="radio" name="napoj" value="kava"> kávu<BR>
  <INPUT type="radio" name="napoj" value="caj"> čaj<BR>
  <B>Kolik cukru:</B><BR>
  <INPUT type="radio" name="cukr" value="0"> bez cukru<BR>
  <INPUT type="radio" name="cukr" value="2" checked> normálně<BR>
  <INPUT type="radio" name="cukr" value="5"> hodně<BR>
  <B>Přidat:</B><BR>
  <INPUT type="checkbox" name="prisada" value="mleko"> mléko<BR>
  <INPUT type="checkbox" name="prisada" value="slehacka"> šlehačku<BR>
  <INPUT type="checkbox" name="prisada" value="rum"> rum<BR>
</FORM>

První dva vstupní prvky formuláře slouží k výběru nápoje a patří tedy do skupiny pojmenované napoj. Další tříprvková skupina pojmenovaná cukr má přítomností atributu checked přednastavenu volbu normálně. Jak v první, tak i v druhé skupině prvků typu radio se jednotlivé volby navzájem vylučují. Následují tři zatrhávací políčka typu checkbox patřící do skupiny s názvem prisada. Výskyt několika voleb současně je v této skupině povolen.

Značka <TEXTAREA>

Párová značka <TEXTAREA> vytváří větší oblast pro zadávání textu. Má následující atributy:

cols

Udává počet sloupců, tj. šířku oblasti ve znacích.

rows

Udává počet řádků oblasti.

name

Specifikuje jméno textové oblasti.

wrap

Určuje způsob zalomení textu při zadávání delších řádků než je šířka textové obasti. Hodnota off určuje, že se text nebude zalamovat a bude přesahovat délku řádku. Hodnota virtual text automaticky zalamuje, jakmile se při psaní překročí délka řádku. Při odeslání je však řádek poslán jako nezalomený. Skutečné zalomení lze provést klávesou ENTER. Hodnota physical způsobuje stejné chování jako virtual s tím rozdílem, že uměle zalomené řádky jsou odeslány se znaky ukončení řádku, tedy jako skutečně zalomené.

readonly

Text v zobrazené oblasti nebude možno modifikovat.

Pokud mezi otevírací a uzavírací značku textové oblasti uvedeme nějaký text, tak se zobrazí v dané textové oblasti. Je přípustné pouze zobrazení čistého ASCII textu bez formátovacích příkazů. Respektují se konce řádků a bílá místa.

Příklad 7.5

<FORM name="form5">
  <TEXTAREA name="textoblast1" rows="5" cols="40"
            wrap="off">Text</TEXTAREA><BR><BR>
  <TEXTAREA name="textoblast2" rows="5" cols="40"
            wrap="virtual"></TEXTAREA>
</FORM>

Značka <SELECT>

Párová značka <SELECT> vytváří roletku obsahující uvedené položky. Její struktura je následující:

  <SELECT name="jmeno" multiple>
    <OPTION>Položka 1
    <OPTION>Položka 2
    <OPTION>Položka 3
  </SELECT>

Význam atributu name již známe, přítomnost atributu multiple povoluje výběr více položek seznamu současně (přidržením klávesy CTRL nebo SHIFT). Dále je možné hodnotou atributu size specifikovat počet fyzicky viditelných voleb v okamžiku zobrazení formuláře. Implicitní hodnota je samozřejmě rovna jedné. Značka <OPTION> pak uvozuje jednotlivé položky seznamu.

Příklad 7.6

<FORM name="form6">
  <SELECT name="roletka1">
    <OPTION value="p1">Položka 1
    <OPTION value="p2">Položka 2
    <OPTION value="p3">Položka 3
  </SELECT>
</FORM>

Příklad 7.7

Nyní vytvoříme formulář, který nám umožní odeslat vyplněný obsah na určenou e-mailovou adresu.

<FORM name="posta" method="post" action="mailto:xyz@fce.vutbr.cz"
      enctype="text/plain">

  <INPUT type="hidden" name="odkud" value="z me webove stranky">

  <B>Vaše jméno:</B><BR>
  <INPUT type="text" name="jmeno" size="30">

  <B>Pohlaví:</B>
  <INPUT type="radio" name="pohlavi" value="muz">muž
  <INPUT type="radio" name="pohlavi" value="zena">žena<BR><BR>

  <B>Vaše e-mailová adresa:</B><BR>
  <INPUT type="text" name="email" size="30">

  <B>Povolání:</B>
  <SELECT name="povolani">
    <OPTION value="student">student
    <OPTION value="pracujici">pracující
    <OPTION value="duchodce">důchodce
  </SELECT><BR><BR>

  <B>Vaše znalosti:</B><BR>
  <INPUT type="checkbox" name="znalosti" value="HTML">HTML<BR>
  <INPUT type="checkbox" name="znalosti" value="JS">JavaScript<BR>
  <INPUT type="checkbox" name="znalosti" value="Java">Java<BR>
  <INPUT type="checkbox" name="znalosti" value="ASP">ASP<BR>
  <INPUT type="checkbox" name="znalosti" value="PHP">PHP<BR><BR>

  <B>Text zprávy:</B><BR>
  <TEXTAREA name="zprava" rows="5" cols="60"></TEXTAREA>
  <BR><BR>

  <INPUT type="submit" value="Odeslat">

  <INPUT type="reset"  value="Smazat">

</FORM>

Pokud uživatel vyplní tento formulář a stiskne tlačítko odeslat, příjemce s e-mailovou adresou xyz@fce.vutbr.cz obdrží zprávu, jejíž tělo může obsahovat např. následující text:

  odkud=z me webove stranky
  jmeno=Michal Vojkůvka
  pohlavi=muz
  email=voj@fce.vutbr.cz
  povolani=pracujici
  znalosti=HTML
  znalosti=ASP
  zprava=Dnes je pěkné počasí.

Malá rekapitulace

<FORM name="formular">

  <INPUT type="text" name="cislo" size="10">

  <INPUT type="text" name="jmeno" size="15"
         maxlength="20" value="student">

  <INPUT type="text" name="vystup" size="15"
         maxlength="20" value="pouze pro čtení" readonly>

  <INPUT type="password" name="heslo" size="10"
         maxlength="15">

  <INPUT type="button" name="tlacitko" value="Výpočet">

  <INPUT type="checkbox" name="pecivo" value="rohlik">
  křupavý rohlík<BR>
  <INPUT type="checkbox" name="pecivo" value="chleb">
  čerstvý chléb<BR>
  <INPUT type="checkbox" name="pecivo" value="preclik">
  solený preclík<BR>

  <INPUT type="radio" name="platba" value="sek" checked>
  šek<BR>
  <INPUT type="radio" name="platba" value="karta">
  karta<BR>
  <INPUT type="radio" name="platba" value="hotovost">
  hotovost<BR>

  <SELECT name="barva">
    <OPTION value="cervena">červená
    <OPTION value="zelena">zelená
    <OPTION value="modra">modrá
  </SELECT>

  <TEXTAREA name="textpole" cols="20" rows="3">
  komentář</TEXTAREA>

  <INPUT type="reset" value="Vynulovat">

  <INPUT type="submit" value="Odeslat">

</FORM>

1. Označte myší zdrojový text libovolné ukázky.
2. Vybraný text zkopírujte do clipboardu.
3. Klikněte myší do textového pole uvedeného níže a text sem z clipboardu vložte.
4. Zdrojový text můžete libovolně upravit.
5. Poté klikněte na tlačítko Ukázat. V okně náhledu se vám zobrazí dokument, jehož zdrojový text byl zapsán v textovém poli.
6. Pokud je třeba, aby se dokument otevřel v novém okně, stačí kliknout na tlačítko Ukázat v novém okně.
7. Tlačítkem Vybrat vše se označí veškerý text zapsaný v textovém poli.
8. Tlačítkem Smazat můžete obsah celého textového pole vymazat.

Náhled: