Een formulier is een element in HTML omdat het ons in staat stelt om gegevens in te voeren en daarom ook interactie met het web en zijn database, wat controle vereist vanuit het oogpunt van veiligheid, aangezien we vanuit een formulier bestanden naar een server kunnen sturen om een bestelling of betaling te verwerken, verschillende elementen en controles van een formulier te selecteren, die vervolgens wordt verwerkt door een javascript-gebeurtenis of door een andere webprogrammeertaal.
Vaak moeten ontwikkelaars verschillende bibliotheken gebruiken om taken in formulieren uit te voeren om gebeurtenissen te controleren en in sommige gevallen moeten we onze toevlucht nemen tot een aantal ongewenste codemethoden om gegevens te verzenden, te controleren wat er wordt ingevoerd, code-injecties of XSS-aanvallen te vermijden.
Als we al deze controles en gebeurtenissen willen uitvoeren, kunnen we een groot aantal javascript-bestanden vinden die het gewicht van het web in kb aanzienlijk vergroten en de pagina vertragen. Het is ook onveilig omdat als iemand het gebruik van Javascript uitschakelt, alle bedieningselementen niet meer werken.
De elementen van formulieren en attributen in HTML5 bieden een grotere mate van controle en semantische opmaak dan de vorige versie, attributen en eigenschappen zijn toegevoegd die de noodzaak elimineren om controles extern uit te voeren via scripts. De formulierfuncties in HTML5 bieden betere controle en zijn niet afhankelijk van het feit of Javascript in uw browser is in- of uitgeschakeld.
HTML5-formulierkenmerken - Tijdelijke aanduiding
Door middel van de tijdelijke eigenschap We kunnen een voorbeeld geven van het type gegevens dat moet worden geregistreerd, hierdoor kunnen we de gebruiker informatie verstrekken om als leidraad te dienen. Deze tekst die we binnen het besturingselement aangeven, zal verdwijnen nadat de gebruiker een teken heeft ingevoerd.
Het placeholder attribuut kan alleen worden gebruikt in tekstvakken of in tekstgebieden.
Patronen met reguliere expressies in formulieren
Met het patroonattribuut kunnen we onze regels definiëren om de gegevens te valideren die de gebruiker invoert met behulp van reguliere expressies. Een reguliere expressie is een reeks tekens die een gegevenspatroon definieert. Het patroon [a-z] geeft bijvoorbeeld aan dat de gebruiker alleen kleine letters kan invoeren of het patroon [0-9] geeft aan dat alleen cijfers kunnen worden ingevoerd.
Met HTML5 kunt u patronen gebruiken, dus als de ingevoerde tekens niet overeenkomen met het automatisch gedefinieerde patroon, wordt er een fout gegenereerd.
Wij gaan definieer enkele regels met patronen en stylesheets om de kleur van de rand te wijzigen als de ongeldige gebeurtenis zich voordoet, dat wil zeggen, wat door de gebruiker is ingevoerd, komt niet overeen met wat is gedefinieerd in een bepaald patroon.
We maken een bestand Voorbeeld01.html aan en schrijven de volgende code:
Patronen met reguliere expressies
Gebruiker
Sleutel:
E-mailadres:
Datum
Prijs
Als we het formulier verzenden, valideert het elk veld met betrekking tot het gedefinieerde patroon en als het niet wordt vervuld, toont het het bericht dat we definiëren in de titeltag, het zal ook de stijlen gebruiken die zijn gedefinieerd in de regel en CSS-eigenschappen van de ongeldige klasse die HTML5 gebruikt.
We voeren bijvoorbeeld een onjuist e-mailadres in:
We vullen ook een foutieve datum in en zien dat het niet mogelijk is om het formulier te verzenden. Als we een visueel effect willen verbeteren of toevoegen, kunnen we CSS gebruiken om een achtergrondpictogram toe te voegen aan het besturingselement waar de fout optreedt. We voegen bijvoorbeeld de volgende css-stijlen toe aan degene die we al hadden, we veranderen de invoer in invoer [type = 'tekst'] zodat de stijlbladen alleen de tekstvakken beïnvloeden en niet de knop.
We gebruiken de volgende iconen:
Naast elk besturingselement voegen we de vereiste eigenschap toe, bijvoorbeeld:
Bij het uitvoeren van het voorbeeld kunnen we zien dat als we het formulier met lege velden verzenden, ze ons de vereiste en geldige velden zullen tonen.
Het voordeel van patronen is dat we geen JQuery of een ander type validatie gebruiken en als deze optie in de browser is gedeactiveerd, blijven de beperkingen en regels die we definiëren werken. Dit betekent niet dat we door het indienen van het formulier controles vermijden bij het verwerken van de gegevens, of we ze in een database moeten opslaan of ze per post moeten verzenden of een bewerking moeten uitvoeren.
Formulier met meerdere inzendingen
Iets dat ingewikkeld was om te doen, is: stuur hetzelfde formulier naar twee verschillende pagina'sLaten we aannemen dat een enkel inlogformulier dat als er op een knop wordt geklikt, naar verschillende pagina's gaat waar de zoekopdrachten en het informatieproces veranderen. Dit wordt gedaan door het definiëren van de vormeigenschap, waar we standaard een andere verwerkingsoptie voor de actie aangeven.
Formulier met meerdere inzendingen
Gebruiker:
Sleutel:
Het lijdt geen twijfel dat interactie met dit soort eigenschappen en attributen de ontwikkeling van websites enorm vergemakkelijkt, zonder dat externe bibliotheken en complexe javascript-codes moeten worden gebruikt.
Als ontwerpers en ontwikkelaars vinden we meestal dat een script een zekere monotonie heeft om html te structureren en te valideren, vooral om validatieregels te schrijven en de gebruiker vervolgens te laten zien wanneer er een fout is. HTML 5 introduceert deze nieuwe attributen, invoertypen en andere elementen, zodat we minder code hoeven te schrijven en ons meer op semantiek dan op syntaxis hoeven te concentreren.
Deze regels werken in alle browsers, onafhankelijk van het besturingssysteem en we hoeven geen andere bibliotheken of hacks te gebruiken om ons aan te passen aan verschillende systemen of apparaten. We hebben verschillende vormkenmerken gezien die de gebruikerservaring helpen verbeteren en ontwikkelingstijd besparen. Er zijn enkele attributen die nog niet in alle browsers werken.
