Co je vstup? Značky Form a Input pro vytváření tlačítek, zaškrtávacích políček a přepínačů. Hodnoty role ARIA

Specifikace Povinný atribut Hodnoty

V tabulce Jsou uvedeny 1 možné hodnoty atribut typu a výsledný pohled na pole formuláře.

Tabulka 1. Zadejte hodnoty Typ Popis Zobrazit
tlačítko Tlačítko.
zaškrtávací políčko Zaškrtávací políčka. Umožňuje vybrat více než jednu možnost z navržených. Pivo Čaj Káva
soubor Pole pro zadání názvu souboru, který je odeslán na server.
skrytý Skryté pole. Na webové stránce se nijak nezobrazuje.
obraz Pole s obrázkem. Po kliknutí na obrázek se data formuláře odešlou na server.
heslo Běžné textové pole, ale liší se od něj tím, že všechny znaky jsou zobrazeny jako hvězdičky. Navrženo tak, aby zabránil komukoli šmírovat zadané heslo.
rádio Spínače. Používají se, když potřebujete vybrat jednu možnost z více nabízených. Pivo Čaj Káva
resetovat Tlačítko pro vrácení dat formuláře na původní hodnotu.
předložit Tlačítko pro odeslání dat formuláře na server.
text Textové pole. Navrženo pro zadávání znaků pomocí klávesnice.

Do HTML5 byly přidány nové hodnoty uvedené v tabulce. 2.

Podpora prohlížeče pro tyto hodnoty je uvedena v tabulce. 3.

Tabulka 3. Podpora prohlížeče pro hodnoty HTML5
Význam Internet Explorer Chrome Opera Safari Firefox Android iOS
barva 21.0+ 11.01+
datum 5.0+ 10.62+ 5.0+ 5.0+
datum a čas 5.0+ 10.62+ 5.0+ 5.0+
datum a čas-místní 5.0+ 10.62+ 5.0+ 5.0+
e-mail 10.0 5.0+ 10.62+ 5.0+ 4.0+ 2.3+ 3.1+
měsíc 5.0+ 10.62+ 5.0+ 5.0+
číslo 10.0 6.0+ 10.62+ 5.0+ 2.3+ 4.0+
rozsah 10.0 5.0+ 10.62+ 5.0+ 23.0+ 5.0+
vyhledávání 10.0 5.0+ 11.01+ 5.0+ 4.0+ 4.0+
tel 10.0 5.0+ 11.01+ 5.0+ 4.0+ 3.1+
čas 5.0+ 10.62+ 5.0+ 5.0+
url 10.0 5.0+ 10.62+ 5.0+ 4.0+ 2.3+ 3.1+
týden 5.0+ 10.62+ 5.0+ 5.0+
Výchozí hodnota

HTML5 IE Cr Op Sa Fx

Vstupní značka, typ atributu

Pivo
Čaj
Káva

HTML5 IE Cr Op Sa Fx

Vstupní značka, typ atributu

Zadejte číslo od 1 do 10

Prvek (z anglického „input“ - „vstup“) je hlavním prvkem formuláře ( HTML tag) a definuje vlastní pole pro zadávání informací.

Vstupní pole přijímá jiný druh v závislosti na hodnotě použitého atributu type tento prvek. Mohou to být různá tlačítka, text, pole pro heslo nebo název souboru, přepínače, zaškrtávací políčka atd.

Vzhledem k tomu, že tag je inline, není nutné jej přikládat do formuláře (tagu), ale pokud posíláte data na server, je nutné tak učinit. Pokud ale ke značce přistupujete například pomocí skriptů, pak ji stačí umístit do jakéhokoli prvku, který může obsahovat inline značky.

Poznámka: Značka nemůže obsahovat žádný obsah, může obsahovat pouze atributy.

Syntaxe Uzavírací značka

Není vyžadováno.

Typ atributů Hlavní atribut, který definuje typ vstupního prvku. Pokud atribut není zadán, výchozí hodnota je "text" .
Možné hodnoty:
  • tlačítko – definuje aktivní tlačítko s nápisem.
  • checkbox – Definuje ovládací prvky checkboxu.
  • barva – Vygeneruje barevnou paletu, která uživatelům umožňuje vybrat hodnoty barev v hexadecimálním formátu.
  • datum – definuje pole pro zadání kalendářního data (rok, měsíc, den).
  • datetime – definuje pole pro zadání data a času.
  • datetime-local – Definuje ovládání data a času (rok, měsíc, den, hodina, minuty, sekundy a zlomky sekundy (bez časového pásma)).
  • email – definuje pole adresy e-mail.
  • soubor – definuje ovládací prvek s tlačítkem Procházet pro výběr a načítání souborů.
  • skryté – definuje skryté vstupní pole (nezobrazuje se na webové stránce).
  • obrázek – definuje obrázek jako tlačítko pro odeslání dat formuláře na server. Spolu s touto hodnotou musíte použít atribut src k definování adresy obrázku a atribut alt k definování alternativního textu. Můžete také nastavit atributy width a height a určit velikost obrázku v pixelech.
  • měsíc – umožňuje vybrat jeden měsíc, po jehož uplynutí poskytne údaje ve tvaru roku a měsíce (například: 2017-07).
  • číslo – definuje pole pro zadávání čísel.
  • heslo – definuje pole pro zadání hesla (maskované znaky).
  • rádio – vytvoří přepínače, které se vzájemně vylučují, pokud vyberete jeden přepínač, všechny ostatní se stanou neaktivními. Atribut zaškrtnuto označuje, že volba je ve výchozím nastavení vybrána.
  • rozsah – vytvoří posuvník pro zadávání čísel v zadaném rozsahu. Pokud nejsou uvedeny odpovídající atributy, jsou výchozí hodnoty:
    • min = 1
    • max = 100
    • hodnota = min + (max - min) / 2, nebo min, pokud max< min
    • krok = 1
  • reset – vytvoří tlačítko pro reset dat formuláře do původního stavu.
  • hledat – definuje textové pole pro zadání hledaného řetězce.
  • odeslat – Definuje tlačítko "Odeslat" pro odeslání dat formuláře na server.
  • tel – definuje pole pro zadání telefonního čísla.
  • text – Definuje jednořádkové textové pole (výchozí šířka je 20 znaků).
  • čas – definuje pole pro zadání času ve 24hodinovém formátu, např. 17:30.
  • url – definuje pole pro zadání URL.
  • týden – umožňuje vybrat jeden týden, po kterém bude poskytovat zadávání dat ve formátu rok a týden (například: 2017-W15).

