HTML5 zelfstudieloginpagina met HTML5-formulieren
HTML5 biedt veel functies en verbeteringen webformulieren, er zijn nieuwe attributen en invoertypen die zijn geïntroduceerd voornamelijk om het leven van webontwikkelaars gemakkelijker te maken en webgebruikers betere ervaringen te bieden.
Dus, in deze post gaan we een inlogpagina maken met behulp van HTML5-formulieren om te zien hoe de nieuwe toegevoegde functies werken.
- demonstratie
- Download de bron
HTML5-invoer
Laten we de volgende markup eens bekijken.
Als u al eerder met HTML-formulieren heeft gewerkt, ziet dit er bekend uit. Maar je zult daar ook verschillen opmerken. De ingangen hebben placeholder en verplicht kenmerken, dit zijn nieuwe kenmerken in HTML5.
placeholder
De placeholder attribuut stelt ons in staat om de eerste tekst in de invoer te geven die zal verdwijnen als het in a staat focus staat of wordt ingevuld. Vroeger deden we dat vroeger met JavaScript, maar nu wordt het een stuk eenvoudiger met dit nieuwe kenmerk.
Vereist kenmerk
De verplicht attribuut zal het veld verplicht stellen en mag dus niet leeg worden gelaten voordat het formulier wordt ingediend, dus wanneer de gebruiker het veld niet heeft ingevuld, zal de volgende fout verschijnen.
Nieuwe selector wordt ook geïntroduceerd in CSS3, :verplicht om velden te targeten met verplicht attribuut. Hier is een voorbeeld;
invoer: vereist border: 1px effen rood;
E-mailinvoertype
Het eerste invoertype is e-mail wat eigenlijk is een nieuw veldtype toegevoegd in HTML5 ook. De e-mail type geeft standaard e-mailadres validatie in het veld. Wanneer de gebruiker het veld niet vult met een e-mailadres, zal de browser de volgende melding weergeven;
Het gebruik van e-mailinvoertypen kan ook betere ervaringen opleveren voor mobiele gebruikers, zoals iPhone- en Android-gebruikers, waar het de voor e-mail geoptimaliseerd toetsenbord op het scherm met een toegewijde “@” knop om het e-mailadres sneller te typen.
De nadelen
De nieuwe formulierfuncties die in HTML5 worden aangeboden, zijn krachtig en eenvoudig te implementeren, maar op sommige gebieden ontbreken ze nog steeds. Bijvoorbeeld;
De placeholder attribuut, wordt alleen ondersteund in moderne browsers - Firefox 3.7+, Safari 4+, Chrome 4+ en Opera 11+. Dus, mocht u het nodig hebben om te werken in niet-ondersteunde browsers, dan kunt u deze polyfills gebruiken in combinatie met Modernizr.
Hetzelfde geldt voor de verplicht attribuut. De foutmelding kan niet worden gepersonaliseerd, de fout blijft bestaan “Vul alstublieft dit veld in” liever dan “Vul alstublieft uw voornaam in”, deze kenmerkondersteuning is ook beperkt tot de nieuwste browsers.
Dus, het gebruik van JavaScript om het vereiste veld te valideren is (tot nu toe) een betere optie.
function validateForm () var x = document.forms ["login"] ["gebruikersnaam"]. value; if (x == null || x == "") alert ("Vul de gebruikersnaam in"); return false; Styling the Forms
Oké, laten we nu ons login-formulier versieren met CSS. Eerst zullen we de achtergrond een houtpatroon geven in de html label.
html background: url ('wood_pattern.png'); lettergrootte: 10pt; Vervolgens moeten we de standaard opvulling en marge verwijderen ul tag die het geheel omwikkelt input en drijft de li naar links, zodat de ingangen horizontaal naast elkaar worden weergegeven.
.loginformulier ul opvulling: 0; marge: 0; .loginform li display: inline; zweven: links;
Omdat we het li, de ouders zullen instorten, dus we moeten dingen rond de ouder wissen met de clearfix-hack.
label display: block; kleur: # 999; .cf: before, .cf: after content: ""; weergave: tafel; .cf: na clear: both; .cf * zoom: 1; : focus overzicht: 0;
In CSS3 hebben we de ontkenningsselector. Dus we zullen het gebruiken om te richten input anders dan de voorleggen type, wat in dit geval zal de e-mail en wachtwoordinvoer targeten;
.loginformulier invoer: niet ([type = submit]) opvulling: 5px; margin-right: 10px; grens: 1px vaste rgba (0, 0, 0, 0,3); grensradius: 3px; box-shadow: inzet 0px 1px 3px 0px rgba (0, 0, 0, 0.1), 0px 1px 0px 0px rgba (250, 250, 250, 0.5);
Ten slotte zullen we een kleine stijldecoratie geven voor de voorleggen knop, als volgt.
.loginform input [type = submit] border: 1px solid rgba (0, 0, 0, 0.3); achtergrond: # 64c8ef; / * Oude browsers * / achtergrond: -moz-linear-gradient (boven, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / achtergrond: -webkit-gradiënt (lineair, links boven, linksonder, kleur-stop (0%, # 64c8ef), kleur-stop (100%, # 00a2e2)); / * Chrome, Safari4 + * / achtergrond: -webkit-lineaire gradiënt (boven, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / achtergrond: -o-lineaire gradiënt (boven, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / achtergrond: -ms-lineaire gradiënt (boven, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / achtergrond: lineair verloop (naar beneden, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / color: #fff; opvulling: 5px 15px; marge-rechts: 0; margin-top: 15px; grensradius: 3px; text-shadow: 1px 1px 0px rgba (0, 0, 0, 0.3);
Dat is alles, nu kunt u het inlogformulier uit de volgende links proberen.
- demonstratie
- Download de bron
Laatste woorden
In deze zelfstudie hebben we enkele nieuwe functies in HTML5-formulieren behandeld:placeholder, verplicht en e-mail invoertypen om een eenvoudige inlogpagina te maken. We hebben ook de nadelen van de kenmerken doorlopen, zodat we kunnen besluiten om een betere aanpak toe te passen.
In de volgende post zullen we kijken naar nog een nieuwe HTML5 formulierfuncties, dus houd ons in de gaten.
