Les formulaires HTML - Partie 1

Créer des formulaires interactifs

Les formulaires permettent aux utilisateurs d'envoyer des données au serveur.

Structure de base

<form action="/traitement.php" method="POST">
    <!-- Champs du formulaire -->
</form>

• action : URL de traitement
• method : GET (URL) ou POST (corps de requête)

Champ texte simple

<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" placeholder="Votre nom" required>

Attributs importants :

• type : Type de champ
• id : Lien avec le label
• name : Nom envoyé au serveur
• placeholder : Texte d'exemple
• required : Champ obligatoire

Types d'input courants

<!-- Email -->
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>

<!-- Mot de passe -->
<label for="password">Mot de passe :</label>
<input type="password" id="password" name="password" minlength="8" required>

<!-- Numéro -->
<label for="age">Âge :</label>
<input type="number" id="age" name="age" min="18" max="100">

<!-- Date -->
<label for="naissance">Date de naissance :</label>
<input type="date" id="naissance" name="naissance">

<!-- Téléphone -->
<label for="tel">Téléphone :</label>
<input type="tel" id="tel" name="tel" pattern="[0-9]{10}">

Zone de texte multilignes

<label for="message">Message :</label>
<textarea id="message" name="message" rows="5" cols="50" placeholder="Votre message ici..."></textarea>

Cases à cocher (checkbox)

<input type="checkbox" id="newsletter" name="newsletter" value="oui">
<label for="newsletter">S'abonner à la newsletter</label>

<input type="checkbox" id="cgu" name="cgu" required>
<label for="cgu">J'accepte les conditions d'utilisation</label>

Boutons radio

<p>Genre :</p>
<input type="radio" id="homme" name="genre" value="homme">
<label for="homme">Homme</label>

<input type="radio" id="femme" name="genre" value="femme">
<label for="femme">Femme</label>

<input type="radio" id="autre" name="genre" value="autre">
<label for="autre">Autre</label>

Important : Même name pour un groupe de radios.

Liste déroulante (select)

<label for="pays">Pays :</label>
<select id="pays" name="pays" required>
    <option value="">Sélectionnez un pays</option>
    <option value="fr">France</option>
    <option value="be">Belgique</option>
    <option value="ch">Suisse</option>
    <option value="ca">Canada</option>
</select>

Avec optgroup

<select id="ville" name="ville">
    <optgroup label="France">
        <option value="paris">Paris</option>
        <option value="lyon">Lyon</option>
    </optgroup>
    <optgroup label="Belgique">
        <option value="bruxelles">Bruxelles</option>
        <option value="liege">Liège</option>
    </optgroup>
</select>

Boutons

<!-- Bouton de soumission -->
<button type="submit">Envoyer</button>
<input type="submit" value="Envoyer">

<!-- Bouton de réinitialisation -->
<button type="reset">Réinitialiser</button>

<!-- Bouton normal (JavaScript) -->
<button type="button">Cliquez-moi</button>

Exemple complet

<form action="/inscription" method="POST">
    <h2>Formulaire d'inscription</h2>
    
    <label for="nom">Nom complet :</label>
    <input type="text" id="nom" name="nom" required>
    
    <label for="email">Email :</label>
    <input type="email" id="email" name="email" required>
    
    <label for="password">Mot de passe :</label>
    <input type="password" id="password" name="password" minlength="8" required>
    
    <input type="checkbox" id="cgu" name="cgu" required>
    <label for="cgu">J'accepte les CGU</label>
    
    <button type="submit">S'inscrire</button>
</form>

Points clés

• <form> englobe tous les champs
• <label> améliore l'accessibilité
• type="email" valide automatiquement
• required rend un champ obligatoire
• name est envoyé au serveur

📝 Vous avez terminé cette leçon ?

Créez un compte gratuit pour sauvegarder votre progression !