HTML II – 5. lekce
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

HTML II – 5. lekceHTML II – 5. lekce

 
Hledat
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

HTML II – 5. lekce

Google       Google       2. 7. 2006       21 760×

Po nepříjemnostech a čekání na úkoly je tu další lekce kurzu HTML II. Tentokrát se zaměřením na formuláře.

Reklama
Reklama

Spousta webdesignerů si řekne „K čemu mi budou na stránce fomuláře?“. A najednou ho napadne, že by chtěl dát na stránku okno a tlačítko, kde návštěvníci napíšou zprávu, a pošlou mu ji. A už máme na scéně formuláře.

Základ formuláře

Základ formuláře tvoří párové tagy <form> a </form>, mezi něž se vkládají prvky formuláře. Kód tedy bude vypadat takto:


<form>
zde budou formulářové prvky
</form>

Ale jak už tomu bývá, toto by nic neudělalo. A i kdyby udělalo, tak by se nám na stránce nic neobjevilo. Proto se určují u tagu <form> ještě minimálně 2 atributy:

  • method
  • action

Metody odesílání určené parametrem method se používají dvě. Jsou to post a get. Více používaná je, myslím, metoda post a my se zde metodou get ani zabývat nebudeme.

Do hodnoty parametru action se píše adresa skriptu, který se vykoná po kliknutí na odesilací tlačítko.

Pokud byste chtěli přes formulář posílat data, musíte přidat ještě jeden parametr. Je to parametr enctype, jenž určuje MIME typ. Pokud jej nenapíšete, formulář tam defaultně (automaticky) „sekne“ hodnotu text/plain, která je pro posílání dat naprosto nepoužitelná. Pro posílání dat se obvykla používá multipart/form-data.

Vstupní pole formuláře – inputy

Pokud se s Vámi někdo bude bavit o inputech, bude pravděpodobně mluvit o tzv. vstupních polích formuláře. Vstupní jsou proto, že do nich něco píšete, zaškrtáváte políčka či jen vybíráte kolečko, ale hlavně proto, že tyto prvky se do formuláře dávájí zpravidla nepárovým tagem <input>. U tohoto tagu se určují další parametry:

type
Určuje typ vstupního pole
value
Základní obsah vstupního pole
maxlenght
Maximální délka napsaného textu
checked
Políčko je již deufaultně zaškrtnuté
name
Jméno inputu – důležité!

Udělám vám malou tabulku se seznamem inputů.

Seznam inputů
Typ inputu Náhled Popis
text Pole, kam můžete cokoliv napsat. Jste omezeni parametrem maxlenght.
password Stejné jako text, akorát když do něj píšete, jsou vidět hvězdičky
submit tlačítko pro odeslání
checkbox zaškrtávací políčko
radio políčko pro výběr z několika možností
file pro odeslání dat
reset vymaže formulář
hidden stejně není vidět ;-) skryté pole, může se v něm odesílat cokoliv Vámi nadefinovaného

A to by bylo, aby taky neexistovaly nějaké výjimky. Tady jsou:

Výjimky
Výjimka Náhled Popis
textarea

párový tag <textarea>
select Párový tag + další odlišnosti

Jak na <textarea> a <select>

Ukážeme si to na tom, co jsem použil v tabulce. Nejprve tedy popíšeme tag <textarea>:

  • Tag je párový
  • Určuje se parametr rows (počet řádek)
  • Určuje se parametr cols (počet sloupců)
  • Nesmíme opomenout ani parametr name

To, co je napsáno mezi <textarea> a </textarea>, se ve výsledku objeví, takže něco jako když zvolíte u <input type="text"> parametr value. Takže vám ukážu příklad:


<textarea name="vzkaz" rows="5" cols="7">Zde mi můžete napsat vzkaz</textarea>

Jak vidíte, nic na tom není. A teď se podíváme na výběrový seznam select. Zadává se jednoduchým, ale pro někoho nezvyklým způsobem. Opět pár základních informací:

  • Tag je párový
  • Mezi tagy <select> a </select> se vkládá nepovinně párový (může být nepárový) tag <option>, u kterého se povinně určuje parametr value, a za tag se píše to, co se zobrazí na výběr.
  • Nesmíme opomenout ani parametr name, který se píše pouze k tagu <select>

Tak, a teď zdrojový kód jako k selectu, jako je v tabulce:


<select name="webovky">
<option value="CSS">CSS</option>
<option value="Javascript">JavaScript</caption>
</select>

Pokud přidáte k tagu <select> parametr multiple bez hodnoty (v XHTML se stejnou hodnotou), můžete pomocí nesouvislého výběru (Ctrl + kliknutí) vybrat více možností. Potom pomocí přidání parametru size nastavíte počet řádků, kolik se zobrazí.

Domácí úkol:

Vytvořte mi celou stránku s černým pozadím, meta tagy, tabulkou, v níž budou prvky formuláře: na text, heslo a odesílací tlačíko. Neuvádějte parametr action a metodu odesílání si zvolte sami.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

4 názory  —  4 nové  
Hlasování bylo ukončeno    
0 hlasů
Google
(fotka) Radek BoudaRadek Bouda studuje na Fakultě aplikovaných věd Západočeské univerzity v Plzni. Programuje v jazyce Java a zajímá se platformu .NET. Kromě programování má rád také cyklistiku, volejbal, skauting a pohyb venku obecně.
Web     Twitter     Facebook    

Nové články

Obrázek ke článku Konference: Moderní informační systémy podporují automatizaci

Konference: Moderní informační systémy podporují automatizaci

Současná situace v šíření onemocnění Covid-19 klade na řadu firem nové nároky a mnohé z nich jsou nyní více než kdy jindy závislé na nejmodernějších informačních technologiích. Proto i v oblasti podnikových informačních systémů vidíme rostoucí důraz na automatizaci nebo na důslednou integraci. Také o těchto trendech se bude mluvit na konferenci Firemní informační systémy, která se koná 24.9.2020 v pražském Kongresovém centru Vavruška na Karlově náměstí.

Reklama
Reklama
Obrázek ke článku Nebezpečí ukrytá v USB: z nuly na škvarek za pět sekund

Nebezpečí ukrytá v USB: z nuly na škvarek za pět sekund

Za cenu šesti dolarů lze celkem bez obtíží koupit nový, líbivě vyhlížející flash disk. Přidaná hodnota, které se vám spolu s ním dostane, už tak moc líbivá není. To, co se před pár sekundami tvářilo jako externí disk, se po připojení k počítači změní v důmyslné elektrické křeslo, které vaše zařízení v onen příslovečný škvarek promění za pár sekund. Cílovou skupinou pro koupi takových zařízení by mohli být záškodníci, kteří by tímto způsobem osnovali pomstu třeba vůči záletnému partnerovi. 

Obrázek ke článku Znalosti, dovednosti i prestižní titul MBA: Jde to i moderně a online

Znalosti, dovednosti i prestižní titul MBA: Jde to i moderně a online

Snad nikdy není špatná příležitost na investici do hodnotného vzdělání. Obzvlášť v případě, že absolvent dovede teoretické poznatky přetavit v praktické dovednosti, využitelné při řešení problémů i v komunikaci. Právě na to se specializuje studijní program MBA Řízení informačních technologií, vyučovaný na Business Institutu.

Obrázek ke článku Coding Bootcamp Praha: Obor IT krize nepoznamenala, žádaní jsou weboví vývojáři

Coding Bootcamp Praha: Obor IT krize nepoznamenala, žádaní jsou weboví vývojáři

Pandemie Covid-19 otřásla trhem práce v základech. Dopady krize pocítilo celkově až 45 % zaměstnanců. Není divu, že čím dál větší jistotu přináší obor IT. Ten zůstal krizí téměř nepoznamenán a při nutnosti začít dělat věci na dálku se ještě více ukázalo, jak moc mnohé firmy kvalitní IT potřebují. Do IT nyní přicházejí začátečníci, kteří v něm vidí lukrativní budoucnost a jistotu, ale i freelanceři a zaměstnanci z oborů zasažených krizí

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032020 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý