Po delší časové odmlce je tu nová lekce kurzu HTML. Tentokrát na téma Formuláře...
Obsah:
Formuláře
Pokud potřebujete získat nějaké údaje od návštěvníků vašich stránek, budete potřebovat formulář. Využívají se například při registracích, anketách,
přihlašováních.
Základy
Nejzákladnější formulář může vypadat takhle:
Kód:
<form>
Text:<input type="text" size="20">
<input type="button" value="Odešli">
</form>
Základní tagy:
- form - párový tag, který začíná a ukončuje formulář
- action="" - URL skriptu odesílajícího formulář
- method="GET/POST" - metoda předávání výsledků
- target=""* - cílový rám (tzn., kam se po odeslání otevře)
- enctype="" - typ kódování
- * - nepovinné
- input - nepárový tag, prvek formuláře
- type="název prvku" - určí jak bude prvek vypadat
- value="" - předdefinováný text nebo popisek
- name="" - jméno prvku (je potřeba při odeslání přes PHP)
- size="" - velikost prvku (šířka)
- maxlenght="" - maximální počet znaků (např. textové pole)
- alt="" - alternativní text = popisek (jako u obrázku)
- src="" - adresa obrázku u image
- disabled - prvek nebude dostupný (pozor nemá hodnotu!!)
- readonly - nelze psát do prvku (např. text)
- checked - vybráno, jen u checkbox a radio!
| input type="" | Ukázka | Informace |
| text | pro zápis textu | |
| button | tlačítko | |
| password | zápis hesla *** | |
| submit | odesílací tlačítko | |
| reset | vymaže všechny údaje z formuláře | |
| checkbox | zaškrtávací políčko | |
| radio | opět, ale na formuláři se dá zaškrtnout jen jeden | |
| file | vybrání souboru (např. pro odeslání) | |
| hidden | skryté pole | |
| image | obrázek |
| Zvláštnosti | Ukázka | Informace | Kód |
| textarea | textové pole s více řádky | <textarea rows="počet řádků"></textarea> | |
| select | roletkový seznam | podrobnosti níže | |
| fieldset | orámečkovaná skupina polí s nadpisem | podrobnosti níže |
! Pozor, tag select je PÁROVÝ !
Ukázka selectu (počet řádků záleží na vaší volbě):
Kód:
<select name="jmeno selectu" size="pocet radku">
<option value="html">HTML
<option value="css">CSS
<option value="xhtml">XHTML
<select>
Pokud ale potřebujete, aby se dalo vybrat více položek (pomocí Ctrl), stačí přidat k select parametr multiple.
<select name="jmeno selectu" size="pocet radku" multiple>
<option value="html">HTML
<option value="css">CSS
<option value="xhtml">XHTML
<select>
Ukázka:
Šířka fieldsetu je standardně 100% a je potřeba to upravit buď stylem nebo ho dejte do tabulky!
Kód:
<fieldset>
<legend>nadpis skupiny</legend>
Jméno <input size="10"><br>
Přímení <input size="10"><br;><br>
Email <input size="10">
</fieldset>
<legend> MUSÍ být ihned za <fieldset>!
Odeslání formuláře
Největším problémem u formulářů je jejich odeslání. Existuje víc možností, jak údaje odeslat:- jednoduše
Prostě napíšete tohle:
<form action="mailto:vas@email.cz" method="post" enctype="text/plain">To je ale velmi nespolehlivé, protože tahle možnost využívá poštovní program čtenáře a ten nemusí být správně nastaven, takže vám nic nepřijde.
- mailform
Navštivte některou z těchto adres a tam najdete to, co hledáte:
Blueboard.cz [ http://www.blueboard.cz ]
Mailform.cz [ http://www.mailform.cz ] - přes hosting
Buď se zeptejte na podpoře nebo prohlídněte FAQ (často kladené otázky) a tam to najdete.
Úkol
- Vytvořte formulář na odeslání dotazníku, který by se dal použít k nějaké registraci. Odesílání neřešte.