Le Web/Cours/Formulaires HTML

Formulaires HTML

30 min Cours SNT

A quoi servent les formulaires ?

Les formulaires HTML permettent aux utilisateurs d'envoyer des donnees a un serveur web. Ils sont essentiels pour : s'inscrire, se connecter, rechercher, commander, contacter...

Inscription

Creer un compte

Connexion

Authentification

Contact

Envoyer un message

Formulaire interactif (demo)

Essaie de remplir ce formulaire ! Le bouton s'active quand tout est valide.

Les differents types d'input

L'attribut type determine le comportement du champ :

type="text"

Texte simple

type="email"

Adresse email (validation auto)

type="password"

Mot de passe (masque)

type="number"

Nombre uniquement

type="date"

Selecteur de date

type="tel"

Numero de telephone

type="url"

Adresse web

type="checkbox"

Case a cocher

type="radio"

Choix unique

type="file"

Telecharger fichier

Structure d'un formulaire

inscription.html

<form action="/inscription" method="POST">
  <!-- Champ texte avec label -->
  <label for="nom">Votre nom :</label>
  <input type="text" id="nom" name="nom" required>

  <!-- Champ email -->
  <label for="email">Email :</label>
  <input type="email" id="email"
         placeholder="exemple@mail.fr" required>

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

  <!-- Bouton d'envoi -->
  <button type="submit">S'inscrire</button>
</form>

Attributs de <form>

action = URL ou envoyer les donnees
method = GET (visible) ou POST (cache)

Pourquoi <label> ?

Cliquable : active le champ associe
Accessibilite : aide les lecteurs d'ecran

Select et Textarea

select-textarea.html

<!-- Menu deroulant -->
<label for="pays">Pays :</label>
<select id="pays" name="pays" required>
  <option value="">Choisir...</option>
  <option value="fr">France</option>
  <option value="be">Belgique</option>
</select>

<!-- Zone de texte multi-lignes -->
<label for="message">Message :</label>
<textarea id="message" rows="4"
          placeholder="Ecrivez...">
</textarea>

Checkbox et Radio

checkbox-radio.html

<!-- Cases a cocher (choix multiples) -->
<fieldset>
  <legend>Vos interets :</legend>
  <label>
    <input type="checkbox" name="interets" value="sport"> Sport
  </label>
</fieldset>

<!-- Boutons radio (choix unique) -->
<fieldset>
  <legend>Genre :</legend>
  <label>
    <input type="radio" name="genre" value="h"> Homme
  </label>
</fieldset>

Validation des formulaires

HTML5 permet de valider les champs cote client(avant l'envoi) grace a des attributs :

requiredChamp obligatoire

minlengthLongueur minimum

maxlengthLongueur maximum

min / maxValeur min/max (nombre)

patternExpression reguliere

placeholderTexte d'aide

Important : La validation HTML est utile mais pas suffisante ! Les donnees doivent toujours etre verifiees cote serveur pour la securite.

Quiz : Teste tes connaissances

5 questions pour verifier ce que tu as appris sur les formulaires HTML

A retenir

<form> englobe tous les champs du formulaire
<label> ameliore l'accessibilite et l'UX
Differents type pour differents besoins (text, email, password...)
required, minlength, pattern pour valider

CSS Layout Cours suivant : Liens et Navigation