Ett formulär är ett element i HTML eftersom det är det som gör att vi kan mata in data och därför också interagera med webben och dess databas, vilket kräver kontroller ur säkerhetssynpunkt, eftersom vi från ett formulär kan skicka filer till en server, för att behandla en beställning eller betalning, välja olika element och kontroller av ett formulär, som sedan kommer att bearbetas av en javascript -händelse eller av något annat webbprogrammeringsspråk.
Många gånger måste utvecklare använda olika bibliotek för att kunna utföra uppgif.webpter i formulär för att kunna kontrollera händelser och i vissa fall måste vi tillgripa några oönskade kodmetoder för att skicka data, styra vad som matas in, undvika kodinjektioner eller XSS -attacker.
Om vi vill utföra alla dessa kontroller och händelser kan vi hitta ett stort antal javascript -filer som avsevärt ökar vikten av webben i kb och saktar ner sidan. Det är också osäkert för om någon inaktiverar användningen av Javascript slutar alla kontroller att fungera.
Elementen i former och attribut i HTML5 ger en större grad av kontroll och semantisk markup än dess tidigare version, attribut och egenskaper har lagts till som eliminerar behovet av att utföra kontroller externt genom skript. Formfunktionerna i HTML5 ger bättre kontroll och beror inte på om Javascript är aktiverat eller inaktiverat i din webbläsare.
HTML5 -formulärattribut - Platshållare
Med hjälp av platshållaregendom Vi kan ange ett exempel på vilken typ av data som ska registreras, detta gör att vi kan ge information till användaren för att fungera som en guide. Denna text som vi anger inom kontrollen försvinner när användaren anger ett tecken.
Platshållarattributet kan endast användas i textrutor eller i textområden.
Mönster med reguljära uttryck i former
Mönsterattributet låter oss definiera våra regler för att validera data som användaren anger med hjälp av reguljära uttryck. Ett reguljärt uttryck är en sekvens av tecken som definierar ett datamönster, till exempel anger mönstret [a-z] att användaren bara kan skriva små bokstäver eller att mönstret [0-9] indikerar att endast siffror kan anges.
HTML5 låter dig använda mönster, så om de inmatade tecknen inte matchar det automatiskt definierade mönstret kommer det att generera ett fel.
Vi ska definiera några regler med mönster och stilark att ändra färgen på gränsen om den ogiltiga händelsen inträffar, det vill säga att det som skrivs in av användaren inte överensstämmer med vad som definieras i ett visst mönster.
Vi skapar en fil Example01.html och skriver följande kod:
Mönster med reguljära uttryck
Användare
Nyckel:
E-post:
Datum
Pris
Om vi skickar formuläret kommer det att validera varje fält med avseende på det definierade mönstret och om det inte uppfylls visar det meddelandet som vi definierar i titeltaggen, det kommer också att använda de stilar som definieras i regeln och CSS -egenskaper av den ogiltiga klassen som HTML5 använder.
Till exempel anger vi ett felaktigt mejl:
Vi anger också ett felaktigt datum och ser att det inte tillåter att skicka formuläret. Om vi vill förbättra eller lägga till en visuell effekt kan vi använda CSS för att lägga till en bakgrundsikon i kontrollen där felet inträffar. Till exempel lägger vi till följande css -stilar till de som vi redan hade, vi ändrar ingången till input [type = 'text'] så att formatmallarna bara påverkar textrutorna och inte knappen.
Vi använder följande ikoner:
Bredvid varje kontroll lägger vi till den nödvändiga egenskapen, till exempel:
När vi kör exemplet kan vi se att om vi skickar formuläret med tomma fält visar de oss de obligatoriska och giltiga fälten.
Fördelen med mönster är att vi inte använder JQuery eller någon annan typ av validering och om det här alternativet är inaktiverat i webbläsaren kommer de begränsningar och regler som vi definierar att fortsätta att fungera. Detta innebär inte att vi genom att skicka formuläret undviker kontroller vid bearbetning av data, om vi ska spara i en databas eller skicka dem via post eller utföra någon operation.
Formulär med flera bidrag
Något som var komplext att göra är skicka samma formulär till två olika sidorLåt oss anta ett enda inloggningsformulär som när du klickar på en knapp kommer den att gå till olika sidor där frågorna och informationsprocessen ändras. Detta görs genom att definiera formningsegenskap, där vi anger ett annat behandlingsalternativ för åtgärden som standard.
Formulär med flera bidrag
Användare:
Nyckel:
Det råder ingen tvekan om att interaktion med dessa typer av egenskaper och attribut underlättar utvecklingen av webbplatser i hög grad, utan att behöva använda externa bibliotek och komplexa JavaScript -koder.
Som designers och utvecklare finner vi vanligtvis att ett skript har en viss monotoni för att strukturera html och validera, särskilt för att skriva valideringsregler och sedan visa användaren när det uppstår ett fel. HTML 5 introducerar dessa nya attribut, inmatningstyper och andra element så att vi måste skriva mindre kod och fokusera mer på semantik än syntax.
Dessa regler fungerar i alla webbläsare, oberoende av operativsystemet och vi behöver inte använda andra bibliotek eller hack för att anpassa sig till olika system eller enheter. Vi har sett flera formattribut som hjälper till att förbättra användarupplevelsen och spara utvecklingstid. Det finns några attribut som inte fungerar i alla webbläsare än.
