Verborgen velden


HTML Verborgen velden

Dit veld wordt gemaakt met de <input> tag, om aan te geven wat voor input het is, gebruik je het attribuut type = "hidden". Hidden produceert een onzichtbaar invoerveld. Dit is vergelijkbaar met een tekstveld. Het verschil is dat een verborgen veld niet op de pagina wordt weergegeven. De gebruiker kan in een verborgen veld niets invoeren. Het doel van een verborgen veld is om andere gegevens dan de gegevens van de gebruiker door te geven.

In de onderstaande voorbeeld zou het verborgen veld het programma dat de formulier behandelt vertellen, dat de voorkeur taal van de gebruiker Nederlands is.

VoorbeeldVoorbeeld:
<input type="hidden" name="Taal" value="Nederlands" />


Voorbeeld van verborgenvelden

Verborgen velden zijn niet zichtbaar, maar toch, wanneer je het formulier gaat verzenden, wordt de verborgen veld met het formulier verzonden. In dit voorbeeld worden 3 verborgen velden met het formulier verzonden.

VoorbeeldVoorbeeld:
<!DOCTYPE html>
<html>
 <body>
   <h2>HTML Cursus</h2>
   <p><b>Voer uw gegevens in:</b></p>
   <form action="forms/hidden/check.php" method="post">
     <table>
        <tr>
           <td>Voornaam:</td>
           <td><input name="vn" size="30" maxlength="24" required></td>
        <tr>
           <td>Achternaam:</td>
           <td><input name="an" size="30" maxlength="24" required></td>
        <tr>
           <td>Straat:</td>
           <td><input name="str" size="30" maxlength="24" required></td>
        <tr>
           <td>Postcode:</td>
           <td><input name="pc" maxlength="7" size="7" required></td>
        <tr>
           <td>Stad:</td>
           <td><input name="stad" size="30" maxlength="24" required></td>
        <tr>
           <td>Land:</td>
           <td><select name="land[]">
           <option value="Nederland" selected>Nederland</option> 
           <option value="Belgie">Belgie</option>
           </select></td>
        <tr>
           <td colspan="2"><br><b>Inschrijven nieuwsbrief</b></td>
        <tr>
           <td><input type="radio" name="nb" value="Ja" checked>Ja</td>
           <td><input type="radio" name="nb" value="Nee">Nee</td>
        </tr>    
      </table>
      <input type="hidden" name="html" value="HTML">
      <input type="hidden" name="css" value="CSS">
      <input type="hidden" name="nl" value="NL">
      <hr>
      <input type="submit" value="Verzenden">
   </form>
 </body>
</html>