Vzorový formulár html. Formuláre v HTML

Popis

Tag

Povolené vo vnútri nádoby

Syntax

Atribúty

Nastavuje kódovanie, v ktorom môže server prijímať a spracovávať údaje.

Povinné.

Ryža. 1. Pohľad na prvky formulára v okne prehliadača

HTML formulár je súčasťou dokumentu, ktorý umožňuje užívateľovi zadať informácie, ktoré ho zaujímajú, a ktoré môžu byť následne akceptované a spracované na strane servera. Inými slovami, formuláre sa používajú na zhromažďovanie informácií zadaných používateľmi.

Ak chcete určiť, ku ktorému prvku formulára patrí aktuálny štítok, musíte použiť atribút for značky . Hodnota atribútu for sa musí zhodovať s hodnotou globálneho atribútu prvku formulára, na ktorý sa bude vzťahovať označenie. Atribút for sa nesmie použiť, ak je prvok bude vo vnútri prvku .

Pozrime sa na príklad použitia:

V tomto príklade:

• Vnútri najprv formy:
  • Uverejnené dve prepínače ( ) vyberte jednu z obmedzeného počtu možností. Znova si všimnite, že pre prepínače v rovnakom formulári musí byť uvedený rovnaký názov, uviedli sme rôzne hodnoty. Pre najprv začiarknuté , čo určuje, že prvok by mal byť vopred vybratý pri načítaní stránky (v v tomto prípade prepínač s hodnotou áno ). Okrem toho sme pre prepínače špecifikovali globálne atribúty, ktoré definujú jedinečný identifikátor prvku.
  • Umiestnené dva prvky , ktoré definujú textové označenia pre naše textové polia. Všimnite si, že sme použili atribút for na určenie, ktorému prvku formulára patrí aktuálny štítok. Hodnota atribútu for zodpovedá hodnote globálneho atribútu prepínača, ktorý potrebujeme.
• Vnútri druhý formy:
  • Uverejnené dve prepínače ( ) vyberte jednu z obmedzeného počtu možností. Pre druhý Pre prepínače sme určili atribút začiarknutý, ktorý označuje, že prvok má byť pri načítaní stránky vopred vybratý (v tomto prípade prepínač s hodnotou no ). Okrem toho sme špecifikovali jedinečné hodnoty pre prepínače vo formulári a rovnaké názvy.
  • Umiestnené dva prvky , umiestnili sme do nich prepínače. Na rozdiel od predchádzajúcej metódy nie je potrebné špecifikovať globálne atribúty (identifikátor prvku) pre prepínače a použiť atribút for pre textové označenia, aby ste na ne odkazovali (vytvorili väzbu).

V prehliadači vyzerajú obe možnosti (metódy) používania textových označení identicky:

Popis pre vstupné polia

Pozrime sa na príklad použitia:

V tomto príklade sme špecifikovali prvok s typom text (jednoriadkové textové pole) a zadaním hesla (pole pre heslo), textovou nápovedou pre používateľa (atribút zástupného symbolu), ktorý popisuje očakávanú hodnotu pre vstup.

Výsledok nášho príkladu:

Otázky a úlohy k téme

Skôr než prejdete na ďalšiu tému, dokončite cvičnú úlohu:

• Na základe získaných vedomostí vytvorte nasledujúci objednávkový formulár:

Upozornenie: v poliach, kde sa očakáva výber, by malo byť možné vyberať kliknutím na text, nielen na samotný prvok.

Po dokončení cvičenia skontrolujte kód stránky otvorením príkladu v samostatnom okne, aby ste sa uistili, že ste urobili všetko správne.

HTML tagy, ktoré definujú HTML formuláre na stránke

Vytvárame webové stránky a jednotlivé stránky na internete komunikovať s návštevníkmi.

HTML formuláre sa používajú na registráciu návštevníkov na stránke, na interaktívne prieskumy a hlasovanie, umožňujú vám posielať správy, nakupovať atď. HTML Formulár je vytvorený na jeden účel: zhromažďovanie a následný prenos informácií na spracovanie pomocou softvérového skriptu alebo prostredníctvom e-mailu.

Príklad HTML formulára | Prihláste sa na stránku

Značky, atribúty a hodnoty

• - určiť tvar.
• name="" - definuje názov formulára.
• method="" - definuje spôsob odosielania údajov z formulára. Hodnoty: "get" (predvolené) a "post" . Často sa používa metóda „post“, pretože umožňuje prenášať veľké množstvo dát.
• action="" - definuje adresu URL, na ktorú sa odosielajú údaje na spracovanie. V našom prípade - enter_data.php ..
• - definovať také prvky formulára, ako sú tlačidlá, prepínače, textové polia na zadávanie údajov.
• type="text" - definuje textové pole pre zadávanie údajov.
• type="password" - definuje pole pre zadanie hesla, pričom text sa zobrazuje vo forme hviezdičiek alebo krúžkov.
• type="checkbox" - definuje prepínač.
• type="hidden" - definuje skrytý formulárový prvok - slúži na prenos dodatočné informácie na server.
• size="25" - dĺžka textového poľa v znakoch.
• maxlength="30" - maximálny povolený počet zadaných znakov.
• value="" - definuje hodnotu, ktorá sa odošle na spracovanie, ak sa týka prepínačov alebo prepínačov. Hodnota tohto atribútu ako súčasti textového poľa alebo tlačidla sa vo vyššie uvedenom príklade zobrazí ako napríklad Vasya alebo Login.

