HTML-formulieren maken

HTML-formulieren maken

Welkom bij de volgende les! In deze les leer je hoe je formulieren maakt met HTML. Formulieren zijn essentieel voor het verzamelen van gebruikersinvoer, die je later met PHP kunt verwerken. Laten we beginnen!

HTML-formulieren worden gebruikt om gebruikersinvoer te verzamelen. Hiermee kunnen gebruikers velden invullen, keuzes maken en gegevens naar een server verzenden om deze te laten verwerken.

Voorbeeld: Een inlogformulier waarin gebruikers hun gebruikersnaam en wachtwoord invoeren.

Belangrijk: Formulieren vormen de verbinding tussen de gebruiker en je PHP-scripts.

Zo maak je een basisformulier in HTML:

Uitleg:

• action: Geeft het PHP-bestand aan dat de formuliergegevens verwerkt.
• method: Geeft aan hoe gegevens worden verzonden (GET of POST).
• required: Zorgt ervoor dat het veld vóór het verzenden moet zijn ingevuld.

<form action="process.php" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <button type="submit">Submit</button>
</form>

Formulieren kunnen verschillende invoertypen bevatten om verschillende soorten gegevens te verzamelen:

• text: Voor tekstinvoer op één regel.
• email: Voor e-mailadressen.
• password: Voor wachtwoordinvoer.
• checkbox: Voor keuzes uit meerdere opties.
• radio: Voor een keuze uit één optie.
• submit: Voor het verzenden van het formulier.

Voorbeeld:

<form action="submit.php" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <button type="submit">Login</button>
</form>

Met keuzerondjes kunnen gebruikers één optie uit een groep selecteren. Voorbeeld:

Tip: Gebruik voor alle keuzerondjes in een groep hetzelfde name-attribuut.

<form action="submit.php" method="POST">
  <p>Choose your favorite color:</p>
  <input type="radio" id="red" name="color" value="Red">
  <label for="red">Red</label>
  <br>
  <input type="radio" id="blue" name="color" value="Blue">
  <label for="blue">Blue</label>
  <br>
  <button type="submit">Submit</button>
</form>

Met selectievakjes kunnen gebruikers meerdere opties selecteren. Voorbeeld:

Tip: Gebruik arraysyntaxis (hobbies[]) om meerdere waarden te verzamelen.

<form action="submit.php" method="POST">
  <p>Select your hobbies:</p>
  <input type="checkbox" id="reading" name="hobbies[]" value="Reading">
  <label for="reading">Reading</label>
  <br>
  <input type="checkbox" id="traveling" name="hobbies[]" value="Traveling">
  <label for="traveling">Traveling</label>
  <br>
  <button type="submit">Submit</button>
</form>

Met vervolgkeuzemenu's kunnen gebruikers één optie uit een lijst kiezen. Voorbeeld:

Tip: Gebruik selected om een standaardoptie in te stellen.

<form action="submit.php" method="POST">
  <label for="country">Choose your country:</label>
  <select id="country" name="country">
    <option value="USA">USA</option>
    <option value="Canada">Canada</option>
    <option value="UK">UK</option>
  </select>
  <br>
  <button type="submit">Submit</button>
</form>

Zorg ervoor dat je formulieren voor alle gebruikers toegankelijk zijn:

• Gebruik label-tags die via for-attributen aan invoervelden zijn gekoppeld.
• Groepeer gerelateerde invoervelden met fieldset en legend.
• Test formulieren op gebruiksvriendelijkheid op mobiele apparaten.

Tip: Toegankelijke formulieren verbeteren de gebruikerservaring voor iedereen!

Gefeliciteerd! Je hebt geleerd hoe je HTML-formulieren maakt met verschillende invoertypen, waaronder tekstvelden, keuzerondjes, selectievakjes en vervolgkeuzemenu's. Formulieren vormen de basis van gebruikersinvoer bij webontwikkeling. In de volgende les leer je hoe je formuliergegevens met PHP verwerkt. Laten we blijven programmeren!