Tvorba webových stránek – formuláře Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Jihlava Šablona 32 VY_32_INOVACE_035.ICT.34 Tvorba webových stránek – formuláře

OA a JŠ Jihlava, VY_32_INOVACE_035.ICT.34 Číslo projektu: CZ.1.07/1.5.00/34.0744 Šablona: VY_32_INOVACE Číslo DUMU: 035.ICT.34 Předmět: Informační technologie Název materiálu: Tvorba webových stránek – formuláře Autor: Jaroslav Fišer Formát: Prezentace Microsoft PowerPoint  Velikost: 286 kB Stupeň a typ vzdělávání: SŠ – odborné vzdělávání Licence k obrazovému materiálu: CC BY Datum vytvoření: 14. 10. 2013 Klíčová slova: HTML, PHP, formulář, www, web, internet Anotace: Úvod do tvorby formuláře a jeho zpracování pomocí PHP scriptu. OA a JŠ Jihlava, VY_32_INOVACE_035.ICT.34

Tvorba webových stránek – formuláře Formulář je jednou ze základních struktur HTML. Formuláře se na stránkách používají pro různé ankety, dotazníky, soutěže, přihlášky apod. Pro zpracování dat z formuláře se používají většinou scripty v některém z programovacích jazyků, pro naše účely využijeme PHP script. Při tvorbě formulářů se používají pouze čtyři tagy <form> <input> <select> <textarea> Párový tag <form> uvozuje začátek formuláře. Konec formuláře je označen jako </form>. Nepárový tag <input> vytváří přímo na stránce elementy, na které uživatel přímo reaguje - například textové pole, zaškrtávací políčko, přepínač , odesílací tlačítko. Párový tag <textarea> </textarea> je párovým tagem určeným pro zadávání většího množství textu Párový tag <select> </select>slouží k vytvoření roletového menu. Klasický, jednoduchý formulář, může vypadat například takto: <input type="text"> <input type="submit"> </form> OA a JŠ Jihlava, VY_32_INOVACE_035.ICT.34

Tvorba webových stránek – formuláře Příklady použití vstupní políčko, řádek pro psaní textu - text <input type="text" name="jméno" size=50 maxlength=30 value=" text" > <input type="password" name="heslo" > zaškrtávací políčko - checkbox <input type="checkbox" name="pole" value="Ano"> Souhlasíte? přepínač - radiobox <input type="radio" name="jazyk" value="anj"> anglicý jazyk, <input type="radio" name="jazyk" value="nej"> německý jazyk, <input type="radio" name="jazyk" value="frj"> francouzský jazyk tlačítka - submit, reset, button <input type="SUBMIT" name="OK" value="OK"> - tlačítko pro odeslání formuláře <input type="RESET" name="CLEAR" value="Vymazat"> - tlačítko pro vymazání formuláře <input type="button" value="text tlačítka"> - obecné tlačítko používané třeba pro spuštění scriptů OA a JŠ Jihlava, VY_32_INOVACE_035.ICT.34

Tvorba webových stránek – formuláře Příklady použití rozvinovací seznam - combobox <select name="nakup"> <option> Windows 7 <option> Windows 8 <option> Windows Server 2008 <option>Windows Server 2012 </select> textové okno, pro editaci delšího textu - textarea <textarea name=text cols=40 rows=6>zde zapiš delší text</textarea> Poznámka: tlačítkem může být i obrázek <button name="button" type="reset"><img src="stop.gif"> </button> OA a JŠ Jihlava, VY_32_INOVACE_035.ICT.34

Tvorba webových stránek – formuláře OA a JŠ Jihlava, VY_32_INOVACE_035.ICT.34

Tvorba webových stránek – formuláře OA a JŠ Jihlava, VY_32_INOVACE_035.ICT.34

Tvorba webových stránek – formuláře Úkol 1. Ve svém website (M:\www_xppppppj\priklad) vytvořte soubor prik35_1.htm Do souboru prik35_1.htm zapište HTML kód dle předchozího snímku (snímek č. 6). Prozkoumejte zobrazení Source a Design ve Visual Studiu. Inspiraci pro úkol 1 hledej zde : http://www.jafi3.php5.cz/priklad/prik35_1.htm - zobrazit zdrojový kód Úkol 2. Ve svém website (M:\www_xppppppj\priklad) vytvořte soubor prik35_2.php Doplňte kód PHP dle předchozího snímku (snímek č. 7). Soubor prik35_2.php zkopírujte na své webové sídlo na serveru php5.cz ..\priklad Inspiraci pro úkol 2 hledej zde: http://www.jafi3.php5.cz/priklad/prik35_2.htm - zobrazit zdrojový kód http://www.jafi3.php5.cz/priklad/prik35_2.php - zobrazit zdrojový kód Poznámka: Pro zápis kódu prik35_1.htm, prik35_2.htm a prik35_2.php použij MS Visual Sudio. Zamysli se nad zobrazením těchto souborů v MS Visual Studiu. Slovně popiš a vyřeš problém se zobrazením kódu v Source a Design zobrazení v MS Visual Studiu. OA a JŠ Jihlava, VY_32_INOVACE_035.ICT.34

Tvorba webových stránek – formuláře Doporučené odkazy: http://jafi3.php5.cz http://jafi3.php5.cz je výukový web autora DUMu http://www.jakpsatweb.cz Doporučená literatura: P. Roubal, Informatika a výpočetní technika pro střední školy - Praktická učebnice Použité zdroje: Veškerý obsah včetně obrázků je dílem autora. OA a JŠ Jihlava, VY_32_INOVACE_035.ICT.34