flag
X logo
Menu
Home Icons Contact
Docs
Typography
Responsive
Containers Grid Align Display
Navigation
Topnav Sidenav Slide down nav Verticale nav Fullscreen nav Buttons Pagination
Pictures
Images Animation Parallax Sliteshow Thumbnail
Helpers
Helpers Padding Margin
More
Accordion Borders Cards Colors Form List Popup modal Table Tooltips

Form


Introductie

Het HTML formulier element definieert een formulier dat wordt gebruikt om gebruikersinvoer te verzamelen.
Formulier elementen zijn verschillende typen invoerelementen, zoals tekstvelden, selectievakjes, keuzerondjes, verzendknoppen en meer.
De formulier elementen zijn netjes gestileerd in het CSS Framework.

Je hoeft geen casses in te vullen voor het formulier.

Je hebt wel classes nodig voor het radio rondje en het selectie vakje.

En voor <input type = "submit"> gebruik de button class.


Klik op de Class naam om deze te kopiƫren.

check-con Class voor het formulier label van het selectie vakje
checkmark Class voor het formulier selectie vakje
radio-con Class voor het formulier label van het radio rondje
radiomark Class voor het formulier radio rondje

Voorbeeld Formulier


Formulier

De rood omrande velden zijn verplicht!

Voorbeeldcode:

<div class="container">
  <h1>Formulier</h1>
  <p>De rood omrande velden zijn verplicht!</p>
  <form action="form.php" name="myForm" method="post">
    <div class="row">
      <div class="cell">
        <label for="name">Naam</label>
        <input name="name" type="text" id="name" required />
      </div>
      <div class="cell">
        <label for="email">E_mailadres</label>
        <input name="email" type="email" id="email" required />
      </div>
      <div class="cell">
        <label for="phone">Telefoon</label>
        <input name="phone" type="text" id="phone" />
      </div>
    </div>
    <div class="row">
      <div class="cell">
        <label class="check-con">Nieuwsbrief
        <input type="checkbox" name="newsletter" value="Newsletter" id="Newsletter">
          <span class="checkmark"></span>
        </label>
        <label class="check-con">Update
        <input type="checkbox" name="update" value="update" id="update" checked="checked">
          <span class="checkmark"></span>
        </label>
      </div>
      <div class="cell">
        <label class="radio-con">Ik ben lid
        <input type="radio" name="member" value="memberYes" id="memberYes" checked="checked">
          <span class="radiomark"></span>
        </label>
        <label class="radio-con">Ik ben geen lid
        <input type="radio" name="member" value="memberNo" id="memberNo">
          <span class="radiomark"></span>
        </label>
      </div>
      <div class="cell">
        <label>Onderwerp</label>
        <select name="Subject">
          <option value="Question">Vraag</option>
          <option value="Comment">Commentaar</option>
          <option value="Website">Website</option>
        </select>
      </div>
    </div>      
    <label for="Message">Bericht</label>
    <textarea name="Message" id="Message" required></textarea>
    <div class="center"><input type="submit" value="Verzenden" class="button" /></div>
  </form>		
</div>

© Copyright by Web Henkie
All right reserved
Webmaster