Stránka HTML5 pre prihlasovacie stránky s formulármi HTML5
HTML5 prináša mnoho funkcií a vylepšení webové formuláre, existujú nové atribúty a typy vstupov, ktoré boli zavedené hlavne aby uľahčili život webových vývojárov a poskytli používateľom internetu lepšie skúsenosti.
Takže v tomto príspevku vytvoríme prihlasovaciu stránku Formuláre HTML5 aby ste zistili, ako fungujú nové funkcie.
- demonštrácie
- Stiahnuť zdroj
Vstup HTML5
Poďme sa pozrieť na nasledujúcu značku.
Ak pracujete predtým s formulármi HTML, bude to vyzerať dobre. Ale všimnete si aj rozdiely. Vstupy majú zástupný a požadovaný atribúty, ktoré sú nové atribúty v jazyku HTML5.
zástupný
zástupný atribút nám umožňuje poskytnúť úvodný text na vstupe, ktorý zmizne, keď je v a ohnisko stav alebo vyplnenie. Predtým sme to robili pomocou jazyka JavaScript, ale teraz sa s týmto novým atribútom stáva oveľa jednoduchšie.
Požadovaný atribút
požadovaný atribút nastaví, aby bolo pole povinné, a preto by sa nemalo ponechať prázdne pred odoslaním formulára, takže ak používateľ neuvedie pole, objaví sa nasledujúca chyba.
Nový selektor je tiež zavedený v CSS3, :požadovaný na zacielenie polí s požadovaný atribútov. Tu je príklad;
vstup: povinný border: 1px solid red;
Typ zadávania e-mailu
Prvý typ vstupu je e-mail čo je skutočne nový typ poľa pridané aj v jazyku HTML5. e-mail typu poskytne základnú e-mailovú adresu v poli. Keď používateľ pole nevyplní e-mailovou adresou, prehliadač zobrazí nasledujúce upozornenie;
Použitie typov e-mailových vstupov môže tiež poskytnúť lepšie skúsenosti používateľom mobilných zariadení, ako sú napríklad používatelia iPhone a Android, kde sa zobrazí klávesnica na obrazovke optimalizovaná pomocou e-mailu s vyhradeným “@” aby ste rýchlejšie napísali e-mailovú adresu.
Downsides
Nové funkcie formátu ponúkané v HTML5 sú výkonné a ľahko implementovateľné, ale v niektorých oblastiach stále chýbajú. Napríklad;
zástupný atribút, je podporovaná iba v moderných prehliadačoch - Firefox 3,7+, Safari 4+, Chrome 4+ a Opera 11+. Ak potrebujete pracovať s nepodporovanými prehliadačmi, môžete použiť tento polyfill v spojení s Modernizrom.
To isté platí aj s požadovaný atribút. Oznámenie o chybe sa nedá prispôsobiť, chyba zostane “Vyplňte toto pole” radšej než “Vyplňte svoje meno”, táto podpora atribútov je obmedzená aj na najnovšie prehliadače.
Používanie jazyka JavaScript na potvrdenie požadovaného poľa je (zatiaľ) lepšou voľbou.
funkcia validateForm () var x = document.forms ["login"] ["username"] hodnota; ak (x == null || x == "") alert ("Vyplňte používateľské meno"); vrátiť falošné; Formulovanie formulárov
Dobre, teraz si dekorujeme náš prihlasovací formulár s CSS. Najprv budeme dať pozadie drevený vzor v html štítok.
html (pozadie: url ('wood_pattern.png'); veľkosť písma: 10pt; Potom je potrebné odstrániť predvolené polstrovanie a okraj ul tag, ktorý obal celý vstupy a pláva Ak doľava, takže vstupy budú zobrazené horizontálne vedľa seba.
.prihláška ul padding: 0; rozpätie: 0; .loginform li zobrazenie: inline; plavák: vľavo;
Vzhľadom k tomu, plavec Ak, rodičia sa zrútia, takže potrebujeme vymazať veci okolo rodiča s jasným fixom.
štítok display: block; farba: # 999; .cf: skôr, .cf: po content: ""; zobrazenie: tabuľka; .cf: po clear: both; .cf * zväčšenie: 1; : zaostrenie obrys: 0;
V CSS3 máme selektor negovania. Takže ju použijeme na zacielenie vstupy iné ako Predložiť typ, ktorý v tomto prípade bude zacielený na zadanie e-mailu a hesla;
.zadaný vstupný login: nie ([type = submit]) padding: 5px; margin-right: 10px; hranica: 1px solid rgba (0, 0, 0, 0.3); polomer okrajov: 3px; box-shadow: vložený 0px 1px 3px 0px rgba (0, 0, 0, 0,1), 0px 1px 0px 0px rgba (250, 250, 250, 0,5);
Nakoniec poskytneme trochu dekorácie štýlu Predložiť , ako je uvedené nižšie.
.zadanie prihlasovacieho formulára [type = submit] border: 1px solid rgba (0, 0, 0, 0.3); pozadie: # 64c8ef; / * Staré prehliadače * / background: -moz-linear-gradient (hore, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / pozadie: -webkit-gradient (lineárny, ľavý horný, ľavý spodný, farebný stop (0%, # 64c8ef), farebný stop (100%, # 00a2e2)); / * Chrome, Safari4 + * / background: -webkit-lineárny gradient (top, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / background: -o-lineárny gradient (top, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / pozadia: -ms-lineárny gradient (hore, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / pozadie: lineárny gradient (dole, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / farba: #fff; polstrovanie: 5px 15px; margin-right: 0; margin-top: 15px; polomer okrajov: 3px; text-tieň: 1px 1px 0px rgba (0, 0, 0, 0.3);
To je ono, teraz môžete vyskúšať prihlasovací formulár z nasledujúcich odkazov.
- demonštrácie
- Stiahnuť zdroj
Konečné slová
V tejto príručke sme sa pozreli na niekoľko nových funkcií vo formátoch HTML5:zástupný, požadovaný a e-mail typy vstupov na vytvorenie jednoduchej prihlasovacej stránky. Takisto sme prekonali nedostatky atribútov, takže môžeme rozhodnúť o lepšom prístupe.
V ďalšom príspevku sa budeme zaoberať ďalšími novými funkciami formátu HTML5, takže zostaňte naladení.