Ne všechny prohlížeče podporují typy přidané v HTML5.
Pokud prohlížeč nepodporuje některý z nových typů, bude předpokládat, že typ je text .

accept Nastavuje typy/formáty souborů, které lze připojit k formuláři (odeslat na server). Atribut se používá pouze pro . alignDeprecated Definuje zarovnání obrazového vstupu (pouze pro ). alt Alternativní text pro tlačítko s obrázkem. autocomplete HTML5 Povolí nebo zakáže automatické doplňování. autofocus HTML5 Určuje, že prvek by měl být automaticky zaostřen při načítání stránky. borderDeprecated Tloušťka okraje kolem obrázku.: text , hledání , tel , url , email a heslo (zbytek je ignorován). min Nižší hodnota pro zadání čísla nebo data. minlength HTML5 Minimální povolený počet znaků v textu. Pouze pro následující typy ovládání: text , vyhledávání , tel , url , e-mail a heslo . multiple HTML5 Určuje, že uživatel může do prvku zadat více než jednu hodnotu (pouze pro a). name Název pole, určený k tomu, aby jej formulářový procesor mohl identifikovat.

vzor HTML5 Nastavuje vstupní vzor, ​​podle kterého se kontroluje hodnota zadaná v prvku. Syntaxe regulárního výrazu odpovídá jazyku

JavaScript . Pouze pro následující typy ovládacích prvků: text , vyhledávání , tel , url , email a heslo (ostatní jsou ignorovány). zástupný symbol HTML5 Zobrazí text nápovědy. Atribut lze použít s datovými poli

určité typy(atribut typu) s hodnotami e-mail, heslo, hledání, tel, text a url). povinné HTML5 Povinné pole. step HTML5 Krok zvýšení pro číselná pole. Pouze pro následující typy ovládání: číslo , rozsah , tel , datum , datum , čas , datum a čas-místní , měsíc , čas a týden (ostatní jsou ignorovány). Výchozí hodnota je 1. hodnota Hodnota prvku. Položka podporuje atribut názvu obraz skrytý zaškrtávací políčko rádio soubor
readonly Označuje, že vstupní pole je pouze pro čtení.
size src Určuje adresu URL obrázku, který se používá jako tlačítko pro odeslání (pouze pro ).
šířka HTML5
Nejpoužívanějším formulářovým prvkem je bezesporu . Slouží k vytváření polí pro zadávání textu, hesel a výběru souborů, dále tlačítek, zaškrtávacích políček a přepínačů. V HTML 5 je uzpůsoben i pro zadávání nejrůznějších dat, číselných hodnot, telefonních čísel, adres a dokonce i výběr barev. Celá tato rozmanitost je definována atributem type, jehož všechny platné hodnoty jsou uvedeny v tabulce níže. Již víte, že data z formuláře jsou odesílána na server ve formě párů pole=hodnota. Je zadáno jméno pole definovaného prvkem
Tlačítko pro odeslání dat na server. Pokud takové tlačítko není (a není zde možnost s obrázkem, viz níže), pak se formulář odešle stisknutím klávesy Enter za předpokladu, že formulář má jeden prvek a je na něj nastaveno vstupní fokus.
Alternativní možnost pro tlačítko Odeslat data ve formuláři grafický obrázek, jejíž adresa je uvedena v atribut src, A alternativní text- v alt. Šířku a výšku obrázku lze určit v atributy šířky a výšku. Hodnota se nezobrazuje, ale je stále odeslána na server.
Skryté pole. Není vidět v prohlížeči, ale může také obsahovat hodnoty názvu a hodnoty odeslané na server. Používá se, když je nutné předat informace, které uživatel nezadal, ale není vhodné je před ním skrýt, protože přenášenou hodnotu lze snadno zobrazit v zdrojový kód stránky.
Zaškrtávací políčko Zapnout/vypnout. Zobrazuje se jako malá oblast s vybraným nebo nezaškrtnutým zaškrtnutím. Pokud prvek obsahuje booleovský atribut checked="checked", bude standardně nastaven.
Přepínač zobrazený jako kruh s tučnou tečkou (hodnota je vybrána) nebo bez ní (není vybrána). Výchozí hodnota je určena stejným atributem checked="checked". Na rozdíl od jiných typů polí může mít formulář více prvků se stejným názvem, ale vybrat lze pouze jeden z nich. Když vyberete jiný prvek se stejným názvem, zaškrtnutí u ostatních se automaticky zruší. Tímto způsobem server obdrží pouze hodnotu vybraného prvku. Můžete vytvořit několik skupin takových přepínačů a dát prvkům každého z nich jiný název.
Výběr souboru. Zobrazuje se podobně jako textové pole, ale vpravo je přidáno tlačítko Procházet. Když na něj kliknete, zobrazí se dialogové okno pro výběr souboru. Povolené typy MIME nahraných souborů můžete omezit tak, že je uvedete oddělené čárkami v atributu accept. Můžete také povolit výběr více souborů zadáním booleovského atributu multiple="multiple". Nemůžete však použít atribut value s prvkem pro výběr souboru.

Následují hodnoty atributu type, jak jsou zavedeny ve standardu HTML 5.

určité typyvyhledávání e-mail url tel číslo rozsah čas datum datum a čas-místní datum a čas týden měsíc barva
Textové pole pro zadání vyhledávací dotaz. Odlišné od normálního textové pole jeho lexikální účel. Některé prohlížeče jej zobrazují přídavné tlačítko vyklízení pole.
Textové pole pro zadávání e-mailových adres. Ve výchozím nastavení prvek přijímá pouze jednu adresu, ale zadáním booleovského atributu multiple="multiple" můžete uživateli umožnit zadat více adres oddělených čárkami.
Textové pole pro zadání absolutního IRI.
Pole pro zadání telefonních čísel. Na rozdíl od vstupních polí poštovní adresy a URL, telefonní číslo ve výchozím nastavení neprojde ověřením při odesílání dat, protože jich je mnoho různé formáty telefonní čísla.
Číselné vstupní pole. Vizuálně podobné textu, ale s přidáním tlačítek se šipkami, které umožňují zvýšit a snížit hodnotu.
Speciální prvek pro výběr hodnoty z daného rozsahu. Je to posuvník, jehož minimální a maximální hodnoty jsou uvedeny v atributu min a max a krok je uveden v atributu step.
Prvek pro zadání času. Podobné jako číselné pole, ale rozdělené na hodiny a minuty.
Nástroj pro výběr data, který představuje rozevírací gregoriánský kalendář.
Kombinace předchozích dvou prvků pro zadání data a času bez zohlednění časového pásma.
Stejné jako předchozí prvek, ale s časovým pásmem nastaveným na UTC.
Prvek pro výběr týdne. Vizuálně podobný prvku s type="date" , liší se pouze formátem hodnoty.
Prvek pro výběr měsíce. Vizuálně podobný prvku s type="date" , liší se pouze formátem hodnoty.
Speciální prvek pro výběr barvy v RGB formát.

Zmíněné atributy min , max a step umožňují definovat rozsah a krok přijatelné hodnoty nejen pro prvek s typem range , ale také v případě čísla a všech typů spojených s výběrem data a času, včetně týdne a měsíce . Hodnoty těchto atributů, stejně jako atribut value, musí být samozřejmě ve vhodném formátu, což lze v praxi snadno zjistit přidáním požadovaný prvek do dokumentu.

Všechna textová pole s libovolnou délkou hodnoty podporují tři další atributy: maxlength , která umožňuje omezit tuto délku; size , která určuje počet znaků, které se mohou vizuálně vejít do prvku (relativní šířka prvku); stejně jako vzor , ve kterém můžete určit regulární JavaScriptový výraz, který definuje vzor platných hodnot. Například pattern="" znamená, že toto pole může obsahovat číslo od 0 do 9.

Prvek podporuje atribut automatického doplňování, podobný atributu formuláře. Hodnoty zapnuto a vypnuto vám umožňují povolit nebo zakázat funkci automatického vyplňování polí prohlížeče. Ve výchozím nastavení je atribut nastaven na on .

Víceřádkový text, atributy textových prvků

Obecně řečeno, prvek nepodporuje zalomení řádků, což znamená, že neumožňuje psaní. víceřádkový text. Pro tyto účely existuje speciální značka, jejíž název je také určen atributem name. Jeho relativní velikosti lze definovat v atributy řádků a cols označující číslo viditelné čáry a znaky v řetězci, resp. Obsah není uložen v atributu value, ale mezi otevírací a uzavírací značkou. jako v, maximální délka hodnoty lze specifikovat pomocí atributu maxlength.

Zde můžete umístit velký víceřádkový text...

Pokud se text nevejde na řádek, přesune se na další. Pokud je v prvku více řádků, než se vejde, automaticky se zobrazí posuvník. HTML 5 má také atribut , který určuje , jak se obsah přenáší na server - wrap . Při nastavení na hard přidá na konec každého řádku kód pomlčky. Výchozí hodnota zalamování je měkké, což nepřidává zalomení řádků.

Oba prvky podporují booleovský atribut readonly="readonly", který je nastavuje do režimu pouze pro čtení a zabraňuje úpravám obsahu. HTML 5 navíc zavedlo možnost používat atribut placeholder k přidání krátkého popisku k těmto prvkům, vysvětlujícím uživatelům, jaké informace se od nich požadují (pro dlouhé popisky použijte atribut názvu). A s nastavením boolean povinný atribut="vyžadováno" , řeknete prohlížeči, že toto pole musí být vyplněno, aby byl formulář odeslán na server.

Alternativní tlačítko, přetížení atributů formuláře

Historicky lze tlačítka přidávat nejen pomocí značky, ale také pomocí prvku. Obecně opakuje část funkčnosti, která se týká tlačítek. Hodnotu atributu type lze tedy resetovat , odeslat a tlačítko , které zodpovídají za funkce vymazání formuláře, odeslání dat a tlačítko bez konkrétní akce, resp. Značka se liší tím, že je spárovaná a popisek na tlačítku není určen v atributu value, ale v obsahu prvku.

Klikněte na tlačítko Odeslat, ať už je to nebo , vám umožňuje přepsat některé atributy formuláře (prvku), ke kterému se vztahují. Jedná se o atributy action , enctype , method , novalidate a target a jejich „tlačítkové“ protějšky jsou formation , formenctype , formmethod , formnovalidate a formtarget .

Vyberte ze seznamu

K uspořádání rozevíracích seznamů použijte strukturu skládající se z prvku, uvnitř kterého jsou umístěny podřízené prvky představující možnosti výběru.

Koláčový chléb

7 komentářů Děkuji za takové vzdělávací zdroje. Díky moc! bez příkladů něco není zajímavé nebo poučné... Super!!! díky Řekněte mi, má TYPE nějakou jinou hodnotu, abyste získali samostatný výběr měsíce a samostatný výběr roku jako na tomto obrázku https://raw.githubusercontent.com/puzankov/markup_hw/master/lesson2/forms_hw.png

Běda. kombinuje výběr roku a měsíce v jednom prvku. Pro výběr roku však postačí type="number" a pro výběr měsíce - .

"propojit jej s několika formuláři současně. Chcete-li to provést, musíte atribut formuláře uveďte identifikátory těchto formulářů oddělené mezerou."