Príklad HTML formulára | Komentáre na stránke

Značky, atribúty a hodnoty

• action="http://site/comments.php" - definuje url, na ktorý sa budú odosielať údaje z formulára.
• id="" - definuje názov a identifikátor prvku formulára.
• name="" - definuje názov prvku formulára.
• - definujte textové pole ako súčasť formulára.
• cols="" - určuje počet stĺpcov textového poľa formulára.
• rows="" - definuje počet riadkov textového poľa formulára.

Ak medzi umiestnite text, zobrazí sa vo vnútri poľa ako príklad, ktorý možno ľahko odstrániť.

Príklad HTML formulára | Rozbaľovací zoznam

Značky, atribúty a hodnoty

• - definujte zoznam s pozíciami na výber.
• size="" - určuje počet viditeľných pozícií zoznamu. Ak je hodnota 1, máme čo do činenia s rozbaľovacím zoznamom.
• - určiť pozície (položky) zoznamu.
• value="" - obsahuje hodnotu, ktorá bude odoslaná formulárom na zadanú url na spracovanie.
• selected="selected" - zvýrazní položku zoznamu ako príklad.

Príklad HTML formulára | Zoznam s posúvačom

Zvýšením hodnoty atribútu size="" dostaneme zoznam s posuvnou lištou:

Pre túto možnosť použite príznak multiple="multiple", ktorý umožňuje vybrať viacero pozícií. Jeho absencia umožňuje vybrať iba jednu položku.

Pozri dodatočne:

Formuláre sú určené na odosielanie údajov od používateľa na webový server. Formuláre v HTML môžu pozostávať z textových polí a textových oblastí, začiarkavacích políčok a prepínačov a rozbaľovacích zoznamov. To všetko sú prvky formy. Každý prvok slúži na vyjadrenie určitého významu stránke.
Formulár HTML je vo svojej podstate webová stránka, na ktorej vidíte oblasti na zadávanie informácií. Po vyplnení formulára a kliknutí na tlačidlo Odoslať sa informácie z formulára zabalia a odošlú na webový server na spracovanie pomocou skriptu na strane servera (súbor obslužného programu). Po spracovaní sa vám ako odpoveď vráti iná webová stránka. Nasledujúci obrázok jasne ukazuje, ako formulár funguje:

Na vytváraní formulárov HTML nie je nič zložité. Najjednoduchší spôsob, ako získať predstavu o formulároch, je analyzovať malý kód HTML a potom zistiť, ako to funguje. Nasledujúci príklad ukazuje syntax na vytvorenie jednoduchého formulára HTML:

Príklad: Jednoduchý HTML formulár

• Vyskúšajte sami »

Moja prvá forma:
meno:
Priezvisko:

Prvok

Formuláre sa do webových stránok vkladajú pomocou prvku . Poskytuje kontajner pre všetok obsah formulára vrátane prvkov, ako sú textové polia a tlačidlá, ako aj akékoľvek iné značky HTML. Nemôže však obsahovať iný prvok .
Na odoslanie formulára na server použite tlačidlo „Odoslať“, rovnaký výsledok získate, ak vo formulári stlačíte kláves „Enter“. Ak sa na formulári nenachádza tlačidlo „Odoslať“, na odoslanie je možné použiť kláves „Enter“.
Väčšina atribútov prvkov ovplyvňujú spracovanie formulára, nie jeho dizajn. Najbežnejšie z nich sú akcie A metóda. Atribút akcie obsahuje URL, na ktorú budú informácie vo formulári odoslané na spracovanie serverom. Atribút metóda je metóda HTTP, ktorú musia prehliadače použiť na odosielanie údajov formulárov.

Prvok

Takmer všetky polia formulára sú vytvorené pomocou prvku (z anglického input - input). Vzhľad prvok meniť v závislosti od hodnoty jeho atribútu typu:

Tu sú niektoré hodnoty atribútov typu:

Zadávanie textu a hesla

Jedným z najjednoduchších typov prvkov formulára je textové pole, určené na zadávanie textu na jeden riadok. Tento typ textový vstup je štandardne nastavený, a preto je to jednoriadkové pole, ktoré sa zobrazí, ak zabudnete zadať atribút typu. Ak chcete do formulára pridať jednoriadkové textové vstupné pole, mali by ste byť v prvku zaregistrovať atribút typu s textovou hodnotou:

Pole na zadanie hesla je typ bežného textového poľa. Podporuje rovnaké atribúty ako jednoriadkové textové pole. Atribút meno nastavuje názov poľa na zadanie hesla, ktoré bude odoslané na server spolu s heslom zadaným používateľom. Ak chcete vytvoriť pole hesla, musíte nastaviť atribút hesla na typu(heslo (anglicky) - heslo):

Príklad vytvorenia formulára s poľom pre heslo:

