📌 Balises principales
Balise Description
<form> Conteneur du formulaire
<input> Champ de saisie (texte, email, mot de passe, etc.)
<label> Texte descriptif pour un champ
<textarea> Zone de texte multi-lignes
<select> Liste déroulante
<option> Options dans un <select>
<button> Bouton personnalisable
<fieldset> Groupe de champs
<legend> Titre d’un <fieldset>
📌 Attributs des balises
Attribut Description
type Définit le type d’<input> (text, email, password, number, etc.)
name Nom du champ pour l’envoi des données
id Identifiant unique du champ
for Lie un <label> à un champ via son id
placeholder Texte indicatif à l'intérieur du champ
value Valeur par défaut du champ
required Rend le champ obligatoire
disabled Désactive un champ
readonly Champ en lecture seule
min / max Valeurs minimales et maximales pour number et date
maxlength Nombre max de caractères
checked Coche par défaut un radio ou checkbox
📌 Types d’<input>
Type Description
text Champ de texte classique
email Vérifie si l’entrée est une adresse e-mail
password Champ de mot de passe (caché)
number Accepte uniquement des nombres
date Sélecteur de date
radio Bouton de sélection unique
checkbox Case à cocher (plusieurs choix possibles)
submit Bouton d’envoi du formulaire
reset Bouton pour réinitialiser le formulaire
file Permet de télécharger un fichier
hidden Champ invisible mais envoyé avec le formulaire
📌 Exemple de formulaire avec tout cela
<form action="[Link]" method="post">
<fieldset>
<legend>Informations personnelles</legend>
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" placeholder="Votre nom"
required>
<label for="email">E-mail :</label>
<input type="email" id="email" name="email" required>
<label for="age">Âge :</label>
<input type="number" id="age" name="age" min="18" max="99">
<label>Genre :</label>
<input type="radio" name="genre" value="homme"> Homme
<input type="radio" name="genre" value="femme"> Femme
<label for="pays">Pays :</label>
<select id="pays" name="pays">
<option value="maroc">Maroc</option>
<option value="france">France</option>
</select>
<label for="message">Message :</label>
<textarea id="message" name="message"></textarea>
<label><input type="checkbox" name="conditions" required> J'accepte
les conditions</label>
<input type="submit" value="Envoyer">
</fieldset>
</form>