✅ Formulieren in HTML5 - Nieuwe gegevenstypen

Inhoudsopgave

Een van de problemen die we hadden met de vorige versie van HTML, dat wil zeggen 4, was de validatie omdat we een andere technologie moesten gebruiken voor de validatie ervan, natuurlijk gaven we met Javascript de touch die we nodig hadden om aan deze formulieren te geven wat er ontbrak .
In HTML5 is dit opgelost omdat er enkele geweldige verbeteringen zijn aangebracht voor de eigen validatie en andere voor de eenvoudige bediening op zich om er aantrekkelijker uit te zien.
In dit hoofdstuk gaan we een klein voorbeeld zien van de nieuwe functies van formulieren in HTML5. En we zullen begrijpen dat de nieuwe functies erg belangrijk zijn voor het internet van vandaag.
Houd er rekening mee dat niet alle browsers deze nieuwe functies ondersteunen en degenen die de resultaten wel op hun eigen manier laten zien, maar laten we beginnen:
We weten allemaal dat het label een invoerveld specificeert waar de gebruiker gegevens kan invoeren. Welnu, in HTML5 zien we dat het verschillende soorten invoer of. Deze nieuwe functies zorgen voor een betere invoer- en validatiecontrole.
Type gegevens
: geeft aan dat de gebruiker het veld met tekst moet vullen
: geeft aan dat de gebruiker het veld moet invullen met een geldig e-mailadres
: geeft aan dat de gebruiker het veld moet vullen met url
: geeft aan dat de gebruiker het veld met een kleur moet vullen
: specificeert dat de gebruiker het veld moet vullen met een datum
: specificeert dat de gebruiker het veld moet vullen met een van de maanden
Enkele voorbeelden van HTML5-elementen
Validatie attributen
De validatieattributen maken het mogelijk om een tekstvak of tekstvak een enkel type gegevens te laten accepteren zoals hierboven vermeld en HTML5 zal valideren dat de gegevens correct zijn, voordat het met javascript of jQuery moest worden gedaan.
Een voorbeeld van de validatie van een e-mail

 E-mailadres:

Het Keygen-kenmerk
Telkens wanneer we een wachtwoord gebruiken, willen we het kunnen versleutelen voor meer veiligheid
Het doel van het element is om een veilige manier te bieden om gebruikers te authenticeren.
Het label specificeert een generatorveld met twee sleutels op een formulier.
Wanneer het formulier wordt verzonden, worden twee sleutels gegenereerd, een privé en een openbaar.
De privésleutel wordt lokaal opgeslagen en de openbare sleutel wordt naar de server verzonden. De openbare sleutel kan worden gebruikt om een clientcertificaat te genereren om de gebruiker in de toekomst te authenticeren of om als wachtwoord in een database op te slaan of om sessies te valideren.

 Gebruikerswachtwoord:

Het Autofocus-kenmerk
Autofocus biedt een declaratieve manier om een formulierbesturingselement scherp te stellen tijdens het laden van pagina's. Voorheen moest een ontwikkelaar Javascript schrijven met control.focus (). Met de nieuwe manier kan de browser slimme dingen doen, zoals het besturingselement niet centreren als de gebruiker al een ander typt.