<form action="URL" method="POST">
	<fieldset>
		<legend>Kies je favoriete kleur</legend>
		
		<input type="radio" id="blue" value="blue" name="favoriteColor">
		<label for="blue">Blue</label> 

		<input type="radio" id="red" value="red" name="favoriteColor">
		<label for="blue">Red</label> 

		<input type="radio" id="green" value="green" name="favoriteColor">
		<label for="green">Green</label> 
	</fieldset>
</form>

	

Form attributen

• action
  • URL van pagina in frontend of backend
  • Geen action-attribuut, dan wordt het formulier verstuurd naar de huidige pagina.
• method
  • bepaalt de manier van communiceren met de server
    • GET: Gegevens worden als queryparameters aan de URL toegevoegd. Geschikt voor het ophalen van gegevens van de server.
    • POST: Gegevens worden als onderdeel van het verzoek verzonden en zijn niet zichtbaar in de URL. Geschikt voor het verzenden van gevoelige informatie en het uitvoeren van acties die gegevens wijzigen op de server.
    • …

Fieldset

• Content in een form groeperen
• Legend geeft informatie over de fieldset en komt als titel erboven te staan

Input

• Het Input element is het veld dat de bezoeker invult
• Elke input heeft een type: text, radio, etc.
• value wordt door de server gebruikt om de waarde van de input uit te lezen
• name is de naam van de groep input velden die bij elkaar horen

Label

• Het label element geeft een beschrijving van de input
• Een input wordt met het attribuut id gekoppeld aan een label
• Het label attribute for krijgt als waarde de id van de input waar je het label aan koppelt

<form action="URL" method="POST">
	<fieldset>
      <legend>Persoonlijke informatie</legend>

      <label for="age">Age (tussen 18 en 30)</label>
      <input type="number" id="age" name="age" min="18" max="30" />

      <label for="email">Email adres</label>
      <input type="email" id="email" name="email" />
    </fieldset>

		<input type="submit" value="Submit this form">
		
</form>

Client-side validation (restrictions)