Formulier-gerelateerde tags

Dit artikel legt formulier-gerelateerde tags uit.

Dit legt verschillende formuliervelden uit, zoals tekstinvoervelden en vervolgkeuzemenu's.

YouTube Video

Formulier-gerelateerde tags

<form> tag

1<form action="/submit" method="post">...</form>

• De <form>-tag wordt gebruikt om het volledige formulier te definiëren.
• Het action-attribuut specificeert de bestemming en het method-attribuut specificeert de methode (GET of POST).
• U kunt ook het attribuut target specificeren, vergelijkbaar met het <a>-tag.

<input> tag (tekstinvoerveld)

1<input type="text" name="username" placeholder="Enter your username">

• <input type="text"> maakt een invoerveld voor een enkele regel tekst. Gebruikers kunnen willekeurige tekst invoeren.

• Het placeholder-attribuut specificeert beschrijvende tekst die verschijnt wanneer het invoerveld leeg is. Dit helpt gebruikers om de verwachte invoer gemakkelijk te begrijpen. Deze tekst verdwijnt automatisch wanneer men begint met typen.

  • placeholder is geschikt voor het verstrekken van aanvullende informatie en is niet geschikt voor belangrijke instructies zoals verplichte invoer. In dergelijke gevallen moet u een label gebruiken.

<input> tag (wachtwoordinvoerveld)

1<input type="password" name="password" placeholder="Type your password here">

• <input type="password"> maakt een veld voor het invoeren van wachtwoorden. De ingevoerde tekens worden verborgen en gemaskeerd om de veiligheid te garanderen.

<input> tag (e-mailadres invoerveld)

1<input type="email" name="email" placeholder="Enter your email">

• <input type="email"> maakt een veld voor het invoeren van een e-mailadres en bevat een validatie om het juiste e-mailformaat te garanderen.

<input> tag (selectievakje)

1<input type="checkbox" name="subscribe"> Subscribe to newsletter

• <input type="checkbox"> maakt een selectievakje. Wanneer meerdere opties beschikbaar zijn, kunnen gebruikers meerdere items selecteren.

<input> tag (keuzerondje)

1<input type="radio" name="gender" value="male"> Male<br>
2<input type="radio" name="gender" value="female"> Female

• <input type="radio"> maakt een keuzerondje waarmee gebruikers slechts één optie uit een set kunnen selecteren.

<input> tag (verzendknop)

1<input type="submit" value="Submit">

• <input type="submit"> maakt een knop om de gegevens in het formulier te verzenden.
• De waarde van het value-attribuut wordt opgenomen in de formuliergegevens bij verzending.

<input>-tag (Resetknop)

1<input type="reset" value="Reset">

• <input type="reset"> creëert een knop die alle invoerwaarden in het formulier terugzet.

<input> tag (verborgen veld)

1<input type="hidden" name="userid" value="12345">

• <input type="hidden"> maakt een verborgen veld dat niet op het scherm wordt weergegeven en wordt gebruikt om gegevens naar de backend te sturen wanneer het formulier wordt verzonden.

<input> tag (kleurenkiezer)

1<input type="color" name="favcolor" value="#ff0000">

• <input type="color"> toont een kleurkiezer en maakt een invoerveld waarmee gebruikers een kleur kunnen selecteren.

<input> tag (datum invoerveld)

1<input type="date" name="birthday">

• <input type="date"> maakt een datumvulveld dat een kalender toont voor het selecteren van een datum.

<input> tag (tijd invoerveld)

1<input type="time" name="appointment_time">

• <input type="time"> maakt een veld voor het invoeren van tijd en toont een tijdkiezer.

<input>-tag (bestand invoerveld)

1<input type="file" name="resume">

• <input type="file"> maakt een invoerveld waarmee gebruikers bestanden kunnen selecteren en uploaden.
• Het enctype-attribuut van de form-tag moet worden ingesteld op multipart/form-data.

<input>-tag (nummer invoerveld)

1<input type="number" name="quantity" min="1" max="10">

• <input type="number"> creëert een numeriek invoerveld waarmee de minimale waarde, maximale waarde en stapgrootte (verhoog/verlaag hoeveelheid) kunnen worden ingesteld.

<input>-tag (bereikselectieveld voor nummers)

1<input type="range" name="volume" min="0" max="100" value="50">

• <input type="range"> creëert een invoerveld waarmee gebruikers een waarde binnen een bereik kunnen selecteren met behulp van een schuifregelaar.

<textarea>-tag

1<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

• De <textarea>-tag creëert een tekstinvoerveld met meerdere regels. Het is geschikt voor het invoeren van lange teksten of opmerkingen.

<select>-tag

1<select name="animal">
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4</select>

