Een HTML formulier eerste versie
Home

Een HTML formulier eerste versie

Een HTML formulier eerste versie

Enkele tips om een basis html formulier te maken

Probleem

We hebben een formulier van doen waarmee we de volgende informatie willen verkrijgen.

Design

De elementen staan gerangschikt in de volgorde waarop ze op het formulier moeten komen te staan.

element name attribuut bij behorend label value attribuut placeholder required autofocus
tekstvak name Naam in te typen ja ja
email tekstvak email E-mail in te typen user@provider.domain ja nee
url tekstvak url Website in te typen www.provider.domain nee nee
texterea comment Commentaar in te typen nee nee
checkbox refer-random Toevallig random nee nee
checkbox refer-friend Vriend friend nee nee
checkbox refer-search-engine Zoekmachine search-engine nee nee
keuzerondjes rating Wat vind je van deze website
  1. id="rate-5": 5
  2. id="rate-4": 4
  3. id="rate-3": 3
  4. id="rate-2": 2
  5. id="rate-1": 1
keuzelijst country Land Opties:
value tekst
BE België
DE Duitsland
FR Frankrijk
LU Luxemburg
NL Nederland
UK Verenigd Koninkrijk
ja nee

Oplossing

We plaatsen de html elementen de een na de ander in het formulier en voegen de attributen, die in de design zijn opgenoemd, toe.

Je kan de standaard foutmeldingen voor required wijzigen:

By setting and unsetting the setCustomValidity in the right time, the validation message will work flawlessly.

<input name="Username" required oninvalid="this.setCustomValidity('Username cannot be empty.')" onchange="this.setCustomValidity('')" type="text" />

I used onchange instead of oninput which is more general and occurs when the value is changed in any condition even through JavaScript.

JI
2016-11-13 15:56:25