HTML form is een cruciaal onderdeel van webontwikkeling waarmee gebruikers met een website kunnen communiceren en gegevens naar een server kunnen verzenden. Form worden gebruikt voor een breed scala aan doeleinden, zoals het verzamelen van gebruikersinformatie form, het verwerken van gebruikersinvoer en het mogelijk maken van gebruikersacties op een website. In dit artikel zullen we de attributen en verschillende soorten invoervelden, geselecteerde elementen, tekstgebieden en knoppen onderzoeken die veel worden gebruikt in HTML form.
Invoervelden
<input type="text">: Creëert een tekstinvoerveld waarin gebruikers alfanumerieke tekens kunnen invoeren.<input type="password">: Geeft een wachtwoordinvoerveld weer dat de ingevoerde tekens maskeert.<input type="email">: Biedt e-mailvalidatie voor invoervelden die een geldig e-mailadres vereisen.<input type="number">: Beperkt de invoer tot alleen numerieke waarden.<input type="checkbox">: Vertegenwoordigt een selectievakje dat gebruikers kunnen in- of uitschakelen.<input type="radio">: Vertegenwoordigt een keuzerondje waarmee gebruikers één optie uit een groep opties kunnen selecteren.<input type="file">: stelt gebruikers in staat om bestanden te selecteren en te uploaden.<input type="submit">: Geeft een knop weer die het verzendt form wanneer erop wordt geklikt.<input type="reset">: Toont een knop die de form initiële status herstelt.<input type="date">: Biedt een datumkiezer voor het selecteren van datums.<input type="time">: Hiermee kunnen gebruikers tijdwaarden invoeren.
Selecteer Elementen
<select>: Creëert een vervolgkeuzemenu met selecteerbare opties.<option>: Definieert een optie in het vervolgkeuzemenu, geplaatst in de<select>tag.<optgroup>: Groepeert gerelateerde opties samen in het vervolgkeuzemenu.<select multiple>: Hiermee kunnen gebruikers meerdere opties tegelijk selecteren door de Ctrl-toets(of Command-toets op Mac) ingedrukt te houden tijdens het klikken.
Tekstgebieden
<textarea>: Creëert een tekstinvoerveld met meerdere regels waarin gebruikers langere tekstblokken kunnen invoeren en bewerken. Het kan worden aangepast en geconfigureerd met attributen zoals rows en cols om de afmetingen te definiëren.
Toetsen
<button>: Vertegenwoordigt een knop die verschillende acties binnen een form. Het kan worden gebruikt om een form , per form JavaScript-functie in te dienen of naar een andere pagina te navigeren.
Voorbeeld gebruik:
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<label for="newsletter">Subscribe to Newsletter:</label>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="color">Favorite Color:</label>
<select id="color" name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
<button type="submit">Submit</button>
</form>
Dit voorbeeld toont het gebruik van verschillende form elementen, waaronder input velden, textarea, en een knop. Voel je vrij om de elementen en attributen aan te passen op basis van jouw specifieke wensen. checkbox select dropdown submit form