Het element <input type="hidden">

Waarde

Het value-attribuut van het <input>-element bevat een tekenreeks met de verborgen gegevens die u wilt opnemen wanneer het formulier naar de server wordt verzonden. Deze waarde wordt niet aan de gebruiker getoond via de gebruikersinterface.

Aanvullende attributen

Naast de attributen die gemeenschappelijk zijn voor alle <input>-elementen, bieden hidden-invoervelden de volgende attributen.

name

Dit is eigenlijk een van de gemeenschappelijke attributen, maar het heeft een speciale betekenis voor verborgen invoervelden. Normaal functioneert het name-attribuut bij verborgen invoervelden net als bij elk ander invoerveld. Wanneer het formulier echter wordt verzonden, wordt een verborgen invoerveld waarvan name is ingesteld op _charset_ automatisch gerapporteerd met de waarde ingesteld op de tekencodering die is gebruikt om het formulier te verzenden.

Verborgen invoervelden gebruiken

Zoals hierboven vermeld, kunnen verborgen invoervelden overal worden gebruikt waar u gegevens wilt opnemen die de gebruiker niet kan zien, samen met het formulier wanneer het naar de server wordt verzonden. Laten we enkele voorbeelden bekijken die het gebruik ervan illustreren.

Bewerkte inhoud bijhouden

Een van de meest voorkomende toepassingen van verborgen invoervelden is het bijhouden van welk databaserecord moet worden bijgewerkt wanneer een bewerkingsformulier wordt verzonden. Een typische workflow ziet er als volgt uit:

1. De gebruiker besluit wat inhoud te bewerken waarover hij controle heeft, zoals een blogbericht of een productvermelding. Hij begint door op de bewerkknop te drukken.
2. De te bewerken inhoud wordt uit de database gehaald en in een HTML-formulier geladen, zodat de gebruiker wijzigingen kan aanbrengen.
3. Na het bewerken verzendt de gebruiker het formulier, en de bijgewerkte gegevens worden teruggestuurd naar de server om in de database te worden bijgewerkt.

Het idee hierbij is dat tijdens stap 2 de ID van het record dat wordt bijgewerkt, wordt bewaard in een verborgen invoerveld. Wanneer het formulier in stap 3 wordt verzonden, wordt de ID automatisch samen met de inhoud van het record naar de server teruggestuurd. De ID laat de server-side component van de site precies weten welk record moet worden bijgewerkt met de verzonden gegevens.

U kunt een volledig voorbeeld van hoe dit eruit zou kunnen zien vinden in de sectie Voorbeelden hieronder.

De beveiliging van de website verbeteren

Een veelvoorkomend gebruik van verborgen invoervelden is het opslaan van Cross-Site Request Forgery-tokens (CSRF-tokens), die websites helpen beschermen tegen CSRF-aanvallen.

Validatie

Verborgen invoervelden nemen niet deel aan beperkingsvalidatie; ze hebben geen echte waarde om te beperken.

Voorbeelden

Laten we bekijken hoe we een versie zouden kunnen implementeren van het bewerkingsformulier dat we eerder beschreven (zie Bewerkte inhoud bijhouden), waarbij een verborgen invoerveld wordt gebruikt om de ID van het bewerkte record te onthouden.

De HTML van het bewerkingsformulier zou er ongeveer zo uit kunnen zien:

<form>
  <div>
    <label for="title">Post title:</label>
    <input type="text" id="title" name="title" value="My excellent blog post" />
  </div>
  <div>
    <label for="content">Post content:</label>
    <textarea id="content" name="content" cols="60" rows="5">
This is the content of my excellent blog post. I hope you enjoy it!
    </textarea>
  </div>
  <div>
    <button type="submit">Update post</button>
  </div>
  <input type="hidden" id="postId" name="postId" value="34657" />
</form>

Laten we ook wat CSS toevoegen:

html {
  font-family: sans-serif;
}

form {
  width: 500px;
}

div {
  display: flex;
  margin-bottom: 10px;
}

label {
  flex: 2;
  line-height: 2;
  text-align: right;
  padding-right: 20px;
}

input,
textarea {
  flex: 7;
  font-family: sans-serif;
  font-size: 1.1rem;
  padding: 5px;
}

textarea {
  height: 60px;
}

De server zou de waarde van het verborgen invoerveld met de ID postID instellen op de ID van het bericht in zijn database voordat het formulier naar de browser van de gebruiker wordt verzonden, en zou die informatie gebruiken wanneer het formulier wordt teruggestuurd om te weten welk databaserecord moet worden bijgewerkt met de gewijzigde informatie. Er is geen scripting in de inhoud nodig om dit af te handelen.

De uitvoer ziet er zo uit:

Bij het verzenden zullen de formuliergegevens die naar de server worden gestuurd er ongeveer zo uitzien:

title=My+excellent+blog+post&content=This+is+the+content+of+my+excellent+blog+post.+I+hope+you+enjoy+it!&postId=34657

Hoewel het verborgen invoerveld helemaal niet zichtbaar is, worden de gegevens ervan toch verzonden.

Technische samenvatting

Zie ook

• <input>