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 HodnotyV tabulce Jsou uvedeny 1 možné hodnoty atribut typu a výsledný pohled na pole formuláře.
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.
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+ | |||
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+ |
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čkaNení 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 .
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
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.
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ářeHistoricky 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 seznamuK 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.pngBě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?
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
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í.
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.
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
...
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í.
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
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.
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
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
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í
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
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
...
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.
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ů.
SyntaxZávěrečná značka není vyžadována.
WAI ARIANeexistuje žá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
- 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.
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
altAtribut 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.
autofokusAutomaticky 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škrtnutoTento 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
dirnamePokud 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ánoBlokuje 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
formaceDefinuje 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
formanctypeNastavuje, 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á metodaAtribut 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
formnovalidatPř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.
formtargetDefinuje 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
seznamUkazuje 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
maxNastaví nejvyšší hodnotu pro zadání čísla nebo data do pole formuláře.
Syntax
Hodnoty
Výchozí hodnota
maxdélkaNastavuje 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.
minNastaví 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élkaUrč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ásobekAtribut 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énoDefinuje 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
vzorUrč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.
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 |
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
srcAdresa 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
krokNastavuje 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
hodnotaDefinuje 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