Een HTML-formulier maken (voorbeelden uitgelegd)

Formulieren worden gebruikt om gegevens van gebruikers te verzamelen, zoals contactgegevens, of om gebruikers in staat te stellen met de website te communiceren, zoals het plaatsen van opmerkingen of het uitvoeren van zoekopdrachten. In dit artikel leren we hoe u een basisformulier kunt maken met behulp van HTML.

Structuur van een HTML-formulier

Met behulp van de tag wordt een HTML-formulier gemaakt. Binnen deze tag kunt u verschillende invoerelementen hebben, zoals tekstvelden, knoppen, selectievakjes, keuzerondjes en meer.

invoerelementen komen hier

Invoerelementen

Tekstvelden

Tekstvelden worden gemaakt met behulp van de tag met het attribuut type gelegd op tekst. Bijvoorbeeld:

Naam:




Telefoon

Het element gebruikt voor invoervelden voor telefoonnummers.

Telefoon:


Datum

Het element gebruikt om een ​​datum te selecteren.

Geboortedatum:


Wachtwoord

Het element gebruikt voor wachtwoordinvoervelden. Tekst die in dit veld wordt ingevoerd, wordt weergegeven als punten om het wachtwoord te verbergen.

Wachtwoord:


Archief

Het element wordt gebruikt om de gebruiker in staat te stellen een bestand uit zijn lokale bestandssysteem te selecteren.

Upload bestand:


Selectievakje

Het element gebruikt voor invoervelden waarmee de gebruiker geen, één of meerdere opties kan selecteren.

Ik accepteer de algemene voorwaarden

Radio

Het element gebruikt voor invoervelden waarmee de gebruiker één optie uit een reeks opties kan selecteren.

Geslacht:

Man

Vrouwen

Nummer

Het element gebruikt voor numerieke invoervelden.

Hoeveelheid:


Bereik

Het element gebruikt voor invoervelden die een waarde uit een bereik van waarden moeten bevatten.

Volume:




Toetsen

Knoppen worden gemaakt met behulp van de tag met het attribuut type gelegd op indienen. Wanneer op deze knop wordt gedrukt, worden de formuliergegevens verzonden. Bijvoorbeeld:

Naam:




Formulierinvoer verwerken

Wanneer op de verzendknop wordt gedrukt, worden de formuliergegevens ingediend voor verwerking. Dit wordt gedaan via een van de volgende twee methoden: GET of POST, die worden gespecificeerd met behulp van het attribuut methode Op het etiket .

KRIJG methode

De GET-methode verzendt de formuliergegevens als onderdeel van de URL. Het is handig voor zaken als zoekopdrachten, waarbij de formuliergegevens niet gevoelig zijn. Deze methode heeft echter beperkingen wat betreft de lengte van de gegevens die kunnen worden verzonden.

invoerelementen komen hier

POST-methode

De POST-methode verzendt de formuliergegevens apart van de URL. Dit is veiliger en kan een veel grotere hoeveelheid gegevens aan, dus wordt het gebruikt voor zaken als het indienen van contact- of inlogformulieren.

invoerelementen komen hier

In beide gevallen het attribuut actie wordt gebruikt om de URL op te geven van het server-side script dat de formuliergegevens zal verwerken.

Voorbeeld van HTML-formulier met alle elementen 

Hier is een formulier dat alle elementen gebruikt die we in dit artikel hebben besproken:

Registratieformulier

Naam:



Achternaam:



E-mailadres:



Telefoon:



Geboortedatum:



Wachtwoord:



Upload bestand:



Ik accepteer de algemene voorwaarden


Geslacht:

Man

Vrouwen

Hoeveelheid:



Volume:




Dit formulier heeft velden voor voornaam, achternaam, e-mail, telefoon, geboortedatum, wachtwoord, een veld om te uploaden bestand, een selectievakje voor algemene voorwaarden, radio's om geslacht te kiezen, en nummer- en bereikvelden voor hoeveelheid en volume, respectievelijk.

De knop "Verzenden" aan het einde is degene die verantwoordelijk is voor het verzenden van het formulier naar de URL die is opgegeven in het kenmerk actie Van het etiket vorm (in dit geval "/submit_form"). Om dit formulier op een echte website te laten werken, moet u een server hebben die is geconfigureerd om de informatie van dit formulier in het pad "/submit_form" te ontvangen en te verwerken.