Maak je eerste HTML-formulier

In deze handleiding leer je hoe je je eerste eenvoudige formulier in HTML maakt. Formulieren zijn een essentieel onderdeel van webapplicaties en stellen gebruikers in staat informatie in te voeren en naar een server te sturen. In deze stapsgewijze handleiding zul je de basisstructuur van een HTML-formulier leren kennen en begrijpen hoe de verschillende elementen samenwerken om gegevens over te dragen.

Belangrijkste inzichten

• Een HTML-formulier wordt gedefinieerd door de <form>-tag.
• De attributen action en method bepalen waar de gegevens naartoe worden gestuurd en welke methode wordt gebruikt.
• De formulierelementen worden meestal gedefinieerd door <input>, <label> en <button>.
• Gegevens kunnen worden verzonden via GET of POST naar de server.

Stapsgewijze handleiding

1. HTML-basiskader maken

Je hebt eerst een eenvoudig HTML-document als basisstructuur nodig. Zorg ervoor dat je de basisstructuur van een HTML-document hebt:

2. Formulier-tag toevoegen

De volgende stap is om het formulier te definiëren. Je voegt de <form>-tag toe en hebt de attributen action en method nodig. Hier is een eenvoudig voorbeeld waarbij action de URL aangeeft waar de gegevens naartoe worden gestuurd, en de method is ingesteld op GET om de gegevens via de URL over te dragen.

3. Label en invoerveld maken

In het formulier wil je een gelabeld invoerveld maken. Hiervoor gebruik je de <label>-tag voor het label en de <input>-tag voor het daadwerkelijke invoerveld. Zorg ervoor dat het for-attribuut van het label overeenkomt met de id van het invoerveld.

4. Verzendknop toevoegen

Om de gegevens van het formulier te verzenden, heb je een knop nodig. Dit wordt gerealiseerd met de <button>-tag en moet het type submit hebben, zodat het formulier wordt verzonden wanneer erop wordt geklikt.

5. Testen van het formulier

Nadat je het formulier hebt gemaakt, is het tijd om het in de browser te testen. Voer een voorbeeld in het invoerveld in en klik op de verzendknop. Je zou moeten zien dat bij het verzenden van het formulier de ingevoerde gegevens via de URL naar de opgegeven action worden verzonden.

6. Aanpassingen aan de input-attributen

Om te zien hoe de invoervelden veranderen, kun je de attributen van de <input>-tag aanpassen. Pas bijvoorbeeld het name-attribuut aan om de verzonden gegevens te onderscheiden. Een voorbeeld zou zijn om de naam van het invoerveld van name naar first name te veranderen.

7. Gegevensoverdracht en verzoektype

Voordat je verdere tests uitvoert, is het belangrijk om te weten dat de methode GET de gegevens via de URL verzendt, terwijl POST de gegevens in de body van het HTTP-verzoek verzendt. Je kunt het verzoektype wijzigen door het method-attribuut in de <form>-tag aan te passen.

8. Simuleren van serverreactie

Aangezien je waarschijnlijk geen echte server hebt om je formulier te testen, kun je de action-URL aanpassen om een andere HTML-pagina te simuleren waar de gebruikers na het verzenden van het formulier naartoe worden geleid. Maak bijvoorbeeld een nieuwe HTML-bestand aan met bijvoorbeeld een bedankpagina.

9. Foutopsporing en debugging

Als er bij het verzenden van het formulier fouten optreden, controleer dan de netwerktools van de browser. Daar kun je zien of het formulier succesvol is verzonden en welke gegevens worden verzonden. Let ook op mogelijke 404-fouten, die aangeven dat de doel-URL niet is gevonden.

10. Afsluiting en vooruitblik

Je hebt nu een basaal begrip van het maken van HTML-formulieren. Je kunt deze techniek uitbreiden om complexere formulieren te maken die verschillende soorten invoer en validaties bevatten. In de volgende tutorial leer je hoe je kunt reageren op formulierinvoer met JavaScript en hoe je asynchrone gegevensoverdrachten kunt uitvoeren.

Samenvatting

In deze tutorial heb je de structuur en werking van je eerste HTML-formulier geleerd. Je weet nu hoe je invoervelden, labels en knoppen maakt en hoe de verzonden gegevens via de URL of in de body van een POST-verzoek worden overgedragen.