Pro výukové účely na SPŠ Zlín
vytvořil RNDr.Vladimír Vaščák

Formuláře

  1. Příklad jednoduchého formuláře
  2. Značka <form>
  3. Značka <input>
  4. Značka <input type="checkbox>
  5. Značka <input type="radio>
  6. Značka <input type="file>
  7. Značka <input type="image>
  8. Značka <input type="button>
  9. Značka <input type="reset>
  10. Značka <input type="submit>
  11. Značka button
  12. Značka textarea
  13. Značka select
  14. Značka option
  15. Značka optgroup
  16. Značka label
  17. Značka fieldset
  18. Značka legend

7. Značka <input type="image>

Tlačítko s obrázkem.
Zápis:
<form action="formular3.php" method="post" name="formular">
    <input name="jmenotext" type="text" value="napiste neco"><hr>
    <input name="jmenoimage" type="image" value="obrázek" src="svet.gif"><hr>
</form>
Se zobrazí jako:

Po kliknutí na obrázek se zpracuje skript PHP:
<?php
    $jmenotext = $_POST["jmenotext"];
    echo $jmenotext."<br>";
    $souradniceX = $_POST["jmenoimage_x"];
    $souradniceY = $_POST["jmenoimage_y"];
    echo "x = ".$souradniceX."<br>";
    echo "y = ".$souradniceY;
?>
Kromě textu budou také odeslány souřadnice kliknutí na obrázek. (ty můžeme ve skriptu dále zpracovat)
Atributy Povinné Nepovinné Popis
accesskey   ano klávesová zkratka např. accesskey="K"
align   ano zarovnání obrázku ( left, right, top, middle, bottom )
alt   ano alternativní text
border   ano okraj obrázku
disabled   ano zablokovaný prvek nedá se vybrat, nelze editovat a data se neposílají
name ano   název prvku potřebný ke zpracování odeslaných dat
notab   ano nelze se dostat na prvek klávesou TAB, stejné jako tabindex=0
onClick   ano při kliknutí na prvek
src ano   zdroj obrázku
tabindex   ano pořádí prvku pro klávesu TAB
taborder   ano stejné jako tabindex
usemap   ano klikací mapa obrázku

8. Značka <input type="button>

Tlačítko vhodné ve spojení s JavaSkriptem..
Zápis:
<form action="formular3.php" method="post" name="formularskript">
    <input name="jmenotext" type="text" value="napiste neco"><hr>
    <input name="jmenobutton" type="button" value="Klikni" onClick="NapisHlaseni()"><hr>
</form>
JavaScript v záhlaví:
<script language="javascript">
<!--
function NapisHlaseni() {
    document.formularskript.jmenotext.value = "Klikl jsem."
}

//-->
</script>
Se zobrazí jako:
Atributy Povinné Nepovinné Popis
accesskey   ano klávesová zkratka např. accesskey="K"
disabled   ano zablokovaný prvek nedá se vybrat, nelze editovat a data se neposílají
name ano   název prvku potřebný ke zpracování odeslaných dat
notab   ano nelze se dostat na prvek klávesou TAB, stejné jako tabindex=0
onBlur   ano při deaktivaci prvku
onClick   ano při kliknutí na prvek
onFocus   ano při aktivaci prvku
tabindex   ano pořádí prvku pro klávesu TAB
taborder   ano stejné jako tabindex
value ano   odesílaná hodnota prvku

9. Značka <input type="reset>

Nulovací tlačítko.

10. Značka <input type="submit>

Odesílací tlačítko.
Zápis:
<form action="formular4.php" method="post" name="formular">
    <input name="jmenotext" type="text" value="napiste neco">
    <input name="jmenoreset" type="reset">
    <input name="jmenosubmit" type="submit" value="poslat něco">
    <input name="jmenosubmit" type="submit" value="poslat něco jiného">
    <input name="jmenosubmit" type="submit" value="poslat něco úplně jiného">
</form>
Se zobrazí jako:
Tlačítko reset nastaví původní hodnoty, tlačítka submit odesílá hodnoty (všiměte si, že mají stejný atribut name ).

Atributy Povinné Nepovinné Popis
accesskey   ano klávesová zkratka např. accesskey="K"
disabled   ano zablokovaný prvek nedá se vybrat, nelze editovat a data se neposílají
name submit ano
reset ne
  název prvku potřebný ke zpracování odeslaných dat
notab   ano nelze se dostat na prvek klávesou TAB, stejné jako tabindex=0
onClick   ano při kliknutí na prvek
tabindex   ano pořádí prvku pro klávesu TAB
taborder   ano stejné jako tabindex
value   ano odesílaná hodnota prvku

zpět vpřed
© 2007 Pro výuku na SPŠ Zlín připravil RNDr. Vladimír Vaščák