• De <select>-tag creëert een keuzemenu, en opties worden gedefinieerd met de <option>-tag. Gebruikers kunnen één of meerdere items selecteren.

1<select name="animals" multiple>
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4    <option value="bird">Bird</option>
5</select>

• Om meerdere selecties mogelijk te maken, voeg het attribuut multiple toe. Het specificeren van dit attribuut toont de opties als een lijstvak.

<optgroup>-tag

 1<select name="fruits">
 2    <optgroup label="Citrus">
 3        <option value="orange">Orange</option>
 4        <option value="lemon">Lemon</option>
 5    </optgroup>
 6    <optgroup label="Berries">
 7        <option value="strawberry">Strawberry</option>
 8        <option value="blueberry">Blueberry</option>
 9    </optgroup>
10</select>

• De <optgroup>-tag wordt gebruikt om gerelateerde items samen te groeperen. Het label-attribuut stelt u in staat om een groepsnaam in te stellen, waardoor er duidelijke opties voor gebruikers zijn, zelfs als de lijst lang is.

<label>-tag

1<label for="username">Username:</label>
2<input type="text" id="username" placeholder="Enter your username">

• De <label>-tag definieert labels voor invoervelden, selectievakjes en keuzerondjes, wat de bruikbaarheid en toegankelijkheid verbetert.
• Klikken op een label kan bijvoorbeeld een invoerveld activeren of een selectievakje aan- of uitzetten.

<fieldset>-tag

1<fieldset>
2    <legend>Personal Information</legend>
3    <label for="name">Name:</label>
4    <input type="text" id="name" placeholder="Enter your name">
5</fieldset>

• De <fieldset>-tag groepeert gerelateerde formulierbesturingselementen, en de <legend>-tag biedt een titel voor de groep.

<button>-tag

1<button type="button">Button</button>
2<button type="submit" name="action" value="send">Submit</button>
3<button type="reset">Reset</button>

• De <button>-tag definieert een klikbare knop die een formulier verzendt of andere acties uitvoert.

  Wanneer type="button" is gespecificeerd, functioneert het als een gewone knop. Bij het klikken wordt het formulier niet verzonden en worden er geen andere standaardacties uitgevoerd. Het wordt gebruikt wanneer u aangepaste acties met JavaScript wilt instellen.

  Wanneer type="submit" is gespecificeerd, functioneert het als een verzendknop voor het formulier. Wanneer op deze knop wordt geklikt, wordt het formulier waarin het zich bevindt verzonden.

  Wanneer type="reset" is gespecificeerd, functioneert het als een resetknop voor het formulier. Bij het klikken worden alle invoervelden in het formulier gereset en teruggezet naar hun oorspronkelijke staat.

  Als het type-attribuut niet is gespecificeerd, kunnen sommige browsers het behandelen als type="submit"; daarom wordt aanbevolen het type expliciet op te geven om het gewenste gedrag te garanderen.

• De <button>-tag kan andere HTML-inhoud bevatten tussen de openings- en sluitingstags, waardoor het mogelijk is om knoppen met iconen of complexe tekst te maken.

• Voor een verzendknop met de <input>-tag wordt de waarde van het value-attribuut opgenomen in de formuliergegevens, maar met een <button>-tag wordt deze standaard niet verzonden.

  Door de attributen name en value te specificeren voor een <button>-tag, kan de waarde worden verzonden als formuliergegevens.

<datalist>-tag

1<input list="browsers" name="browser">
2<datalist id="browsers">
3    <option value="Chrome">
4    <option value="Firefox">
5    <option value="Safari">
6</datalist>

• De <datalist>-tag biedt een lijst met selecteerbare opties voor het <input>-element. Gebruikers kunnen een optie uit de lijst selecteren of hun eigen waarde invoeren.

<output>-tag

1<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
2    <input type="range" id="a" value="50"> +
3    <input type="range" id="b" value="50"> =
4    <output name="result" for="a b">100</output>
5</form>

• De <output>-tag toont het resultaat van berekeningen of gebruikersinteracties. Het wordt gebruikt om dynamisch berekeningsresultaten weer te geven binnen formulieren of scripts.
• Voor het attribuut for, specificeer de ID's van de formulierelementen die u wilt koppelen, gescheiden door spaties.

<progress>-tag

1<progress value="70" max="100">70%</progress>

• De <progress>-tag toont gebruikers de voortgang van een taak. Het kan bijvoorbeeld visueel de voortgang van een bestand-download of installatie aangeven.

<meter>-tag

1<meter value="0.6">60%</meter>

• De <meter>-tag vertegenwoordigt een numerieke meting binnen een bekende range. Het wordt gebruikt om metingen zoals schijfgebruik of een brandstofmeter binnen een specifieke range weer te geven.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video