K dispozici je formulář s tlačítkem (odeslat) a samostatnou textovou oblastí.
Zkusil jsem je propojit přes atribut form.
Vše je v pořádku, ALE po kliknutí na odeslat se text nepřenese na server.
Co je to sůl?

Zdá se, že atribut datetime byl odstraněn, prohlížeč jej již nepodporuje, pouze datetime-local.

Tag INPUT je jedním z všestranných formulářových prvků a umožňuje tvořit různé prvky rozhraní a poskytují interakci s uživatelem. INPUT slouží hlavně k vytváření textových polí, různá tlačítka, přepínače a zaškrtávací políčka. Ačkoli Prvek INPUT Není nutné umístit FORM do kontejneru, který definuje formulář, ale pokud musí být uživatelský vstup odeslán na server, kde je zpracován programem CGI, pak je vyžadován FORM. Totéž platí v případě zpracování dat pomocí klientské aplikace, například skripty v JavaScriptu.

Hlavní parametr Značka INPUT, která určuje typ prvku - typ . Umožňuje nastavit následující prvky formuláře: textové pole (text), pole pro heslo (heslo), přepínač (zaškrtávací políčko), zaškrtávací políčko (přepínač), skryté pole (skryté), tlačítko (tlačítko), tlačítko pro odeslání formuláře ( odeslat), tlačítko pro vymazání formuláře (reset), pole pro odeslání souboru (souboru) a tlačítko s obrázkem (obrázkem). Každý prvek má svůj vlastní seznam parametrů, které určují jeho vzhled a vlastnosti.

Syntax


Uzavírací štítek
Není vyžadováno.

Možnosti
zarovnat – definuje zarovnání obrázku.
alt - alternativní text pro tlačítko s obrázkem.
border - tloušťka rámečku kolem obrázku.
zaškrtnuto – předem aktivovaný přepínač nebo zaškrtávací políčko.
zakázáno - blokuje přístup a úpravu prvku.
maxlength - maximální povolený počet znaků v textu.
název - název pole, určený k tomu, aby jej formulářový procesor mohl identifikovat.
readonly - určuje, že pole nemůže uživatel změnit.
size - šířka textového pole.
src - hodnota prvku.

Příklad 1: Použití tagu INPUT



Vaše jméno:



Jaký prohlížeč převážně používáte:



Internet Explorer

Netscape

Opera

FireFox

Mozilla


Komentář








Popis parametrů tagu INPUT Parametr ALIGN

Popis
Určuje, jak zarovnat pole obrázku vzhledem k textu nebo jiným prvkům formuláře.

Syntax

Použitelné

Argumenty
Tabulka 1 uvádí možný význam zarovnat parametr a výsledek jeho použití.

Tabulka 1. Použití hodnot parametrů zarovnání zarovnat hodnotu Popis Příklad
absťák Spodní okraj obrázku je zarovnán s spodní okraj aktuální linka.
zdržovat se Střed obrázku je zarovnán k střední čára text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
spodní nebo základní linie Spodní okraj obrázku je zarovnán s účaří textového řádku. Tato hodnota je standardně nastavena. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
vlevo Obrázek je umístěn k levému okraji nadřazeného prvku. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
střední Střed obrázku je zarovnán k účaří aktuálního řádku textu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
právo Obrázek je zarovnán k pravému okraji nadřazeného prvku. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
textový top Horní okraj obrázku je zarovnán k nejvyššímu textový prvek aktuální linka. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
nahoře Horní okraj obrázku je zarovnán k nejvyššímu prvku aktuálního řádku. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Výchozí hodnota
dno

Příklad 2: Zarovnání pole s obrázkem




...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...



Poznámka
Přestože všechny hodnoty parametru align jsou podporovány prohlížeči, na argumenty absbottom , absmiddle , baseline a texttop se specifikace HTML 4 nevztahuje.

Parametr ALT

Popis
Parametr alt nastavuje alternativní text pro pole obrázku. Tento text vám umožní získat textové informace o kresbě, když je v prohlížeči zakázáno načítání obrázků. Protože se obrázky načítají poté, co o nich prohlížeč obdrží informace, náhradní text obrázku se zobrazí dříve. A při načítání bude text nahrazen obrázkem. Prohlížeče také zobrazují alternativní text jako nápovědu, když najedete myší na obrázek.

Syntax

Argumenty
Jakékoliv vhodné textový řetězec. Musí být uzavřen ve dvojitých nebo jednoduchých uvozovkách.

Výchozí hodnota
Žádný.

Příklad 3: Přidání alternativního textu




...



parametr BORDER

Popis
Prohlížeče zacházejí s obrázky přidanými pomocí značky INPUT podobně jako s obrázky vytvořenými pomocí Značka IMG. Kolem obrázku můžete přidat i rámeček, jehož barva odpovídá barvě textu.

Syntax

Argumenty
Jakékoli kladné celé číslo v pixelech.

Výchozí hodnota
0

Příklad 4: Přidání rámečku k obrázku




...



Poznámka
V současné době je tato možnost podporována pouze prohlížečem Netscape, ostatní prohlížeče ji ignorují a zobrazují obrázek bez ohraničení.

CHECKED parametr

Popis
Tento parametr určuje, zda je předem zaškrtnutý prvek formuláře, jako je zaškrtávací políčko nebo přepínač. V případě použití přepínačů (checkbox) lze zaškrtnout pouze jeden prvek skupiny pro checkboxy (radiobutton), je přípustné označit alespoň všechny prvky.

Syntax

Argumenty
Žádný.

Výchozí hodnota

Příklad 5. Označení přepínacích tlačítek




S kterým operační systémy znáte se?

Windows 95/98

Windows 2000

Systém X
Linux
X3-DOS


parametr VYPNUTO

Popis
Blokuje přístup a úpravu pole formuláře. V tomto případě se zobrazí šedě a uživatel jej nemůže aktivovat. Navíc takové pole nemůže získat fokus stisknutím klávesy Tab, pomocí myši nebo jinak. Tento stav pole však lze změnit pomocí skriptů.

Syntax

Použitelné
Ke všem formulářovým prvkům.

Argumenty
Žádný.

