Hoe te maken: Contactformulier

Hoe een contactformulier te maken

Stap 1 - Voeg HTML toe:

Gebruik het <form>-element om invoer te verwerken. Je kunt meer informatie hierover vinden in onze PHP-tutorial.

Vervolgens voeg je invoercontroles toe aan elk veld (en de bijbehorende labels):

<div class="container">
  <form action="action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">
    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>
    <label for="subject">Onderwerp</label>
    <textarea id="subject" name="subject" placeholder="Schrijf iets.." style="hoogte:200px"></textarea>
    <input type="submit" value="Submit">
  </form>
</div>

Tweede stap - Voeg CSS toe:

/* Stel stijlen in voor invoervelden van type "text", select-elementen en tekstvelden */
input[type=text], select, textarea {
  breedte: 100%; /* Volbreedte */
  inkeping: 12px; /* Enige inkeping */ 
  rand: 1px vast #ccc; /* Grijs rand */
  ronding: 4px; /* Ronde hoeken */
  hokjebegrenzing: border-box; /* Zorg ervoor dat inkeping en breedte ongewijzigd blijven */
  bovengemarge: 6px; /* Bovenste buitengemarge */
  ondermarge: 16px; /* Ondermarge */
  grootteaanpassing: verticaal /* Laat gebruikers de grootte van de tekstveld horizontaal in plaats van verticaal aanpassen */
}
/* Stel specifieke achtergrondkleur en andere stijlen in voor submitknop */
input[type=submit] {
  achtergrondkleur: #04AA6D;
  kleur: white;
  inkeping: 12px 20px;
  rand: none;
  ronding: 4px;
  cursor: pointer;
}
/* Voeg een diepere groene achtergrond toe wanneer de muis over de submitknop wordt gehouden */
input[type=submit]:hover {
  achtergrondkleur: #45a049;
}
/* Voeg achtergrondkleur en enige inkeping aan formuliercontainer toe */
.container {
  ronding: 5px;
  achtergrondkleur: #f2f2f2;
  padding: 20px;
}

Try it yourself

Related pages

Tutorial:HTML form

Tutorial:CSS form