Phase 1 — Les fondamentaux HTML
#4 Formulaires
input, select, textarea, validation
L'élément form
Les formulaires collectent les données utilisateur et les envoient au serveur. L'élément <form> englobe tous les champs :
Formulaire de base
<form action="/envoyer" method="POST">
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>
<label for="mdp">Mot de passe :</label>
<input type="password" id="mdp" name="mdp" minlength="8" required>
<button type="submit">Se connecter</button>
</form>Types d'input
Les types d'input
<input type="text" placeholder="Votre nom">
<input type="email" placeholder="vous@exemple.com">
<input type="password" minlength="8">
<input type="number" min="0" max="100" step="1">
<input type="date">
<input type="color" value="#3b82f6">
<input type="range" min="0" max="100">
<input type="file" accept="image/*">
<input type="checkbox" id="accepter">
<input type="radio" name="plan" value="gratuit">Select, textarea et fieldset
Autres éléments de formulaire
<select name="role">
<option value="">Choisir un rôle</option>
<optgroup label="Ingénierie">
<option value="frontend">Frontend</option>
<option value="backend">Backend</option>
</optgroup>
</select>
<textarea name="bio" rows="4" cols="50"
placeholder="Parlez-nous de vous"></textarea>
<fieldset>
<legend>Adresse de livraison</legend>
<label for="rue">Rue :</label>
<input type="text" id="rue" name="rue">
</fieldset>Attributs de validation
Validation
<input type="text" required> <!-- Obligatoire -->
<input type="email"> <!-- Doit être un email -->
<input type="text" minlength="3" maxlength="20"> <!-- Longueur -->
<input type="number" min="1" max="99"> <!-- Intervalle -->
<input type="text" pattern="[A-Za-z]{3,}"> <!-- Regex -->À vous de jouer
Essayez les commandes ci-dessous :
terminal — browser