Príklad: Pole hesla

• Vyskúšajte sami »

Vaše prihlasovacie meno:

heslo:

Vaše prihlasovacie meno:

heslo:

Atribút môžete použiť v spojení s týmto atribútom maximálna dĺžka, ktorého hodnota určuje maximálny počet znakov, ktoré je možné zadať do daného reťazca. Pomocou atribútu môžete nastaviť aj dĺžku vstupného poľa veľkosť. Väčšina prehliadačov štandardne obmedzuje šírku textového poľa na 20 znakov. Na ovládanie šírky prvkov nových formulárov namiesto atribútu veľkosť, odporúčame použiť kaskádové štýly (CSS).
Atribút hodnotu určuje hodnotu, ktorá sa predvolene zobrazí v textovom poli pri načítaní formulára. Zadaním predvolenej hodnoty do poľa môžete používateľovi presne vysvetliť, aké údaje a v akom formáte tu chcete zadať. Je to ako vzor, ​​pretože pre používateľa je oveľa pohodlnejšie vyplniť formulár a vidieť príklad pred sebou.

Vypínače (rádio)

Prvok typu rádio vytvára prepínače, ktoré používajú logický princíp "ALEBO", čo vám umožňuje vybrať iba jednu z niekoľkých hodnôt: ak vyberiete jednu pozíciu, všetky ostatné sa stanú neaktívnymi. Základná syntax prepínacieho prvku je:

Atribút meno pre prepínače je potrebný a hrá dôležitú úlohu pri kombinovaní niekoľkých prvkov spínača do skupiny. Ak chcete spojiť prepínače do skupiny, musíte nastaviť rovnakú hodnotu atribútu meno a rozdielna hodnota atribútu hodnotu. Atribút hodnotu nastavuje hodnotu vybratého prepínača, ktorý sa má odoslať na server. Hodnota každého prvku prepínača musí byť v rámci skupiny jedinečná, aby server vedel, ktorú možnosť odpovede si používateľ vybral.
Prítomnosť atribútu skontrolované(z angličtiny - nainštalované) pri prvku switch označuje, ktorá z navrhovaných možností by mala byť v prípade potreby pri načítaní stránky predvolene vybraná. Tento atribút je možné nastaviť iba pre jeden prvok prepínača zo skupiny:

• Vyskúšajte sami »

kolko mas rokov?

1. do 18 rokov
2. od 18 do 24
3. od 25 do 35
4. viac ako 35

Atribút akcie.

Hlavná pre prvok

Súbor spracovania sa nachádza na serveri mytestserver.com v priečinku priečinok s názvami a názov serverového skriptu, ktorý bude spracovávať údaje - obrabotchik.php. Prenesú sa mu všetky údaje, ktoré ste zadali do formulára na webovej stránke. Prípona .php označuje, že zadaný formulár je spracovaný skriptom napísaným v PHP. Samotný handler môže byť napísaný v inom jazyku, môže to byť napríklad skriptovací jazyk Python, Ruby atď.
Hodnotu atribútu je vhodné vždy nastaviť akcie. Ak má formulár odovzdávať hodnoty na rovnakú stránku, kde sa nachádza, zadajte prázdny reťazec ako hodnotu atribútu action: action="".

atribút metódy

Atribút metóda určuje, ako sa majú informácie prenášať na server. Spôsob odoslania formulára, ktorý si vyberiete, závisí od údajov, ktoré chcete odoslať pomocou formulára. Hlavnú úlohu tu zohráva objem týchto údajov. Najpopulárnejšie sú dva spôsoby prenosu údajov zdroja formulára z prehliadača na server: GET A POST. Metódu je možné nastaviť na ľubovoľnú, a ak ju nešpecifikujete, použije sa predvolená GET. Uvažujme o použití každého z nich.

metóda POST

Metóda POST balíky tvoria dáta a odosielajú ich na server bez toho, aby si to používateľ všimol, keďže dáta sú obsiahnuté v tele správy. Webový prehliadač pri použití metódy POST odošle požiadavku na server pozostávajúcu zo špeciálnych hlavičiek, za ktorými nasledujú údaje formulára. Keďže obsah tejto požiadavky je dostupný iba pre server, metóda POST používané na prenos dôverných údajov, ako sú heslá, údaje o bankových kartách a iné osobné informácie používateľov. Metóda POST vhodné aj na odosielanie veľkých objemov informácií, keďže na rozdiel od metódy GET, nemá žiadne obmedzenia na počet prenášaných znakov.

GET metóda

Ako už viete, hlavnou úlohou prehliadača je prijímať webové stránky zo servera. Takže keď použijete metódu GET, váš prehliadač jednoducho načíta webovú stránku ako vždy. Metóda GET tiež zabalí údaje formulára, ale pred odoslaním požiadavky na server ich pripojí na koniec adresy URL. Aby ste pochopili, ako metóda funguje GET, pozrime sa na to v praxi. Otvorte prvý príklad z tejto lekcie (Príklad: Jednoduchý formulár HTML) v programe Poznámkový blok (napríklad Notepad++) a vykonajte malú zmenu v kóde HTML: