✅ HTML5-elementen voor formulieren en gegevens

Inhoudsopgave

HTML5 bevat nieuwe elementen om het creëren van gegevensvelden te vergemakkelijken die in veel gevallen met javascript moesten worden geprogrammeerd of een externe bibliotheek moesten toevoegen in een taal die het mogelijk zou maken de mogelijkheden van de xhtml- en html4-elementen uit te breiden.
Veel programmeurs blijven op de traditionele manier werken, aangezien dit door de meeste browsers wordt ondersteund, de nieuwste verbeteringen worden alleen ondersteund door de nieuwere versies.
HTML5 biedt een set nieuwe attributen voor het type attribuut van het invoerelement, dat wil zeggen de meeste elementen van een formulier, zoals tekstvakken.
Enkele van deze bekende html-attributen zijn:
Invoertype = tekst - Tekstvak
invoertype = wachtwoord - Wachtwoordveld dat het wachtwoord met sterretjes verbergt.
Invoertype = indienen - Knop om formulieren in te dienen
NUMMERTYPE KENMERKREGISTER
Het element dat het attribuut type number bevat, maakt het niet alleen mogelijk om te bepalen dat de ingevoerde waarde numeriek is, maar ook om het te beperken tussen maximum en minimum, we kunnen in de afbeelding zien hoe het ook validatie heeft zonder dat er iets hoeft te worden geprogrammeerd

De broncode voor het voorbeeld om dit attribuut te gebruiken is als volgt:

 Typenummer:
Typenummer:
Passagenummer (1-40):

DATUM TYPE KENMERK (DATUM)
Het attribuut date type wordt gebruikt voor velden waar het nodig is om een datum te bevatten. Afhankelijk van de browser en de ondersteuning die ze bieden, lijkt het kalenderbesturingselement een datum te kunnen selecteren.

KLEURTYPE KENMERK
Het kleurtype-attribuut wordt gebruikt voor velden waar het nodig is om een kleur te bevatten. Afhankelijk van de browser en de ondersteuning die ze bieden, lijkt het controletype van het kleurkiezertype in staat te zijn om een kleur te selecteren of de kleur in hexadecimaal te schrijven. De selector verschijnt als een pop-up wanneer op de kleur wordt geklikt.

Kleurtype:
Kies een kleur:

E-MAILTYPE KENMERK
Het kenmerk e-mailtype wordt gebruikt voor velden waarin een e-mail moet worden opgenomen. Afhankelijk van de browser en de ondersteuning die ze bieden, zal het valideren dat de ingevoerde tekst het formaat van een e-mail heeft, anders verschijnt er een foutmelding, dit zal de validatie van een formulier zonder programmeren vergemakkelijken.

E-mailtype
Voer email in:

URL TYPE KENMERK
Het url type attribuut wordt gebruikt voor velden waar het noodzakelijk is om een domein, een url, te bevatten. Afhankelijk van de browser en de ondersteuning die ze bieden, zal het valideren dat de ingevoerde tekst het formaat van een domein heeft, maar er zal een foutmelding verschijnen, dit zal de validatie van een formulier zonder programmeren vergemakkelijken. Het hoeft geen http of www te bevatten, in dat geval, als we het nodig hebben, zullen we het moeten valideren door middel van programmeren.

URL-type
Voer email in:

EIGENSCHAPPEN EN EIGENSCHAPPEN VOOR HTML5
1. Attribuut automatisch aanvullen
Wanneer we in een veld van het formulier schrijven, merken we dat de browser ons over het algemeen de optie geeft om wat we op dat moment aan het schrijven zijn automatisch aan te vullen met tekst waarmee we al eerder hebben geschreven, dit kan beveiligingsproblemen geven, omdat bijvoorbeeld als we schrijven verschillende e-mail omdat de computer door een andere gebruiker is gebruikt, we kunnen schrijven om informatie te zien die een andere gebruiker heeft ingevoerd. In het voorbeeld deactiveren we de autocomplete in de mail, maar niet in de andere velden. Het kan ook worden uitgeschakeld vanuit de browser, maar veel gebruikers weten niet dat de optie bestaat of hoe ze automatisch aanvullen kunnen uitschakelen.

Attribuut automatisch aanvullen
Naam:
E-mailadres:

We zien dat bij het invoeren van het woord Autocomplete en het indienen bij het later openen van hetzelfde formulier en het indrukken van alleen de letter A, het in dit geval al het woord suggereert dat we eerder hadden geschreven.

2. Autofocus-kenmerk
Dit attribuut wordt gebruikt om aan te geven in welke invoer van een vorm de cursor moet worden geplaatst wanneer de webpagina wordt geladen, als deze niet aanwezig is, begint deze met de eerste die hij vindt. Dit kan ook worden geprogrammeerd met jQuery om zich naar behoefte op verschillende bedieningselementen te concentreren.

3. Formulierkenmerk
Dit attribuut is erg handig voor het beheren van elementen buiten een formulier, ongeacht waar het zich in de structuur van het web bevindt.

Formulierkenmerk

Product:
Beschrijving:

Lorem Ipsum is gewoon een proeftekst van de drukkerij- en zetindustrie.

Voorraad:

We kunnen in de HTML-broncode zien dat we een formulier hebben gemaakt om de gegevens van een product in te voeren, vervolgens wat verklarende tekst en ten slotte plaatsen we een tekstveld voor de voorraad buiten het formulier, maar we relateren het aan dit formulier via zijn identificatie-ID = "FormA" in het standaard tekstveld plaatsen we dat we het relateren aan het formulier form = "formA", op deze manier worden bij het verzenden van het formulier ook alle gerelateerde elementen meegestuurd.
4. FormAction-kenmerk
Dit attribuut is erg handig om hetzelfde formulier naar verschillende pagina's te sturen, iets dat voorheen in javascript moest worden geprogrammeerd en parameters van alle elementen van het formulier moest verzenden om het te kunnen doorsturen, in sommige gevallen werd het erg omslachtig, vooral als er waren meerdere vormen die van elkaar afhankelijk waren.
We nemen het voorbeeld van het vorige geval met een knop die we het formulier naar de record.php-pagina sturen en met de andere naar stock.php

Formulierkenmerk

Product:
Beschrijving:

Lorem Ipsum is gewoon een proeftekst van de drukkerij- en zetindustrie.

Voorraad: Afbeeldingskenmerk met indienen Als we een afbeelding willen gebruiken als verzendknop om een formulier in te dienen, was de enige manier om dat te doen een afbeelding te plaatsen of css-stijlbladen te gebruiken en vervolgens de functionaliteit met javascript te doen.

Kenmerk afbeeldingstype

Product:
Beschrijving:

5. Lijst- en Datalist-attributen
Met dit attribuut kunt u een lijst in een element definiëren en deze vervolgens toepassen op een invoerelement zodat het een zoekopdracht uitvoert terwijl we typen.

Lijst en datalijst type attribuut

We zien dat bij het schrijven van slechts één letter in dit geval f een lijst wordt weergegeven met de gevonden mogelijkheden, dit is erg handig omdat het een filter uitvoert op de gegevens die de datalijst bevat en het ook kan worden hergebruikt in andere bedieningselementen of elementen.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een positief punt te geven