HTML5 Tutorial Login Page s HTML5 Formuláři
HTML5 přináší mnoho funkcí a vylepšení webové formuláře, byly zavedeny nové atributy a typy vstupů především usnadnit život webovým vývojářům a poskytnout uživatelům webu lepší zkušenosti.
Takže v tomto příspěvku budeme vytvářet přihlašovací stránku pomocí Formuláře HTML5 uvidíte, jak fungují nové přidané funkce.
- Demo
- Stáhněte si zdroj
Vstup HTML5
Podívejme se na následující značení.
Pokud jste dříve pracovali s HTML formuláři, bude to vypadat dobře. Ale všimnete si tam také rozdílů. Vstupy mají zástupný symbol a Povinný atributy, které jsou novými atributy v HTML5.
Zástupný symbol
zástupný symbol Atribut nám umožňuje zadat počáteční text ve vstupu, který zmizí, když je v soustředit se Stav nebo vyplnění. Dříve jsme to dělali s JavaScriptem, ale nyní se s tímto novým atributem stává mnohem snazší.
Povinný atribut
Povinný atribut nastaví pole tak, aby bylo povinné, a proto by neměl být ponechán prázdný před odesláním formuláře, takže pokud uživatel nevyplnil pole, zobrazí se následující chyba.
Nový volič je také zaveden v CSS3, :Povinný na cílová pole pomocí Povinný atribut. Zde je příklad;
input: required border: 1px plná červená;
Typ vstupu e-mailu
První typ vstupu je e-mailem který je ve skutečnosti nový typ pole v HTML5. e-mailem typ poskytne základní ověření e-mailové adresy v poli. Pokud uživatel nevyplní pole e-mailovou adresou, prohlížeč zobrazí následující oznámení;
Používání typů e-mailových vstupů může také poskytnout lepší zkušenost pro mobilní uživatele, jako jsou uživatelé iPhone a Android, kde se zobrazí Klávesnice na obrazovce optimalizovaná e-mailem s vyhrazeným “@” pro rychlejší zadání e-mailové adresy.
The Downsides
Nové funkce formuláře nabízené v HTML5 jsou výkonné a snadno implementovatelné, ale v některých oblastech stále chybí. Například;
zástupný symbol atribut, je podporován pouze v moderních prohlížečích - Firefox 3.7+, Safari 4+, Chrome 4+ a Opera 11+. Pokud tedy potřebujete pracovat v nepodporovaných prohlížečích, můžete tento polyfill použít ve spojení s Modernizr.
Totéž platí s Povinný atribut. Oznámení chyby nelze přizpůsobit, chyba zůstane “Prosím, vyplňte toto pole” spíše než “Vyplňte prosím své jméno”, Tato podpora atributů je také omezena na nejnovější prohlížeče.
Takže pomocí JavaScriptu pro ověření požadovaného pole je (zatím) lepší volbou.
function validateForm () var x = document.forms ["login"] ["uživatelské jméno"]. if (x == null || x == "") alert ("Vyplňte uživatelské jméno"); return false; Stylování formulářů
Dobře, teď pojďme ozdobit náš přihlašovací formulář pomocí CSS. Nejprve dáme pozadí vzor dřeva html štítek.
html background: url ('wood_pattern.png'); velikost písma: 10pt; Pak je třeba odstranit výchozí výplň a okraj v ul tag, který zabalí celý vstupy a plave li vlevo, takže vstupy budou zobrazeny vodorovně vedle sebe.
.loginform ul padding: 0; marže: 0; .loginform li zobrazit: inline; plavat vlevo;
Protože plavíme li, rodiče se zhroutí, takže musíme vyčistit věci kolem rodičů s hackem clearfix.
label display: block; barva: # 999; .cf: before, .cf: after content: ""; displej: tabulka; .cf: po clear: oba; .cf * zoom: 1; : focus obrys: 0;
V CSS3 máme volič negace. Takže ji použijeme k cílení vstupy jiné než Předložit typu, který v tomto případě bude cílit na e-mail a heslo;
.loginform: not ([type = submit]) padding: 5px; pravý okraj: 10px; okraj: 1px pevný rgba (0, 0, 0, 0,3); hraniční rádius: 3px; box-shadow: inset 0px 1px 3px 0px rgba (0, 0, 0, 0,1), 0px 1px 0px 0px rgba (250, 250, 250, 0,5);
Konečně, dáme trochu styl dekorace pro Předložit následovně.
.loginform input [type = submit] hranice: 1px pevné rgba (0, 0, 0, 0,3); pozadí: # 64c8ef; / * Staré prohlížeče * / pozadí: -moz-lineární gradient (horní, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / pozadí: -webk-gradient (lineární, levý horní, levý dolní, barevný doraz (0%, # 64c8ef), barevné zastavení (100%, # 00a2e2)); / * Chrome, Safari4 + * / background: -webkit-lineární gradient (horní, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / pozadí: -o-lineární gradient (horní, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / pozadí: -ms-lineární gradient (horní, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / background: lineární gradient (ke dnu, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / color: #fff; polstrování: 5px 15px; pravý okraj: 0; okraj: 15px; hraniční rádius: 3px; text-shadow: 1px 1px 0px rgba (0, 0, 0, 0,3);
To je vše, nyní můžete vyzkoušet přihlašovací formulář z následujících odkazů.
- Demo
- Stáhněte si zdroj
Závěrečná slova
V tomto tutoriálu jsme se podívali na několik nových funkcí ve formátech HTML5:zástupný symbol, Povinný a e-mailem pro vytvoření jednoduché přihlašovací stránky. Také jsme se dostali přes nevýhody těchto atributů, takže se můžeme rozhodnout pro lepší přístup.
V následujícím příspěvku se podíváme na další nové funkce formuláře HTML5, takže zůstaňte naladěni.
