2018-06-28

Vytváření HTML formulářů

Dobrý den, milý návštěvníku!

V předchozích částech jsme vytvořili hlavní prvky webu a zvážili také problémy související s plněním obsahu. A nyní můžeme přejít k dalšímu poměrně důležitému a rozsáhlému tématu – práci s HTML formuláři.

Formuláře HTML jsou nejdůležitějšími prvky interakce, které definují interaktivní část webové stránky. Bez kterého se žádný plnohodnotný web neobejde. Koneckonců, s jejich pomocí se provádí hlavní výměna mezi uživatelem a serverem.

Ale zároveň jsou formuláře poměrně složité prvky rozhraní s širokou škálou funkčních komponent a textových polí. Proto se v této části pokusíme podrobněji zvážit jeho hlavní prvky a věnovat zvláštní pozornost jejich praktickému použití na vytvářeném webu.

Navíc zde bude ovlivněna i problematika práce s databází MySQL. Protože použití formulářů v našich příkladech bude neoddělitelně spojeno s jejich interakcí s databázovými tabulkami. Ve kterém budou uloženy údaje zadané uživateli, které server později použije při zpracování požadavků.

• O HTML formulářích obecně
• online objednávkový formulář
• Autorizační formulář
• formulář zpětné vazby

O HTML formulářích obecně

Formulář na webové stránce je nastaven prvkem bloku , což je kontejner, který zahrnuje všechny prvky zodpovědné za zpracování vstupu, jako např , , nebo .</p> <p>Zároveň tag <form>Existuje několik atributů, ale dva z nich jsou povinné. Toto je „akce“, která obsahuje adresu, která určuje, kam bude formulář odeslán, a „metodu“, která určuje způsob (POST nebo GET), jakým bude odeslán.</p> <p>Pokud jde o jeho prvky, nejuniverzálnější je štítek <input>prostřednictvím kterého se přenáší většina informací a vznikají různé prvky rozhraní. Typ vstupních polí je navíc určen jejich hlavním atributem „type“, jehož hodnota určuje jejich funkční účel.</p> <p>Pokud je tedy hodnota "text" - textové pole, "password" - pole pro heslo, "email" - pole pro zadání e-mailové adresy, "radio" - přepínač, "checkbox" - zaškrtávací políčko, "submit" - tlačítko pro odeslání formuláře.</p> <p>Níže je uveden příklad použití prvku <input>pro různé typy oborů.</p> <ol><p><form name =<b>"příklad"</b> akce= <b>"#" </b> metoda = <b>"pošta"</b> ></p> <p><input type =<b>"text"</b> jméno= <b>"přihlásit se"</b> ></p> <p><input type =<b>"e-mailem"</b> jméno= <b>"e-mailem"</b> ></p> <p><input type =<b>"Heslo"</b> jméno= <b>"Heslo"</b> ></p> <p><input type =<b>"Předložit"</b> jméno= <b>"knoflík"</b> hodnota = <b>"Poslat"</b> ></p> <li> </ol><p>Obr.1 Příklad HTML formuláře</p> <p>V tomto příkladu to vidíte pro prvek <input>v závislosti na hodnotě atributu "type" může mít pole různou podobu. Například v prvním prvku (poz.2) je pole určeno pro zadání textových informací (v tomto případě pro přihlášení). V další (poz.3) - pro zadání e-mailu, dále (poz.4) - pro heslo a v poslední (poz.5) - tlačítko pro odeslání formuláře.</p> <p>Samozřejmě se jedná o zjednodušený příklad, který většinou používá povinné atributy. Ve skutečnosti se obvykle používají jiné, které určují vlastnosti polí.</p> <p>Každý prvek má svůj vlastní seznam atributů. Nemá cenu je zde všechny vypisovat, protože jich je poměrně hodně a tyto informace je nejlepší převzít z referenční literatury HTML speciálně navržené pro tento účel.</p> <p>Na internetu je velké množství důvěryhodných odkazů na HTML. Jak jsem již zmínil, pro tyto účely můžete například použít referenční knihu WebReference.ru o webových technologiích, jejíž jedna z částí je věnována podrobnému popisu všech prvků dostupných v HTML5.</p> <p>snímek obrazovky 33</p> <p>Zde prakticky vytvoříme formuláře pro budování funkčních uzlů našeho webu. A budeme se snažit co nejvíce využívat různé prvky s různými atributy.</p> <h2><i>online objednávkový formulář</i></h2> <p>Vytvářená stránka umožňuje zadání objednávky na instalaci označení proti krádeži na autoskla. Chcete-li to provést, musíte zadat údaje o vozidle a vybrat způsob označení. Poté by měla být uživateli na základě zadaných údajů poskytnuta informace o ceně díla. Navíc jak plné náklady, tak kalkulované s přihlédnutím ke slevám.</p> <p>Odpovídající verze online objednávkového formuláře, kterou vytvoříme, je uvedena na následujícím snímku obrazovky.</p> <br><img src='https://i0.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-onlajn-zakaza.jpg' width="100%" loading=lazy loading=lazy><p>Obr.2 Online objednávkový formulář</p> <p>Zde budou použity následující prvky:</p> <ul><li><input>s textovým vstupním polem;</li> <li><select>;</li> <li><option>.</li> </ul><p>Registrační formulář použitý na vytvořeném webu je spojen s online objednávkou. To je způsobeno skutečností, že v tomto případě je osobní účet uživatele navržen tak, aby zobrazoval stav provedených objednávek a zadávání nových. Proto je u této možnosti celkem logické se registrovat současně s provedením první objednávky.</p> <p>Následující text ukazuje, jak má být tato funkční část vytvořena.</p> <p>Chcete-li zvětšit / zmenšit velikost obrázku, klikněte na obrázek</p> <br><img src='https://i1.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-registracii.jpg' width="100%" loading=lazy loading=lazy><p>Obr.3 registrační formulář</p> <p>Položky, které mají být zahrnuty do této možnosti:</p> <ul><li><label>;</li> <li><input>s textovým vstupním polem;</li> <li><input>se vstupním polem pro e-mail;</li> <li><input>s polem pro zadání hesla;</li> <li><input>s tlačítkem pro odeslání formuláře (v kombinaci s online objednávkovým formulářem).</li> </ul><h2><i>Autorizační formulář</i></h2> <p>Pro vstup do vašeho osobního účtu je vyžadována autorizace. Obvykle se takový formulář skládá ze vstupních polí pro přihlašovací jméno, heslo a tlačítko pro jeho odeslání. K obnovení přihlašovacích údajů se často používají také další odkazy jako: „Zapomněli jste přihlašovací údaje?“, „Zapomněli jste heslo?“.</p> <p>Navzdory skutečnosti, že takové další odkazy jsou obvykle umístěny společně s prvky registračního formuláře, ale ve skutečnosti nepatří k jeho prvkům.</p> <p>Níže je obecný pohled na uživatelský panel s autorizačními prvky.</p> <p>Chcete-li zvětšit / zmenšit velikost obrázku, klikněte na obrázek</p> <br><img src='https://i0.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-avtorizacii.jpg' width="100%" loading=lazy loading=lazy> <p>V tomto případě budou použity následující prvky:</p> <ul><li><label>;</li> <li><input>s textovým vstupním polem;</li> <li><input>s polem pro zadání hesla;</li> <li><input> </li> </ul><h2><i>formulář zpětné vazby</i></h2> <p>Samotný název této formy vypovídá o jejím účelu. Proto by zde měla být všechna potřebná pole pro odeslání zprávy. V tomto případě se bude skládat ze čtyř polí: dvou pro zadání jména a emailové adresy odesílatele a dvou pro odeslání samotné zprávy.</p> <p>Vzhled takového formuláře je znázorněn na následujícím snímku obrazovky.</p> <p>Chcete-li zvětšit / zmenšit velikost obrázku, klikněte na obrázek</p> <br><img src='https://i1.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-obratnoj-svyazi.jpg' width="100%" loading=lazy loading=lazy><p>Obr.5 Formulář zpětné vazby</p> <p>Zde by měl být kromě již použitých prvků přidán ještě jeden ( <textarea>), pomocí kterého můžete do pole zadat více řádků textu. A celý seznam pro tuto možnost bude mít následující podobu:</p> <ul><li><label>;</li> <li><input>s textovým vstupním polem;</li> <li><input>se vstupním polem pro e-mail;</li> <li><textarea>s oblastí, do které můžete zadat více řádků textu.</li> <li><input>s tlačítkem pro odeslání formuláře.</li> </ul><p>V tomto v podstatě úvodním článku jsme se tedy zabývali některými běžnými problémy souvisejícími s formuláři HTML. A rozhodli jsme se, s jakými konkrétními příklady budeme v budoucnu pracovat.</p> <p>Poté můžeme přejít k praktické tvorbě formulářů, skládání potřebného kódu pro každý případ a popisu jejich interakce s odpovídajícími tabulkami MySQL. Ale o tom až v dalších článcích.</p> <p>S pozdravem Nikolai Grishin</p> <ul><li>Další článek:</li></ul> <p>V procesu procházení stránek uživatel v podstatě pouze kliká <b>Odkazy</b> k procházení webových stránek.</p><p>Je ale jasné, že uživatel si občas potřebuje poskytnout vlastní <b>vstupní pole</b>. Mezi tyto typy interakcí patří:</p><ul><li>registrace a přihlášení na stránkách;</li><li>zadání osobních údajů (jméno, adresa, údaje o kreditní kartě atd.);</li><li>filtrování obsahu (pomocí rozevíracích seznamů, zaškrtávacích políček atd.);</li><li>provedení vyhledávání;</li><li>nahrání souboru.</li> </ul><p>K uspokojení těchto potřeb nabízí HTML interaktivní <b>řízení</b> formuláře:</p><ul><li>textová pole (pro jeden nebo více řádků);</li><li>spínače;</li><li>vlajky;</li><li>rozevírací seznamy;</li><li>widgety ke stažení;</li><li>tlačítka odeslat.</li> </ul><p>Tyto kontroly zahrnují různé <b>značky</b> HTML, ale většina z nich používá značku <input>. Protože se jedná o samouzavírací prvek, typ pole je určen jeho atributem type:</p><p> <!-- Текстовое поле --> <input type="text"> <!-- Флажок --> <input type="checkbox"> <!-- Переключатель --> <input type="radio"> </p><h2>Živel <form></h2><p><form>je blokový prvek, který definuje <b>interaktivní</b> součástí webové stránky. Výsledkem je, že všechny ovládací prvky (např <input> , <textarea>nebo <button>) musí být <i>uvnitř</i>živel <form> .</p><p>Dva HTML atributy <b>potřeboval</b>:</p><ul><li>akce obsahuje adresu, která specifikuje <i>Kde</i> budou odeslány informace z formuláře;</li><li>metoda může být buď GET nebo POST a určuje, zda <i>Jak</i> informace z formuláře budou odeslány.</li> </ul><p>Obvykle jsou informace z formuláře odeslány na <b>server</b>. <i>Jak</i> tyto údaje pak budou zpracovávány nad rámec tohoto návodu.</p><p>Formulář si představte jako soubor ovládacích prvků, které spolupracují na dosažení <b>jeden</b>úkon. Pokud jste napsali přihlašovací formulář k webu, možná ano <b>tři</b> pole:</p><ul><li>pole email <input type="email"> </li><li>pole hesla <input type="password"> </li><li>tlačítko odeslat <input type="submit"> </li> </ul><p>Tyto tři prvky HTML budou zabaleny do jednoho formuláře <span><form action="/login" method="POST"> </span>.</p><p>Podobně můžete přidat registrační formulář na stejnou stránku HTML v samostatném prvku <form> .</p><h2>Textová pole</h2><p>Téměř všechny formy vyžadují <b>text</b> vstup od uživatelů k zadání jejich jména, e-mailové adresy, hesla, adresy atd. Textová pole formuláře mají mnoho variant.</p><p>Přestože jsou tato pole velmi podobná a umožňují uživatelům zadávat text jakéhokoli druhu (i nesprávný), jejich typ poskytuje specifické <b>sémantika</b> pro vstup s uvedením, jaké informace pole <b>musí</b> obsahovat.</p><p>Prohlížeče mohou následně mírně upravit rozhraní ovládacího prvku pro vylepšení <i>interaktivita</i> nebo naznačte, jaký obsah se očekává.</p><p>Například pole hesla zobrazuje tečky místo symbolů. A číselné pole umožňuje zvýšit / snížit hodnotu pomocí kláves nahoru a dolů.</p><h2>zástupný symbol</h2><p>Lze zobrazit textová pole <b>nabádání</b> text, který zmizí, jakmile zadáte nějaký text.</p><p> <input type="text" placeholder="Zadejte své jméno"> </p><p>Pokud začnete něco psát, uvidíte, že text „Zadejte své jméno“ zmizí.</p><h2><label></h2><p>Protože samotné prvky formuláře nejsou příliš popisné, obvykle jim předchází text <b>označení</b>.</p><p> <label>E-mailem</label> <input type="email"> </p><p>Zatímco zástupné symboly již poskytují určitou nápovědu o tom, jaký obsah se očekává, štítky mají tu výhodu, že zůstávají stále viditelné a lze je použít spolu s jinými typy prvků formuláře, jako jsou zaškrtávací políčka nebo přepínače.</p><p>I když můžete použít krátké odstavce k popisu prvků formuláře, pomocí <label>je sémanticky správnější, protože existují pouze ve formách. <label>lze také přiřadit ke konkrétnímu prvku formuláře pomocí atributu for, který odpovídá hodnotě id pole.</p><p> <label for="first_name">název</label> <input id="first_name" type="text"> </p><p>Po kliknutí na štítek se fokus přesune na textové pole a umístí do něj kurzor. I když se tento balíček zdá zbytečný, bude se hodit se zaškrtávacími políčky a přepínači.</p><h2>Zaškrtávací políčka</h2><p><b>Zaškrtávací políčka</b> jsou prvky formuláře, které mají pouze dva stavy: zapnuto nebo vypnuto. V zásadě umožňují uživateli něco říci ano nebo ne.</p><p> <input type="checkbox">Zapamatuj si mě</p><p>Protože může být obtížné kliknout na malé zaškrtávací políčko, doporučujeme zaškrtávací políčko a jeho popis umístit dovnitř <label> .</p><p> <label> <input type="checkbox">Souhlasím s podmínkami</label> </p><p>Kliknutím na text „Souhlasím s podmínkami“ zaškrtávací políčko přepnete.</p><p>Ve výchozím nastavení je zaškrtávací políčko zakázáno. Můžete jej označit jako povolený jednoduše pomocí atributu zaškrtnuto.</p><p> <label> <input type="checkbox" checked>Použijte moji fakturační adresu</label> </p><h2>Přepínače</h2><p>Můžete poskytnout uživateli <b>seznam možností</b> volitelné pomocí spínačů.</p><p>Aby tento formulářový prvek fungoval, musí vaše HTML <b>skupina</b> seznam přepínačů dohromady. Toho je dosaženo použitím stejné hodnoty pro atribut name:</p><p> <label>Rodinný stav</label> <label> <input type="radio" name="status">singl</label> <label> <input type="radio" name="status">Ženatý</label> <label> <input type="radio" name="status">Rozvedený</label> <label> <input type="radio" name="status">Vdovec</label> </p><p>Protože všechny přepínače používají stejnou hodnotu pro atribut name (v tomto případě hodnotu status ), výběr jedné z možností přepíše všechny ostatní. Spínače jsou <b>vzájemně se vylučující</b>.</p><h3>Rozdíl mezi přepínači a zaškrtávacími políčky</h3><p>I když zaškrtávací políčko existuje <b>sám</b>, přepínače se mohou objevit pouze ve formuláři <b>seznam</b>(což znamená alespoň dvě možnosti).</p><p>Také kliknutím na zaškrtávací políčko je <b>libovolný</b>, při výběru jednoho z přepínačů je <b>povinný</b>. Proto není možné vypnout vypínač, pokud zvolíte nejbližší možnost. Nakonec se vždy vybere jedno z přepínacích tlačítek.</p><h2>Rozbalovací nabídky</h2><p>Pokud počet možností k výběru zabírá příliš mnoho místa, můžete použít rozevírací nabídky <select> .</p><p>Fungují jako vypínače, jen rozložení je jiné.</p><p> <select> <option>leden</option> <option>Únor</option> <option>březen</option> <option>duben</option> <option>Smět</option> <option>červen</option> <option>červenec</option> <option>srpen</option> <option>září</option> <option>říjen</option> <option>listopad</option> <option>prosinec</option> </select> </p><h3>Vícenásobný výběr z rozbalovací nabídky</h3><p>Přidáním atributu multiple můžete poskytnout možnost vybrat více možností.</p><p> <label>Jaké prohlížeče používáte?</label> <select multiple> <option>Google Chrome</option> <option>internet Explorer</option> <option>Mozilla Firefox</option> <option>Opera</option> <option>safari</option> </select> </p><p>Vyberte více možností podržením Ctrl (nebo ⌘) a kliknutím. To může být dobrou alternativou k více příznakům na řádek.</p><h2>Příklad: úplný registrační formulář</h2> <form action="/signup" method="POST"> <p> <label>Odvolání</label> <label> <input type="radio" name="title" value="pan">Pan.</label> <label> <input type="radio" name="title" value="paní">Slečna.</label> </p> <p> <label>název</label> <input type="text" name="first_name"> </p> <p> <label>Příjmení</label> <input type="text" name="last_name"> </p> <p> <label>E-mailem</label> <input type="email" name="email"> </p> <p> <label>Telefon</label> <input type="tel" name="phone"> </p> <p> <label>Heslo</label> <input type="password" name="password"> </p> <p> <label>Potvrďte heslo</label> <input type="password" name="password_confirm"> </p> <p> <label>Země</label> <select name="country"> <option>Kanada</option> <option>Francie</option> <option>Německo</option> <option>Itálie</option> <option>Japonsko</option> <option>Rusko</option> <option>Velká Británie</option> <option>USA</option> </select> </p> <p> <label> <input type="checkbox" name="terms">Souhlasím s podmínkami</label> </p> <p> <button>Registrovat</button> </p> </form> <p>K dispozici jsou také další prvky formuláře, ale probrali jsme ty nejpoužívanější.</p> <p><form action="file.php" method="post" id="form">...obsah formuláře...</form></p> <li>Přímo uvnitř prvku formuláře by měly být ovládací prvky, kterých může být tolik, kolik chcete.</li> <p><b>Atributy formuláře:</b></p> <ul><li>Atribut action určuje soubor serveru se skriptem odpovědným za hlavní zpracování dat odeslaných z formuláře. Obvykle je kód pro tento soubor napsán v programovacím jazyce na straně serveru, jako je např <i>php</i> nebo <i>perl</i>.</li> <li>Atribut enctype udává typ informace přenášené na server, pokud se jedná pouze o textová data - text/plain , pokud jsou soubory odesílány s formulářem, pak by mělo být specifikováno multipart/form-data.</li> <li>Atribut method specifikuje a definuje formu přenosu dat. Nebudeme se tím podrobně zabývat, ale je třeba říci, že pro spolehlivější převod by měla být upřesněna metoda post.</li> </ul><h2><span>html prvky formuláře</span></h2> <ul><table><tr><td class="code"> <<span>input type = "text" name = "login" size = "20" value = "Login" maxlength = "25" > !}</span> </td> </tr></table><p><input type="text" name="login" size="20" value="Přihlásit se" maxlength="25"></p> <p>Výsledek:</p> <p><input style="all: inherit; border:1px #aaa solid" type="text" size="20" value="Přihlásit se" maxlength="25"></p> <ul><li>Hodnota atributu type - text - označuje, že se jedná o textové pole</li> <li>velikost - velikost textového pole ve znacích</li> <li>maxlength - maximální počet znaků, které se vejdou do pole</li> <li>hodnota - počáteční text v textovém poli</li> <li>jméno - název prvku, nezbytný pro zpracování dat v souboru handler</li> </ul><p><input type="password" name="pass" size="20" value="Heslo" maxlength="25"></p> <p>Výsledek:</p> <p><input style="all: inherit; border:1px #aaa solid" type="password" size="20" value="Heslo" maxlength="25"><br>Místo textu se v poli zobrazuje maska ​​– hvězdičky nebo kolečka</p> <table><tr><td class="code"> <<span>input type="submit" value= <span>"Odeslat data"</span>> </span> </td> </tr></table><p><input type="submit" value="Odeslat data"></p> <p>Výsledek:</p> <p><input type="submit" value="Odeslat data" style="all: unset; border:1px #aaa solid"></p> <p>Tlačítko Odeslat shromáždí všechna data formuláře zadaná uživatelem a odešle je na adresu uvedenou v atributu akce formuláře.</p> <table><tr><td class="code"> <<span>input type = "reset" value = "Clear form" > !}</span> </td> </tr></table><p><input type="reset" value="jasná forma"></p> <p>Výsledek: <br><img src='https://i0.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-65.png' height="54" width="224" loading=lazy loading=lazy><br>Tlačítko vrátí stav všech ovládacích prvků do původního stavu (vymaže formulář)</p> <table><tr><td class="code"> <<span>input type = "checkbox" name = "asp" value = "yes" > !}</span> A.S.P.<<span>br ></span> <<span>input type = "checkbox" name = "js" value = "yes" checked = "checked" > !}</span> javascript<<span>br ></span> <<span>input type = "checkbox" name = "php" value = "yes" > !}</span> PHP<<span>br ></span> <<span>input type = "checkbox" name = "html" value = "yes" checked = "checked" > !}</span> HTML<<span>br ></span> </td> </tr></table><p><input type="checkbox" name="asp" value="Ano">A.S.P. <br> <input type="checkbox" name="js" value="Ano" checked="checked">javascript <br> <input type="checkbox" name="php" value="Ano">PHP <br> <input type="checkbox" name="html" value="Ano" checked="checked">HTML <br></p> <p><img src='https://i0.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-95.png' align="center" width="100%" loading=lazy loading=lazy><br>Výsledek:</p> <p><input type="checkbox">A.S.P. <br><input type="checkbox" checked>javascript <br><input type="checkbox">PHP <br><input type="checkbox" checked>HTML</p> <p>V html se zaškrtávací políčko používá k uspořádání vícenásobného výběru, tzn. kdy je nutné a možné vybrat několik odpovědí</p> <table><tr><td class="code"> <<span>typ vstupu = "radio" name = "kniha" hodnota = "asp" > !}</span> A.S.P.<<span>br ></span> <<span>input type = "radio" name = "book" value = "js" > !}</span> javascript<<span>br ></span> <<span>input type = "radio" name = "book" value = "php" > !}</span> PHP<<span>br ></span> <<span>typ vstupu = "radio" name = "kniha" hodnota = "html" checked = "checked" > !}</span> HTML<<span>br ></span> </td> </tr></table><p><input type="radio" name="book" value="asp">A.S.P. <br> <input type="radio" name="book" value="js">javascript <br> <input type="radio" name="book" value="php">PHP <br> <input type="radio" name="book" value="html" checked="checked">HTML <br></p> <p><img src='https://i0.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-89.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>Výsledek:</p> <p><input type="radio">A.S.P. <br><input type="radio">javascript <br><input type="radio">PHP <br><input type="radio" checked>HTML</p> <p>přepínač html slouží pro jeden výběr z více možností</p> <p>Atribut zaškrtnuto okamžitě nastaví prvek na zaškrtnuto</p> </ul><p><b>Důležité:</b> Pro prvky <b>rádio</b> je nutné, aby hodnota atributu <b>název</b> všechny prvky ve skupině měly stejné: v tomto případě budou prvky fungovat vzájemně propojené, když je jeden prvek zapnutý, ostatní se vypnou</p> <h2><span>Rozbalovací seznam HTML</span></h2> <p>Zvažte příklad přidání rozevíracího seznamu:</p> <table><tr><td class="line_numbers"> 1 2 3 4 5 6 </td><td class="code"> <<span>vyberte name="book" size="1"></span> <<span>hodnota volby = "asp" > !}</span> A.S.P.<<span>/volba></span> <<span>option value = "js" > !}</span> JavaScript<<span>/volba></span> <<span>option value = "php" > !}</span> PHP<<span>/volba></span> <<span>option value = "html" selected = "selected" > !}</span> HTML<<span>/volba></span> <<span>/vybrat></span> </td> </tr></table><p><select name="book" size="1"> <option value="asp">A.S.P.</option> <option value="js">JavaScript</option> <option value="php">PHP</option> <option value="html" selected="selected">HTML</option> </select></p> <p>Výsledek:</p> <p><img src='https://i2.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-68.png' height="122" width="117" loading=lazy loading=lazy></p> <ul><li>Rozbalovací seznam se skládá z hlavní značky - select - která má uzavírací dvojici a každá položka seznamu je značka volby, uvnitř které je zobrazen text položky</li> <li>velikost atributu s hodnotou <i>"1"</i> označuje, že seznam ve sbaleném formuláři zobrazuje jednu položku, zbytek se otevře po kliknutí na šipku nabídky</li> <li>Vybraný atribut položky (volba) označuje, že tato konkrétní položka bude zpočátku viditelná a ostatní položky jsou „sbalené“</li> </ul><p><img src='https://i0.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-90.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>Pro velké a složité seznamy existuje možnost <b>přidat titulky</b>- značka optgroup s atributem label (nápis):</p> <table><tr><td class="line_numbers"> 1 2 3 4 5 6 7 8 9 10 11 12 </td><td class="code"> <<span>vyberte name="book" size="1"></span> <<span>optgroup label = "Angličtina" ></span> <<span>hodnota volby = "asp" > !}</span> A.S.P.<<span>/volba></span> <<span>option value = "js" > !}</span> JavaScript<<span>/volba></span> <<span>option value = "php" > !}</span> PHP<<span>/volba></span> <<span>option value = "html" selected = "selected" > !}</span> HTML<<span>/volba></span> <<span>/optgroup></span> <<span>optgroup label = "Rusové" ></span> <<span>option value = "asp_eng" > !}</span> ASP v ruštině<<span>/volba></span> <<span>option value = "js_eng" > !}</span> JavaScript v ruštině<<span>/volba></span> <<span>/optgroup></span> <<span>/vybrat></span> </td> </tr></table><p><select name="book" size="1"> <optgroup label="Английские"> <option value="asp">A.S.P.</option> <option value="js">JavaScript</option> <option value="php">PHP</option> <option value="html" selected="selected">HTML</option> </optgroup> <optgroup label="Русские"> <option value="asp_rus">ASP v ruštině</option> <option value="js_rus">JavaScript v ruštině</option> </optgroup> </select></p> <p><img src='https://i0.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-69.png' height="202" width="211" loading=lazy loading=lazy><br>Poskytnout příležitost <b>vybrat více položek současně</b> musíte přidat atribut multiple. Ale v tomto případě by měl být atribut size také nastaven na hodnotu větší než 1:</p> <p><textarea name="description" cols="30" rows="10">Text

Výsledek:

• Šířka prvku závisí na atributu cols, který určuje, kolik znaků se vejde vodorovně.
• Atribut rows určuje počet řádků v prvku.

Další prvky

Další prvky a atributy

• Pro ovládání rádio A zaškrtávací políčko je vhodné použít další prvky, které zaprvé ukotví text k samotnému prvku rádia nebo zaškrtávacího políčka a zadruhé při kliknutí přidají tah:

<input type="checkbox" id="book1"> <label for="book1"> A.S.P.</label>

A.S.P.

V příkladu je vytvořen štítek (značka štítku) pro prvek checkbox. Vazba se provádí pomocí atributu id, jehož hodnota je uvedena v atributu label for.

Výsledek:

A.S.P.
javascript

Nyní se téměř žádný web neobejde bez prvků rozhraní, jako jsou pole pro zadávání textu, tlačítka, přepínače a zaškrtávací políčka. Jsou nezbytné pro interakci uživatele, aby mohl vyhledávat na webu klíčová slova, psát komentáře, odpovídat na ankety, přikládat fotografie a dělat mnoho dalších podobných věcí. Právě formuláře zajišťují příjem dat od uživatele a jejich přenos na server, kde se již analyzují a zpracovávají. Pokud tedy něco takového na svém webu plánujete udělat, bez formulářů to nepůjdete.

Samotný formulář je vytvořen pomocí tagu , který může obsahovat libovolné potřebné značky a vyznačuje se následujícími volitelnými parametry:

1. adresu programu na webovém serveru, který bude zpracovávat obsah údajů formuláře;
2. prvky formuláře, což jsou standardní pole pro zadání uživatele;
3. tlačítko pro odeslání dat na server.

Na stránce je povoleno používat několik formulářů, ale neměly by být vnořeny jeden do druhého (příklad 1).

Příklad 1: Nesprávné použití formulářů

HTML5 IE Cr Op Sa Fx

Před odesláním dat prohlížeč připraví informace ve formě páru jméno=hodnota, kde název je určen atributem name tagu nebo jinou značku platnou ve formuláři a hodnotu zadá uživatel nebo ji nastaví ve výchozím poli formuláře. Poté, co uživatel klikne na tlačítko Odeslat, je zavolána obsluha formuláře, která obdrží informace zadané do formuláře a poté s nimi provede to, co vývojář předpokládá. Obsluha formuláře je obvykle program určený atributem akce tagu.

Můžete také zadat e-mailovou adresu jako hodnotu atributu action, počínaje klíčovým slovem mailto: . Po odeslání formuláře se spustí výchozí poštovní schránka. Z bezpečnostních důvodů je prohlížeč nastaven tak, aby neodesílal informace zadané do formuláře diskrétně poštou. Pro správnou interpretaci dat použijte atribut enctype s hodnotou text/plain ve značce

Prohlížeče s takovým kódem pracují nejednoznačně. Firefox nabídne seznam vhodných aplikací pro odesílání pošty (obr. 1), Internet Explorer zobrazí varování (obr. 2) a pokusí se spustit program spojený s poštou, Opera stejně jako Firefox nabídne seznam možností vhodných pro odesílání pošty (obr. 3).

Rýže. 1. Spuštění aplikace ve Firefoxu

Rýže. 2. Upozornění Internet Explorer

Rýže. 3. Výběr programu v Opeře