Výchozí hodnota
Ve výchozím nastavení je tato možnost zakázána.









Parametr MAXLENGTH

Popis
Nastavuje maximální počet znaků, které může uživatel zadat do textového pole. Když tohoto čísla dosáhnete během psaní, další zadávání nebude možné.

Syntax

Argumenty
Jakékoli kladné celé číslo ve znacích.

Výchozí hodnota
Zadávání znaků není omezeno.

Příklad 7: Omezení počtu znaků zadaných do pole









Parametr NAME

Popis
Definuje jedinečný název pro prvek formuláře. Tento název se obvykle používá při odesílání dat na server nebo pro přístup k zadaným datům pole prostřednictvím skriptů.

Syntax

Použitelné
Ke všem formulářovým prvkům.

Argumenty
Jméno je sada znaků, včetně čísel a písmen. JavaScript rozlišuje velká a malá písmena, takže když odkazujete na prvek jménem, ​​použijte stejný tvar jako parametr name.

Výchozí hodnota
Žádný.

Příklad 8: Použití názvu pole



funkce dataField(f) (
alert("Zadali jste: " + f.comment.value);




Zadejte text





Parametr pouze pro čtení

Popis
Když je do tagu INPUT přidána možnost jen pro čtení, uživatel nemůže upravit textové pole, včetně psaní nový text nebo upravit stávající. Navíc takové pole nemůže získat fokus stisknutím klávesy Tab, pomocí myši nebo jinak. Stav a obsah pole však lze změnit pomocí skriptů.

Syntax

Argumenty
Žádný.

Výchozí hodnota
Ve výchozím nastavení je tato hodnota zakázána.

Příklad 9: Pole pouze pro čtení





Parametr SIZE

Popis
Šířka textového pole, která je určena počtem znaků v jednoprostorovém písmu. Jinými slovy, šířka je určena počtem sousedních písmen stejné horizontální šířky. Pokud se velikost písma změní pomocí stylů, změní se odpovídajícím způsobem i šířka.

Syntax

Argumenty
Jakékoli kladné celé číslo.

Výchozí hodnota
20

Příklad 10: Šířka pole





Parametr SRC

Popis
Adresa grafický soubor, který se zobrazí na webové stránce v poli obrázku. Nejoblíbenější soubory v formát GIF a JPEG.

Syntax

Argumenty
Hodnota se bere jako plná resp relativní cesta do souboru.

Výchozí hodnota
Žádný.

Příklad 11. Cesta ke grafickému souboru



...


parametr TYPE

Popis
Řekne prohlížeči, jaký typ prvku formuláře je.

Syntax

Argumenty
Tabulka 2 uvádí možné hodnoty parametru type a výsledný typ pole formuláře.



parametr VALUE

Popis
Definuje hodnotu prvku formuláře, která bude odeslána na server nebo přijata pomocí klientských skriptů. Na server je odeslána dvojice jméno/hodnota, kde jméno je určeno parametrem name tagu INPUT a hodnota je určena parametrem value.

V závislosti na typu prvku hraje parametr value následující roli:

  • pro tlačítka (input type=button | reset | submit ) nastaví na nich textový popisek;
  • pro textová pole (typ vstupu=heslo | text ) určuje dříve zadaný řetězec. Uživatel může mazat text a zadávat své vlastní znaky, ale při použití ve formuláři Resetovací tlačítka vlastní text je vymazán a hodnota zadaná v parametru je obnovena;
  • pro zaškrtávací políčka a přepínače (typ vstupu=checkbox | radio ) jednoznačně definuje každý prvek tak, aby klient, resp. serverový program mohl jasně určit, kterou položku uživatel vybral.

Syntax

Použitelné
Ke všem formulářovým prvkům.

Argumenty
Libovolný textový řetězec.

Výchozí hodnota
Žádný.

Příklad 13: Přidání hodnoty pole



Jak si myslíte, že zkratka „OS“ znamená?

Důstojníci

operační systém

Skvělá pruhovaná muška

Štítek (z anglického vstupu - vstup) je jedním z všestranných formulářových prvků a umožňuje vytvářet různé části rozhraní a poskytovat interakci s uživatelem.

Určeno především pro vytváření textových polí, různých tlačítek, přepínačů a zaškrtávacích políček.

Hlavním atributem, který určuje typ prvku, je typ. Umožňuje nastavit následující prvky formuláře: textové pole (text), pole pro heslo (heslo), přepínač (rádio), zaškrtávací políčko (zaškrtávací políčko), skryté pole (skryté), tlačítko (tlačítko), tlačítko pro odeslání formuláře ( odeslat), tlačítko pro vymazání formuláře (reset), pole pro odeslání souboru (souboru), tlačítko s obrázkem (obrázkem) atd. Pro každý prvek existuje vlastní seznam atributů, které určují jeho vzhled a vlastnosti. Kromě toho bylo do HTML5 přidáno více než tucet nových atributů.

Syntax

Závěrečná značka není vyžadována.

WAI ARIA

Neexistuje žádná výchozí hodnota role.

Platné hodnoty rolí:

  • step HTML5 Krok zvýšení pro číselná pole. Pouze pro následující typy ovládání: číslo , rozsah , tel , datum , datum , čas , datum a čas-místní , měsíc , čas a týden (ostatní jsou ignorovány). Výchozí hodnota je 1. hodnota Hodnota prvku.
  • zaškrtávací políčko
  • combobox
  • odkaz
  • položka menu
  • zaškrtávací políčko položky nabídky
  • menuitemradio
  • volba
  • rádio
  • vyhledávací pole
  • posuvník
  • otočné tlačítko
  • přepínač
  • textové pole
Atributy
  • přijmout – Nastaví filtr na typy souborů, které můžete odeslat prostřednictvím pole pro nahrání souboru.
  • alt – Alternativní text pro tlačítko s obrázkem.
  • autocomplete - Povolí nebo zakáže automatické dokončování.
  • autofocus - Nastaví fokus na pole formuláře.
  • zaškrtnuto – Předem aktivovaný přepínač nebo zaškrtávací políčko.
  • dirname - Parametr, který přenáší směr textu na server.
  • vypnuto - Blokuje přístup a úpravu prvku.
  • formulář - Přiřadí pole k formuláři jeho identifikátorem.
  • formation - Definuje adresu obslužného programu formuláře.
  • formenctype – Nastavuje, jak jsou data formuláře zakódována při odeslání na server.
  • formmethod – Řekne prohlížeči, jakou metodu má použít k odeslání dat formuláře na server.
  • formnovalidate - Zruší vestavěné ověřování dat.
  • formtarget - Definuje okno nebo rámec, do kterého bude načten výsledek vrácený obsluhou formuláře.
  • seznam – Ukazuje na seznam možností, které lze vybrat při zadávání textu.
  • max - Horní hodnota pro zadání čísla nebo data.
  • maxdélka - Maximální množství znaky povolené v textu.
  • min - Nižší hodnota pro zadání čísla nebo data.
  • minlength – Minimální povolený počet znaků v textu.
  • více - Umožňuje stahovat více souborů současně.
  • název – Název pole, určený k tomu, aby jej formulářový procesor mohl identifikovat.
  • vzor – Nastavuje vzor vstupu.
  • zástupný symbol – zobrazí text nápovědy.
  • readonly - Určuje, že pole nemůže být upraveno uživatelem.
  • povinné – povinné pole.
  • velikost - Šířka textového pole.
  • src - Adresa grafického souboru pro pole obrázku.
  • krok - Krok zvýšení pro číselná pole.
  • typ – Řekne prohlížeči, jaký typ prvku formuláře je.
  • value – Hodnota prvku.
přijmout

Nastaví filtr na typy souborů, které můžete nahrát prostřednictvím pole pro nahrání souboru. Typ souboru je určen jako typ MIME pro více hodnot, jsou uvedeny oddělené čárkami. Pokud se soubor neshoduje nainstalovaný filtr, nezobrazuje se v okně pro výběr souboru.

Platí pro pole file send().

Podpora prohlížeče

Výchozí hodnota

alt

Atribut alt nastavuje alternativní text pro pole obrázku. Tento text umožňuje získat textové informace o obrázku, když je v prohlížeči zakázáno načítání obrázků, a je určen i pro vyhledávače.

Syntax

Hodnoty

Jakýkoli vhodný textový řetězec.

Výchozí hodnota

automatické doplňování

Tento atribut pomáhá vyplnit pole formuláře textem, který do nich byl dříve zadán. Hodnoty jsou uloženy a nahrazeny prohlížečem, zatímco automatické doplňování může uživatel z bezpečnostních důvodů zakázat v nastavení prohlížeče a nelze jej pak ovládat pomocí atributu autocomplete.

Po zadání prvních písmen textu se zobrazí seznam dříve uložených hodnot, ze kterých si můžete vybrat tu, kterou potřebujete.

Automatické vyplňování konkrétní obor forma je vázána na svůj atribut name a je ztracena, když se změní hodnota.

Syntax

Hodnoty

  • on - Povolí automatické dokončování textu.
  • vypnuto – deaktivuje automatické vyplňování. Tato hodnota se obvykle používá k tomu, aby prohlížeč neukládal důležitá data (hesla, čísla bankovních karet), stejně jako zřídka zadávaná nebo jedinečná data (captcha).

Výchozí hodnota

Záleží na nastavení prohlížeče.

autofokus

Automaticky nastaví fokus na pole formuláře. Do takového pole můžete okamžitě psát text, aniž byste na něj výslovně klikali kurzorem myši.

Syntax

Hodnoty

Výchozí hodnota

Ve výchozím nastavení není nastaven atribut autofocus.

zaškrtnuto

Tento atribut určuje, zda je předem zaškrtnutý prvek formuláře, jako je zaškrtávací políčko nebo přepínač. Při použití přepínacích tlačítek lze zaškrtnout pouze jeden prvek skupiny u zaškrtávacích políček je možné označit alespoň všechny prvky.

Syntax

Hodnoty

Výchozí hodnota

dirname

Pokud je přítomen atribut dirname, je na server odeslán pár název/hodnota, kde je název určen atributem dirname a hodnota je nahrazena prohlížečem. Pro text běžící zleva doprava bude hodnota ltr a pro text běžící zprava doleva (například hebrejština) bude hodnota rtl .

Syntax

Hodnoty

Libovolný textový řetězec, který slouží jako název parametru. Pro označení, že tento parametr určuje směr textu, je běžné přidat na konec řádku .dir.

Výchozí hodnota

zakázáno

Blokuje přístup a úpravu pole formuláře. V tomto případě se zobrazí šedě a uživatel jej nemůže aktivovat. Navíc takové pole nemůže získat fokus stisknutím klávesy Tab, pomocí myši nebo jinak. Tento stav pole však lze změnit pomocí skriptů. Hodnota blokovaná v poli není odeslána na server.

Syntax

Hodnoty

Výchozí hodnota

Ve výchozím nastavení je tento atribut zakázán.

formulář

Přidruží pole k formuláři pomocí jeho identifikátoru. Takové spojení je nutné, když se pole nachází mimo hranice, například při jeho vytváření programově nebo z konstrukčních důvodů.

Syntax

...

Hodnoty

Identifikátor formuláře (hodnota atributu id prvku).

Výchozí hodnota

formace

Definuje adresu obslužného programu formuláře - jedná se o program, který přijímá data formuláře a provádí s nimi požadované akce. Atribut formace má podobný účinek jako akční atribut prvek .

Syntax

Hodnoty

formanctype

Nastavuje, jak jsou data formuláře zakódována při odeslání na server. Obvykle se zadává explicitně, když se pole používá k odeslání souboru (input type="file"). Tento atribut je podobný jako atribut enctype prvku, když jsou formynctype a enctype použity společně, druhý jmenovaný je ignorován.

Syntax

Hodnoty

  • application/x-www-form-urlencoded - Místo mezer vložte + , symboly jako ruská písmena jsou kódovány jimi hexadecimální hodnoty(například %D0%9F%D0%B5%D1%82%D1%8F místo Petya).
  • multipart/form-data - Data nejsou zakódována. Tato hodnota se používá při odesílání souborů.
  • text/plain - Mezery jsou nahrazeny znaménkem +, písmena a další znaky nejsou kódovány.

Výchozí hodnota

application/x-www-form-urlencoded

formulářová metoda

Atribut sděluje prohlížeči, jakou metodu má použít k odeslání dat formuláře na server.

Syntax

Hodnoty

Existují dva způsoby - GET a POST, které jsou specifikovány klíčová slova získat a odeslat.

  • get – Tato metoda je navržena tak, aby přímo předávala data formuláře adresní řádek jako páry jméno=hodnota, které jsou přidány k adrese stránky za otazník a jsou odděleny ampersandem (symbol &). Úplná adresa například to bude http://site.ru/doc/?name=Vasya&password=pup. Objem dat v metodě je omezen na 4 KB.
  • post - Odešle data na server v požadavku prohlížeče, množství odeslaných dat je omezeno pouze nastavením serveru.

Výchozí hodnota

formnovalidat

Přepíše vestavěné ověření dat zadaných uživatelem do formuláře před odesláním formuláře. Tuto kontrolu provádí prohlížeč automaticky pro pole , a také, zda má prvek vzor nebo požadovaný atribut.

Syntax

Hodnoty

Výchozí hodnota

Ve výchozím nastavení je tento atribut zakázán.

formtarget

Definuje název rámce, do kterého bude načten výsledek vrácený obslužnou rutinou formuláře jako dokument HTML.

Syntax

Hodnoty

Hodnota je název rámce, specifikováno atributem jméno. Pokud je nastaveno neexistující jméno, otevře se nová karta. Následující názvy lze zadat jako vyhrazené názvy.

  • _blank – Načte stránku do nová karta prohlížeč.
  • _self – Načte stránku na aktuální kartu.
  • _parent - Načte stránku do nadřazeného rámce; pokud nejsou žádné snímky, pak tato hodnota funguje jako _self .
  • _top - Zruší všechny rámce a načte stránku v celém okně prohlížeče; pokud nejsou žádné snímky, pak tato hodnota funguje jako _self .

Výchozí hodnota

seznam

Ukazuje na seznam možností vytvořených prvkem, které lze vybrat při psaní. Tento seznam je zpočátku skrytý a zpřístupní se, když pole získá fokus.

Syntax

Hodnoty

Název ID položky.

Výchozí hodnota

max

Nastaví nejvyšší hodnotu pro zadání čísla nebo data do pole formuláře.

Syntax

Hodnoty

Výchozí hodnota

maxdélka

Nastavuje maximální počet znaků, které může uživatel zadat do textového pole. Když tohoto čísla dosáhnete během psaní, další zadávání nebude možné.

Syntax

Hodnoty

Výchozí hodnota

Zadávání znaků není omezeno.

min

Nastaví nižší hodnotu pro zadání čísla nebo data do pole formuláře.

Syntax

Hodnoty

Kladné nebo záporné celé číslo (pro typ="číslo" , type="rozsah").

Datum ve formátu RRRR-MM-DD (například: 2012-12-22) pro type="date" .

Výchozí hodnota

mindélka

Určuje minimální počet znaků, které může uživatel zadat do textového pole. Pokud je počet znaků menší specifikovaná hodnota, pak prohlížeč zobrazí chybovou zprávu a neodešle formulář.

Syntax

Hodnoty

Jakékoli kladné celé číslo.

Výchozí hodnota

násobek

Atribut multiple umožňuje zadat více souborů současně v poli pro nahrávání souboru a také více e-mailových adres. Při použití dvou nebo více poštovních adres je třeba je oddělit čárkami.

Syntax

Hodnoty

Výchozí hodnota

Ve výchozím nastavení je atribut multiple zakázán.

jméno

Definuje jedinečný název pro prvek formuláře. Tento název se obvykle používá při odesílání dat na server nebo pro přístup k zadaným datům pole prostřednictvím skriptů.

Syntax

Hodnoty

Jméno je sada znaků, včetně čísel a písmen. JavaScript rozlišuje velká a malá písmena, takže když odkazujete na prvek jménem, ​​použijte stejnou formu pravopisu jako atribut name.

Výchozí hodnota

vzor

Určuje regulární výraz, který vyžaduje zadání a ověření dat do pole formuláře. Pokud je přítomen atribut vzor, ​​nebude formulář odeslán, dokud nebude pole správně vyplněno.

Podpora prohlížeče

Mohu použít vstupní vzor? Údaje o podpoře funkce input-pattern ve všech hlavních prohlížečích z caniuse.com.

Syntax

Hodnoty

Některé typické regulární výrazy jsou uvedeny v tabulce. 1.

Tabulka 1. Regulární výrazy Popis výrazu
d Jedna číslice od 0 do 9.
D [^0-9] Jakýkoli znak jiný než číslo.
s Plocha.
Pouze kapitál latinské písmeno.
V každém případě pouze latinská písmena.
[A-Yaa-yaYoyo] V každém případě pouze ruská písmena.
Jakékoli písmeno ruské a latinské abecedy.
{3} Tři čísla.
{6,} Nejméně šest latinských písmen.
{,3} Ne více než tři číslice.
{5,10} Pět až deset číslic.
^+$ Jakékoli slovo v latině.
^[А-Яа-яЁеоs]+$ Jakékoli slovo v ruštině včetně mezer.
^[ 0-9]+$ Jakékoli číslo.
{6} PSČ.
d+(,d(2))? Číslo ve formátu 1,34 (oddělené čárkou).
d+(.d(2))? Číslo ve formátu 2.10 (oddělovač teček).
d(1,3).d(1,3).d(1,3).d(1,3) IP adresa
zástupný symbol

Zobrazí text uvnitř pole formuláře, který zmizí při aktivaci nebo psaní. Obvykle se zobrazuje šedě.

Podpora prohlížeče

Mohu použít input-placeholder? Údaje o podpoře funkce input-placeholder ve všech hlavních prohlížečích z caniuse.com.

Syntax

Hodnoty

Textový řetězec. Pokud se v řetězci očekává mezera, musí být uzavřena do dvojitých nebo jednoduchých uvozovek.

Výchozí hodnota

pouze pro čtení

Když je k prvku přidán atribut jen pro čtení, uživatel nemůže upravit textové pole, včetně zadání nového textu nebo úpravy stávajícího textu. Stav a obsah pole však lze změnit pomocí skriptů a data jsou odeslána na server.

Syntax

Hodnoty

Výchozí hodnota

Ve výchozím nastavení je tento atribut zakázán.

požadovaný

Nastaví pole formuláře, které bude vyžadováno před odesláním formuláře na server. Pokud je povinné pole prázdné, prohlížeč zobrazí chybovou zprávu a formulář nebude odeslán. Vzhled a obsah zprávy závisí na prohlížeči a uživatel je nemůže změnit.

Syntax

Hodnoty

Výchozí hodnota

Ve výchozím nastavení je požadovaný atribut zakázán.

velikost

Šířka textového pole, která je určena počtem znaků v jednoprostorovém písmu. Jinými slovy, šířka je určena počtem sousedních písmen stejné horizontální šířky. Pokud se velikost písma změní pomocí stylů, změní se odpovídajícím způsobem i šířka.

Syntax

Hodnoty

Jakékoli kladné celé číslo.

Výchozí hodnota

src

Adresa grafického souboru, který se zobrazí na webové stránce v poli obrázku. Nejoblíbenější soubory v formát PNG a JPEG.

Syntax

Hodnoty

Hodnota je úplná nebo relativní cesta k souboru.

Výchozí hodnota

krok

Nastavuje krok změny čísla pro posuvníky a pole pro zadávání čísel.

Syntax

Hodnoty

Jakékoli celé nebo zlomkové číslo.

Výchozí hodnota

typ

Řekne prohlížeči, jaký typ prvku formuláře je.

Podpora prohlížeče

email, tel, url:

Mohu použít input-email-tel-url? Údaje o podpoře funkce input-email-tel-url ve všech hlavních prohlížečích z caniuse.com.

Mohu použít vstupní barvu? Údaje o podpoře funkce input-color ve všech hlavních prohlížečích z caniuse.com.

Mohu použít vstupní rozsah? Údaje o podpoře funkce vstupního rozsahu ve všech hlavních prohlížečích z caniuse.com.

Mohu použít vstupní číslo? Údaje o podpoře funkce vstupního čísla ve všech hlavních prohlížečích z caniuse.com.

Mohu použít input-search? Údaje o podpoře funkce input-search ve všech hlavních prohlížečích z caniuse.com.

datum, čas, datum a čas:

Mohu použít input-datetime? Údaje o podpoře funkce input-datetime ve všech hlavních prohlížečích z caniuse.com.

Syntax

Hodnoty

Hodnoty typu:

  • tlačítko - Tlačítko.
  • checkbox – zaškrtávací políčka. Umožňuje vybrat více než jednu možnost z navržených.
  • soubor - Pole pro zadání názvu souboru, který je odeslán na server.
  • skryté - Skryté pole. Na webové stránce se nijak nezobrazuje.
  • obrázek - Pole s obrázkem. Po kliknutí na obrázek se data formuláře odešlou na server.
  • heslo – Běžné textové pole, ale liší se od něj tím, že všechny znaky jsou zobrazeny jako hvězdičky. Navrženo tak, aby zabránil komukoli šmírovat zadané heslo.
  • rádio - Spínače. Používají se, když potřebujete vybrat jednu možnost z více nabízených.
  • reset - Tlačítko pro vrácení dat formuláře na původní hodnotu.
  • odeslat - Tlačítko pro odeslání dat formuláře na server.
  • text - Textové pole. Navrženo pro zadávání znaků pomocí klávesnice.

Nové hodnoty přidané do HTML5:

  • barva - Widget pro výběr barvy.
  • datum - Pole pro výběr kalendářního data.
  • datetime – Určuje datum a čas.
  • datetime-local – Zadejte místní datum a čas.
  • email – pro e-mailové adresy.
  • číslo – zadejte čísla.
  • rozsah - Posuvník pro výběr čísel v zadaném rozsahu.
  • hledat – vyhledávací pole.
  • tel - Pro telefonní čísla.
  • čas - na čas.
  • url – pro webové adresy.
  • měsíc – vyberte měsíc.
  • týden - Vyberte týden.

Výchozí hodnota

hodnota

Definuje hodnotu prvku formuláře, která bude odeslána na server nebo přijata pomocí klientských skriptů. Na server je odeslána dvojice „název=hodnota“, kde název je určen atributem name prvku a hodnota je určena atributem value.

V závislosti na typu prvku hraje atribut value následující roli:

  • pro tlačítka (input type="button | reset | submit") nastaví na ně textový popisek;
  • pro textová pole (input type="password | text") určuje dříve zadaný řetězec. Uživatel může text vymazat a zadat své vlastní znaky, ale při použití ve formulářovém tlačítku Reset se uživatelský text vymaže a obnoví se hodnota zadaná v atributu value;
  • for checkboxes and radio buttons (input type="checkbox | radio") jednoznačně definuje každý prvek, takže klientský nebo serverový program může jasně určit, kterou položku uživatel vybral.
  • pro pole souboru (input type="file") nemá žádný účinek.

Syntax

Hodnoty

Libovolný textový řetězec.

Výchozí hodnota

Hodnoty role ARIA
  • - role=tlačítko
  • - role=zaškrtávací políčko
  • - role=textbox
  • - role=tlačítko
  • - role=spinbutton
  • - role=rádio
  • - role=posuvník
  • - role=tlačítko
  • - role=searchbox
  • - role=tlačítko
  • - role=textbox
  • - role=textbox
  • - role=combobox
  • - role=textbox



Nahoru