Home-theater-designers
Het verzamelen van gegevens van een websitegebruiker kan op verschillende manieren. Formulieren op websites kunnen een eenvoudige functie hebben, zoals het inschrijven van een gebruiker op een nieuwsbrief, of een complexer doel, zoals het fungeren als sollicitatieformulier.
Een ding dat al deze eenvoudige tot complexe vormen echter gemeen hebben, is HTML en meer specifiek de HTML label.
De formuliertag gebruiken
De tag is een HTML-element dat wordt gebruikt als een container om andere elementen in te sluiten die kunnen worden beschouwd als bouwstenen voor formulieren. Sommige van deze fundamentele elementen omvatten de tag, de tag, en de label.
De tag heeft een belangrijk attribuut dat bijdraagt aan zijn functionaliteit. Dit attribuut wordt actie genoemd en wordt gebruikt om het bestand te identificeren waarnaar de gegevens die in het formulier zijn ingevoerd, worden doorgegeven.
Het tagvoorbeeld gebruiken
Het bovenstaande voorbeeld laat zien hoe u de formuliertag in uw projecten kunt gebruiken. Een van de belangrijkste aandachtspunten is dat als u een formuliertag opent, u eraan moet denken om deze te sluiten. Dit zorgt voor een formulierstructuur en zorgt er ook voor dat de gegevens die in het formulier worden ingevuld correct worden verwerkt.
De tag gebruiken
De tag wordt gebruikt om de gegevens in elk invoerveld in een formulier te beschrijven. Deze tag heeft een voor attribuut, dat wordt gebruikt om de functionaliteit van een formulier te verbeteren.
Verwant: De beste gratis online HTML-editors om uw code te testen
Als de id die is toegewezen aan het bijbehorende invoerveld overeenkomt met de voor waarde in de tag, dan wordt dat invoerveld automatisch gemarkeerd wanneer u op het label klikt.
Het tagvoorbeeld gebruiken
First Name:
In het bovenstaande voorbeeld kun je zien dat de voor attribuut krijgt de waarde toegewezen fname . Als u daarom een invoerveld maakt met de fname id, wordt dit veld gemarkeerd elke keer dat u op de klikt Eerst Naam label.
De tag gebruiken
In zijn meest basale vorm is de tag kan worden gezien als een tekstvak. De tag legt gegevens van de gebruiker vast en een van de meer cruciale functies is de type attribuut. De type attribuut geeft het type gegevens aan dat dit tekstvak kan verzamelen.
Verwant: Een gestapeld formulier maken in CSS
Er zijn verschillende waarden die u kunt toewijzen aan de type attribuut, maar enkele van de meer populaire zijn als volgt.
- Tekst
- Nummer
- Afbeelding
- Datum
- Selectievakje
- Radio
- Wachtwoord
De tag gebruiken Voorbeeld
First Name:
De tag in de bovenstaande code heeft drie verschillende attributen die elk een unieke functie hebben. De type attribuut krijgt een tekstwaarde toegewezen, wat betekent dat het tekstvak alleen tekens accepteert.
De ID kaart attribuut is een unieke id voor het tekstvak en het is belangrijk omdat het toegang biedt tot dit element vanuit een CSS-bestand. De naam attribuut is ook een unieke identificatie; het name-attribuut wordt echter gebruikt om te communiceren met een element van de server-kant van ontwikkeling.
De ID kaart en naam attributen krijgen meestal dezelfde waarde toegewezen als de ene toegang geeft tot een element vanaf de clientzijde en de andere vanaf de serverzijde.
Het selectievakje-element gebruiken
Het checkbox-element is zeer uniek in vergelijking met de andere elementen die u kunt gebruiken met de label. Hiermee kan een gebruiker een of meer opties selecteren uit een lijst met gerelateerde keuzes. Selectievakjes zijn gemakkelijk te herkennen omdat ze worden weergegeven door kleine vierkante vakjes die een vinkje bevatten wanneer ze zijn geselecteerd.
Het voorbeeld van het selectievakje Element gebruiken
Programming Languages:
Java
JavaScript
Python
In het bovenstaande voorbeeld heeft elk van de checkbox-elementen een value-attribuut, en dit is belangrijk omdat het helpt om elke checkbox-optie te onderscheiden van de verzameling. Daarom, als een gebruiker 'Java' selecteert uit de bovenstaande opties, zullen de gegevens dat weerspiegelen.
De tag en de radio-elementen gebruiken
De tag en de radio-elementen zijn vergelijkbaar in die zin dat ze een gebruiker slechts één enkele waarde tegelijk laten selecteren; daarom kan men zeggen dat ze dezelfde functie hebben. Ze zien er echter heel anders uit.
Het radio-element lijkt qua uiterlijk dichter bij het checkbox-element, maar bij het radio-element heb je cirkels in plaats van vierkanten.
De tag produceert wat in wezen een vervolgkeuzelijst is, waarmee een gebruiker een enkele waarde kan selecteren.
Het tag- en radio-elementvoorbeeld gebruiken
Sex:
Male
Female
Other
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Het datumelement gebruiken
Het datumelement produceert een klein tekstvak dat een kalender genereert wanneer erop wordt geklikt. Gebruik makend van datum als invoertype in uw formulieren beschermt u tegen een gebruiker die mogelijk een onjuiste datum invoert, wat mogelijk kan leiden tot het verzamelen van foutieve gegevens.
Het voorbeeld van het datumelement gebruiken
Het e-mail- en wachtwoordelement gebruiken
Wanneer een ontwikkelaar de e-mail- of wachtwoordwaarden toewijst aan het type-attribuut van een tag, produceren ze elk een identiek tekstvak. Wanneer u deze dozen echter gaat gebruiken, worden de verschillen duidelijk.
Het e-mailelement controleert de gegevens die in het tekstvak worden ingevoerd en zorgt ervoor dat elke inzending voldoet aan de standaardvereiste van een e-mailadres; wat betekent dat je een lokaal deel hebt, gevolgd door het @-symbool, en eindigt met een domein.
Het voorbeeld van het e-mailelement gebruiken
In het bovenstaande voorbeeld maak je kennis met een nieuw attribuut genaamd tijdelijke aanduiding , en dit attribuut heeft een tekstwaarde die in vervaagd grijs in het tekstvak wordt weergegeven. Deze tekst wordt gebruikt om de gegevens aan te geven die in het tekstvak moeten worden geplaatst, zoals in het bovenstaande voorbeeld.
Het wachtwoordelement verandert tekens in sterretjes wanneer ze in het tekstvak worden ingevoerd. Daarom, als uw computerscherm zichtbaar is voor andere mensen, zullen zij het wachtwoord dat u invoert niet zien.
Het voorbeeld van het wachtwoordelement gebruiken
De knoptag gebruiken
In een formulier zijn er meestal twee verschillende soorten knoppen. De eerste is de verzendknop, waarmee de gegevens die in het formulier zijn ingevoerd, worden verzonden naar de waarde die is toegewezen aan het actieattribuut (dat zich in de < formulier> label).
Voorbeeld van verzendknop
Submit
Het tweede type knop dat gewoonlijk in een formulier wordt gebruikt, is een resetknop, waarmee de gegevens in een formulier worden gewist, zodat de gebruiker nieuwe gegevens kan invoeren. De tag heeft een type attribuut, dat wordt gebruikt om de functie van de knop aan te geven. In het bovenstaande voorbeeld is de type attribuut is de waarde toewijzen indienen , daarom een knop met een type waarde van resetten wordt gebruikt om het formulier opnieuw in te stellen.
Voorbeeld resetknop
Reset
Een formulier maken
Om een eenvoudig formulier in HTML te maken, moet u alle hierboven genoemde elementen insluiten in a label.
Een formuliervoorbeeld maken
Forms
First Name:
Last Name:
Date of birth:
Age:
Gender:
Male
Female
Other
Email Address:
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Programming Languages:
Java
JavaScript
Python
Password:
Confirm Password:
Submit
Reset
De bovenstaande code zal het volgende formulier produceren:
video's draaien op Windows Media Player
Nu kunt u een eenvoudig formulier in HTML maken
Dit artikel biedt u alle tools om een functioneel HTML-formulier te maken. Het identificeert de verschillende HTML-tags die worden gebruikt bij het maken van formulieren en onderzoekt de verschillende attributen die met deze tags kunnen worden gebruikt.
De meeste formulieren die u op websites ziet, hebben echter één extra component; CSS, dat wordt gebruikt om de vorm tot leven te brengen en het esthetischer te maken.
Deel Deel Tweeten E-mail De essentiële CSS3-eigenschappen CheatsheetBeheers essentiële CSS-syntaxis met onze cheatsheet voor CSS3-eigenschappen.
Lees volgende Gerelateerde onderwerpen- Programmeren
- HTML
- Webontwikkeling
- Codeerhandleidingen
Kadeisha Kean is een full-stack softwareontwikkelaar en technisch/technologisch schrijver. Ze heeft het onmiskenbare vermogen om enkele van de meest complexe technologische concepten te vereenvoudigen; materiaal produceren dat gemakkelijk kan worden begrepen door elke technologiebeginner. Ze is gepassioneerd door schrijven, interessante software ontwikkelen en de wereld rondreizen (via documentaires).
Meer van Kadeisha KeanAbonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren