HTML5 Tutorial Login-sida med HTML5 formulär
HTML5 ger många funktioner och förbättringar till webbformulär, Det finns nya attribut och ingångstyper som introducerades främst för att underlätta webbutvecklarnas liv och ge bättre upplevelse för webbanvändare.
Så, i det här inlägget kommer vi att skapa en inloggningssida med HTML5-formulär för att se hur de nya tilläggsfunktionerna fungerar.
- demo
- Hämta källa
HTML5-ingång
Låt oss ta en titt på följande markup.
Om du har arbetat med HTML-formulär före, så kommer det att bli bekant. Men du kommer också märka skillnader där. Ingångarna har platshållare och nödvändig attribut, vilka är nya attribut i HTML5.
Platshållare hållare~~POS=HEADCOMP
De platshållare attributet tillåter oss att ge första text i inmatningen som kommer att försvinna när den är i en fokus ange eller fyllas i. Tidigare brukade vi göra det med JavaScript, men nu blir det mycket lättare med det här nya attributet.
Obligatorisk egenskap
De nödvändig attributet anger att fältet är obligatoriskt och bör därför inte lämnas tomt innan formuläret lämnas in, så när användaren inte fyllt i fältet kommer följande fel att visas.
Ny väljare introduceras också i CSS3, :nödvändig att rikta in fält med nödvändig attribut. Här är ett exempel;
inmatning: krävs gräns: 1px fast röd;
E-post Inmatningstyp
Den första inmatningstypen är e-post vilket är faktiskt en ny fälttyp läggs till i HTML5 också. De e-post typ kommer att ge grundläggande e-postadressvalidering i fältet. När användaren inte fyller fältet med en e-postadress kommer webbläsaren att visa följande meddelande;
Använda inmatningstyp för e-post kan också ge bättre upplevelse för mobila användare, som iPhone- och Android-användare, där den kommer att visa e-postoptimerade tangentbord på skärmen med en dedikerad “@” knappen för att hjälpa till att skriva e-postadress snabbare.
The Downsides
De nya formulärfunktionerna som erbjuds i HTML5 är kraftfulla och enkla att implementera, men de saknar fortfarande vissa områden. Till exempel;
De platshållare attribut, stöds endast i moderna webbläsare - Firefox 3.7+, Safari 4+, Chrome 4+ och Opera 11+. Så, om du behöver det för att fungera i icke-stödda webbläsare, kan du använda dessa polyfills i samband med Modernizr.
Samma sak gäller med nödvändig attribut. Felmeddelandet kan inte anpassas, felet kvarstår “Var vänlig fyll i det här fältet” hellre än “Vänligen fyll i ditt förnamn”, detta attribut stöd är också begränsat till de senaste webbläsarna.
Så, med hjälp av JavaScript för att validera det önskade fältet är (hittills) ett bättre alternativ.
funktion validateForm () var x = document.forms ["login"] ["användarnamn"]. värde; om (x == null || x == "") alert ("Vänligen fyll i användarnamnet"); returnera false; Styling formulären
Okej, låt oss nu dekorera vårt inloggningsformulär med CSS. Först kommer vi att ge bakgrunden ett trämönster i html märka.
html bakgrund: url ('wood_pattern.png'); typsnittstorlek: 10pt; Då måste vi ta bort standardpolstring och marginal i ul taggar som omsluter hela ingångar och flyter på li till vänster, så kommer ingångarna att visas horisontellt, sida vid sida.
.loginform ul vaddering: 0; marginal: 0; .loginform li display: inline; flyta till vänster;
Eftersom vi flyter på li, föräldrarna kommer att kollapsa, så vi måste rensa saker kring föräldern med clearfixhacket.
etikett display: block; färg: # 999; .cf: före, .cf: efter innehåll: ""; display: bord; .cf: efter clear: both; .cf * zoom: 1; : fokus disposition: 0;
I CSS3 har vi negationsväljaren. Så vi ska använda den för att rikta in sig ingångar annat än lämna typ, vilket i detta fall kommer att rikta in e-post och lösenordsinmatning;
.loginform input: not ([typ = submit]) padding: 5px; marginal-höger: 10px; gräns: 1px fast rgba (0, 0, 0, 0.3); gränsstråle: 3px; boxskugga: inmatning 0px 1px 3px 0px rgba (0, 0, 0, 0,1), 0px 1px 0px 0px rgba (250, 250, 250, 0,5);
Slutligen, vi kommer att ge en liten stil dekoration för Lämna knappen, enligt följande.
.loginform input [typ = skicka] border: 1px solid rgba (0, 0, 0, 0.3); bakgrund: # 64c8ef; / * Gamla webbläsare * / bakgrund: -moz-linjär-gradient (topp, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / bakgrund: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0%, # 64c8ef), färgstopp (100%, # 00a2e2)); / * Chrome, Safari4 + * / bakgrund: -webkit-linjär-gradient (topp, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / bakgrund: -o-linjär-gradient (topp, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / bakgrund: -ms-linjär gradient (topp, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / bakgrund: linjär gradient (till botten, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / färg: #fff; vaddering: 5px 15px; marginal-höger: 0; marginal-topp: 15px; gränsstråle: 3px; textskugga: 1px 1px 0px rgba (0, 0, 0, 0.3);
Det är det, nu kan du prova inloggningsformuläret från följande länkar.
- demo
- Hämta källa
Slutord
I den här handledningen tittade vi på några nya funktioner i HTML5-formulär:platshållare, nödvändig och e-post Inmatningstyper för att skapa en enkel inloggningssida. Vi har också kommit igenom attributens nackdelar, så vi kan bestämma oss för ett bättre tillvägagångssätt.
I nästa inlägg tittar vi på nya HTML5-formulärfunktioner, så håll dig uppdaterad.
