Cours de Developpement Web

HTML5 — Module 8 : Formulaires

5
par IARO

form, input (22 types), label, select, textarea, validation HTML5 • Niveau debutant

Module 8
Formulaires HTML5
form, input (22 types), label, select, textarea, button, validation native

Objectifs du module

Maitriser la balise <form> et ses attributs (action, method, enctype, novalidate)

Connaitre les 22 types d input HTML5 et leurs attributs specifiques

Utiliser correctement les balises label, select, textarea, button

Organiser un formulaire avec fieldset, legend, datalist et output

Appliquer la validation HTML5 native (required, min, max, pattern, minlength...)

Comprendre les pseudo-classes CSS de validation (:valid, :invalid, :required)

Rendre les formulaires accessibles (label, aria-*, autocomplete)

Construire un formulaire complet, accessible et valide

Niveau Duree Prerequis Module

Intermediaire 4 a 5h Modules 1 a 7 8 / 16

IARO | Cours de Developpement Web | HTML5 - Module 8 : Formulaires Page 1 / 19

HTML5 Module 8 — Formulaires HTML5 par IARO

1 La balise form — Conteneur du formulaire

La balise form est le conteneur principal d un formulaire HTML. Elle definit comment les donnees sont envoyees
au serveur. Tous les elements interactifs (input, select, button...) doivent etre a l interieur d un form pour pouvoir
etre soumis.

Attribut Valeur / Type Description

action URL URL de traitement des donnees (serveur)

method get | post Methode HTTP : get (URL) ou post (corps)

application/x-www-form-urlencoded
enctype text/plain Encodage des donnees (multipart requis pour fichiers)
multipart/form-data

novalidate booleen Desactive la validation HTML5 native

autocomplete on | off Active / desactive l autocompletion du navigateur

name texte Nom du formulaire (pour JS [Link])

target _blank | _self | ... Ou afficher la reponse du serveur

rel external | help | noopener... Relation avec la ressource action

accept-charset UTF-8 ISO-8859-1... Jeux de caracteres acceptes

[Link]
<!-- Formulaire de contact basique -->
<form action="/contact" method="post">
...
</form>

<!-- Formulaire avec upload de fichier -->

<form action="/upload" method="post"
enctype="multipart/form-data">
...
</form>

<!-- Formulaire sans validation native (pour JS custom) -->

<form action="/api/register" method="post" novalidate>
...
</form>

<!-- Methode GET : donnees dans l URL (recherche) -->

<form action="/recherche" method="get">
<input type="search" name="q" placeholder="Rechercher...">
<button type="submit">Chercher</button>
</form>
<!-- URL resultante : /recherche?q=html5 -->

IARO | Cours de Developpement Web | HTML5 - Module 8 : Formulaires Page 2 / 19

HTML5 Module 8 — Formulaires HTML5 par IARO

2 Anatomie complete d un formulaire

Vue d ensemble de la structure d un formulaire HTML5 complet.

<form> <form action="/inscription" method="post">

Informations personnelles
<fieldset>
Nom complet <legend>
<label for="nom">
<fieldset> Entrez votre nom... <input type="text" id="nom" required>

Email
<input type="email">

Preferences
<fieldset>
Niveau
<fieldset> Debutant v <select>

J accepte les CGU <input type="checkbox">

Recevoir la newsletter

<button> S inscrire <button type="submit">

</form>

IARO | Cours de Developpement Web | HTML5 - Module 8 : Formulaires Page 3 / 19

HTML5 Module 8 — Formulaires HTML5 par IARO

3 La balise label — Association champ/etiquette

La balise label associe une etiquette textuelle a un champ de saisie. C est obligatoire pour l accessibilite : les
lecteurs d ecran lisent le label quand le champ obtient le focus. Il y a deux methodes d association.

[Link]
<!-- Methode 1 : for/id (recommandee) -->
<label for="email">Adresse email</label>
<input type="email" id="email" name="email">

<!-- Methode 2 : imbrication (label enveloppe l input) -->

<label>
Adresse email
<input type="email" name="email">
</label>

<!-- Label avec indicateur requis -->

<label for="nom">
Nom complet <span aria-hidden="true" class="requis">*</span>
</label>
<input type="text" id="nom" name="nom" required
aria-required="true">

<!-- Label pour checkbox et radio -->

<input type="checkbox" id="cgu" name="cgu">
<label for="cgu">J accepte les conditions generales</label>

<!-- aria-label : quand pas de label visible -->

<input type="search" aria-label="Rechercher dans le site"
placeholder="Recherche...">

<!-- aria-labelledby : label dans un autre element -->

<h2 id="titre-section">Coordonnees</h2>
<input type="text" aria-labelledby="titre-section" name="coords">

4 Les 22 types d input HTML5

La balise input est l element de formulaire le plus versatile. Avec ses 22 types differents, elle couvre quasiment
tous les cas de saisie. Le type determine la validation, le clavier mobile affiche et les controles natifs du navigateur.

IARO | Cours de Developpement Web | HTML5 - Module 8 : Formulaires Page 4 / 19

HTML5 Module 8 — Formulaires HTML5 par IARO

text email password number

Texte libre Adresse email Mot de passe Nombre

tel url search date

Telephone Adresse URL Recherche Date

time datetime-local month week

Heure Date + Heure Mois Semaine

range color file checkbox

Curseur Couleur Fichier Case a cocher

radio hidden submit reset

Bouton radio Champ cache Bouton envoi Reinitialiser

button image

Bouton neutre Bouton image

IARO | Cours de Developpement Web | HTML5 - Module 8 : Formulaires Page 5 / 19

HTML5 Module 8 — Formulaires HTML5 par IARO

5 Types d input — Details et exemples

Types textuels
[Link]
<!-- text : saisie libre -->
<input type="text" name="nom" placeholder="Votre nom"
minlength="2" maxlength="50" autocomplete="name">

<!-- email : validation email automatique -->

<input type="email" name="email" placeholder="vous@[Link]"
autocomplete="email" multiple>
<!-- multiple : accepte plusieurs emails separes par virgule -->

<!-- password : masque la saisie -->

<input type="password" name="mdp" minlength="8"
autocomplete="new-password"
pattern="(?=.*[A-Z])(?=.*[0-9]).{8,}">

<!-- tel : clavier telephone sur mobile -->

<input type="tel" name="telephone" placeholder="+261 34 00 000 00"
pattern="[+][0-9]{11,15}" autocomplete="tel">

<!-- url : validation URL automatique -->

<input type="url" name="site" placeholder="[Link]

<!-- search : semantique + bouton effacer integre -->

<input type="search" name="q" placeholder="Rechercher..."
aria-label="Recherche">

Types numeriques et dates

IARO | Cours de Developpement Web | HTML5 - Module 8 : Formulaires Page 6 / 19

HTML5 Module 8 — Formulaires HTML5 par IARO

[Link]
<!-- number : saisie numerique avec fleches -->
<input type="number" name="age" min="18" max="99" step="1" value="25">

<!-- range : curseur (slider) -->

<input type="range" name="volume" min="0" max="100" step="5" value="50">
<output for="volume">50</output>

<!-- date : selecteur de date -->

<input type="date" name="naissance"
min="1900-01-01" max="2010-12-31" value="1995-06-15">

<!-- time : selecteur d heure -->

<input type="time" name="heure" min="08:00" max="18:00" step="900">
<!-- step=900 = intervalles de 15 minutes -->

<!-- datetime-local : date + heure -->

<input type="datetime-local" name="rdv"
min="2025-01-01T00:00" max="2025-12-31T23:59">

<!-- month : selecteur mois/annee -->

<input type="month" name="mois" min="2025-01" max="2025-12">

<!-- week : selecteur de semaine -->

<input type="week" name="semaine" min="2025-W01">

<!-- color : selecteur de couleur -->

<input type="color" name="couleur" value="#4f7cff">

IARO | Cours de Developpement Web | HTML5 - Module 8 : Formulaires Page 7 / 19

HTML5 Module 8 — Formulaires HTML5 par IARO

6 Fichiers, checkboxes, radios et boutons

[Link]
<!-- file : upload de fichier(s) -->
<input type="file" name="photo" accept="image/*">
<input type="file" name="docs" accept=".pdf,.doc,.docx"
multiple> <!-- multiple : plusieurs fichiers -->

<!-- checkbox : case a cocher independante -->

<input type="checkbox" id="newsletter" name="newsletter" value="oui"
checked> <!-- checked = coche par defaut -->
<label for="newsletter">Recevoir la newsletter</label>

<!-- radio : choix exclusif dans un groupe -->

<fieldset>
<legend>Niveau</legend>
<input type="radio" id="debutant" name="niveau" value="debutant" checked>
<label for="debutant">Debutant</label>
<input type="radio" id="inter" name="niveau" value="intermediaire">
<label for="inter">Intermediaire</label>
<input type="radio" id="avance" name="niveau" value="avance">
<label for="avance">Avance</label>
</fieldset>

<!-- hidden : valeur cachee (non visible, envoyee au serveur) -->

<input type="hidden" name="csrf_token" value="abc123xyz">
<input type="hidden" name="source" value="page-accueil">

<!-- submit : bouton d envoi du formulaire -->

<input type="submit" value="S inscrire">
<!-- Preferer button submit : plus stylisable -->
<button type="submit">S inscrire</button>

<!-- reset : remet les valeurs par defaut -->

<button type="reset">Reinitialiser</button>

<!-- image : bouton avec image comme submit -->

<input type="image" src="[Link]" alt="Valider">

7 textarea — Zone de texte multi-lignes

IARO | Cours de Developpement Web | HTML5 - Module 8 : Formulaires Page 8 / 19

HTML5 Module 8 — Formulaires HTML5 par IARO

[Link]
<!-- Textarea : zone de saisie multiligne -->
<label for="message">Message</label>
<textarea id="message" name="message"
rows="6" cols="50"
minlength="10" maxlength="500"
placeholder="Ecrivez votre message..."
required
autocomplete="off">
</textarea>

/* CSS pour le textarea */

textarea {
width: 100%;
resize: vertical; /* autorise resize vertical uniquement */
font-family: inherit; /* herite la police du formulaire */
padding: 8px 12px;
border: 1px solid #2a2a50;
border-radius: 6px;
}

/* Empêcher le resize */
textarea { resize: none; }

IARO | Cours de Developpement Web | HTML5 - Module 8 : Formulaires Page 9 / 19

HTML5 Module 8 — Formulaires HTML5 par IARO

8 select — Liste deroulante

[Link]
<!-- select simple -->
<label for="pays">Pays</label>
<select id="pays" name="pays" required>
<option value="">-- Choisir un pays --</option>
<option value="mg">Madagascar</option>
<option value="fr" selected>France</option>
<option value="ci">Cote d Ivoire</option>
</select>

<!-- select avec groupes (optgroup) -->

<select name="cours">
<optgroup label="Frontend">
<option value="html5">HTML5</option>
<option value="css3">CSS3</option>
<option value="js">JavaScript</option>
</optgroup>
<optgroup label="Backend">
<option value="node">[Link]</option>
<option value="python">Python</option>
</optgroup>
</select>

<!-- select multiple : Ctrl+clic pour choix multiple -->

<select name="competences[]" multiple size="5">
<option value="html">HTML5</option>
<option value="css">CSS3</option>
<option value="js">JavaScript</option>
</select>

9 datalist et output — Elements avances

IARO | Cours de Developpement Web | HTML5 - Module 8 : Formulaires Page 10 / 19

HTML5 Module 8 — Formulaires HTML5 par IARO

[Link]
<!-- datalist : suggestions d autocompletion -->
<label for="framework">Framework</label>
<input type="text" id="framework" name="framework"
list="frameworks-liste"
placeholder="Tapez ou choisissez...">
<datalist id="frameworks-liste">
<option value="React">
<option value="[Link]">
<option value="Angular">
<option value="Svelte">
<option value="[Link]">
</datalist>

<!-- output : afficher le resultat d un calcul -->

<form oninput="[Link] = parseInt([Link]) + parseInt([Link])">
<input type="number" id="a" name="a" value="0">
+
<input type="number" id="b" name="b" value="0">
=
<output name="resultat" for="a b">0</output>
</form>

<!-- fieldset + legend : groupement logique -->

<fieldset>
<legend>Adresse de livraison</legend>
<label for="rue">Rue</label>
<input type="text" id="rue" name="rue" autocomplete="street-address">
<label for="ville">Ville</label>
<input type="text" id="ville" name="ville" autocomplete="address-level2">
</fieldset>

IARO | Cours de Developpement Web | HTML5 - Module 8 : Formulaires Page 11 / 19

HTML5 Module 8 — Formulaires HTML5 par IARO

10 Attributs universels des champs

Attribut Valeur / Type Description Applicable sur

name texte Cle envoyee au serveur (obligatoire pour submit) Tous

id texte Identifiant unique pour label for et JS Tous

value texte/nombre Valeur initiale ou envoyee Tous

placeholder texte Texte indicatif (disparait a la saisie) text,email,tel,url,search...

required booleen Champ obligatoire, empêche la soumission si vide Tous sauf hidden

disabled booleen Desactive le champ (non envoye au serveur) Tous

readonly booleen Lecture seule (envoye au serveur) text,email,number...

autocomplete on|off|name|email... Autocompletion navigateur/gestionnaire Tous

autofocus booleen Focus automatique au chargement (un seul par page)

Tous

tabindex entier Ordre de navigation au clavier Tous

form id-form Associe le champ a un form hors de sa structure Tous

multiple booleen Accepte plusieurs valeurs (file, email, select) file,email,select

list id-datalist Lie le champ a un datalist de suggestions text,email,url,number...

11 Validation HTML5 native — Attributs de validation

HTML5 offre une validation cote navigateur sans JavaScript. Elle est declenchee a la soumission du formulaire.
Ces attributs s ajoutent aux elements input, textarea et select.

Attribut Applicable sur Description Exemple

required tous Champ obligatoire, ne peut pas etre vide required

min number,date,range... Valeur minimale autorisee min="18"

max number,date,range... Valeur maximale autorisee max="120"

step number,range,date... Increment valide (ex: 5 pour 0,5,10,15) step="5"

minlength text,email,password... Nombre minimal de caracteres minlength="8"

maxlength text,email,password... Nombre maximal de caracteres maxlength="50"

pattern text,email,tel,url... Expression reguliere de validation pattern="[0-9]{4}"

type tous Le type lui-meme valide (email, url, number...) type="email"

multiple email,file Accepte plusieurs valeurs (emails, fichiers) multiple

accept file Types MIME ou extensions acceptes accept=".pdf,image/*"

IARO | Cours de Developpement Web | HTML5 - Module 8 : Formulaires Page 12 / 19

HTML5 Module 8 — Formulaires HTML5 par IARO

[Link]
<!-- Champ avec validation complete -->
<input type="password" name="mdp"
required
minlength="8"
maxlength="64"
pattern="(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).{8,}"
title="8 caracteres min, 1 majuscule, 1 chiffre"
autocomplete="new-password">

<!-- Telephone Madagascar -->

<input type="tel" name="tel"
pattern="(\+261|0)[0-9]{9}"
title="Format : +261XXXXXXXXX ou 0XXXXXXXXX"
placeholder="+261 34 00 000 00">

<!-- Nombre entre 18 et 99 par pas de 1 -->

<input type="number" name="age"
min="18" max="99" step="1" required>

<!-- Date dans une plage -->

<input type="date" name="rdv"
min="2025-01-01" max="2025-12-31" required>

IARO | Cours de Developpement Web | HTML5 - Module 8 : Formulaires Page 13 / 19

HTML5 Module 8 — Formulaires HTML5 par IARO

12 Pseudo-classes CSS de validation

HTML5 expose des pseudo-classes CSS qui refletent l etat de validation des champs en temps reel. Elles
permettent de styliser les champs selon leur etat sans JavaScript.

:valid — Champ valide :invalid — Champ invalide

rakoto@[Link] pas-un-email
v x

background: #e8fff2; background: #fff2f2;

border-color: #43e97b; border-color: #ff5f6d;

input:valid { border: 2px solid green; } input:invalid { border: 2px solid red; }

input:valid { background: #e8fff2; } /* Eviter :invalid au chargement */

Pseudo-classe Description Usage typique

:valid Champ dont la valeur est valide Bordure verte, icone check

:invalid Champ dont la valeur est invalide Bordure rouge, message erreur

:required Champ avec attribut required Indicateur asterisque

:optional Champ sans required Style normal ou allege

:in-range Valeur dans la plage min/max Curseur vert (range)

:out-of-range Valeur hors plage min/max Curseur rouge (range)

:placeholder-shown Placeholder visible (champ vide) Label flottant CSS

:focus Champ actif (focus clavier/clic) Outline, border glow

:focus-visible Focus via clavier uniquement Indicateur focus clavier

:disabled Champ desactive Opacite reduite

:checked Checkbox ou radio coche Style personnalise checkbox

:user-invalid Invalide apres interaction Evite :invalid au chargement

IARO | Cours de Developpement Web | HTML5 - Module 8 : Formulaires Page 14 / 19

HTML5 Module 8 — Formulaires HTML5 par IARO

[Link]
/* Styles de validation CSS */
input:valid { border-color: #43e97b; background: #e8fff2; }
input:invalid { border-color: #ff5f6d; background: #fff2f2; }

/* Eviter :invalid au chargement (champ vide non touche) */

input:user-invalid { border-color: #ff5f6d; }

/* Ou utiliser :not(:placeholder-shown) pour les navigateurs anciens */

input:not(:placeholder-shown):invalid { border-color: #ff5f6d; }

/* Champ requis : asterisque via CSS */

label:has(+ input:required)::after {
content: " *"; color: #ff5f6d; font-weight: bold;
}

/* Focus visible pour accessibilite clavier */

input:focus-visible {
outline: 3px solid #f5a623;
outline-offset: 2px;
}

/* Checkbox personnalisee */
input[type='checkbox'] { display: none; }
input[type='checkbox'] + label::before {
content: ''; display: inline-block;
width: 16px; height: 16px;
border: 2px solid #4f7cff; border-radius: 3px;
margin-right: 8px; vertical-align: middle;
}
input[type='checkbox']:checked + label::before {
background: #4f7cff;
content: 'v';
color: white; text-align: center;
}

IARO | Cours de Developpement Web | HTML5 - Module 8 : Formulaires Page 15 / 19

HTML5 Module 8 — Formulaires HTML5 par IARO

13 La balise button — Boutons de formulaire

[Link]
<!-- Types de bouton -->
<button type="submit">Envoyer le formulaire</button>
<button type="reset">Reinitialiser</button>
<button type="button">Action JavaScript</button>
<!-- type='button' : ne soumet pas, parfait pour JS -->

<!-- Bouton avec icone SVG -->

<button type="submit" aria-label="Envoyer">
<svg aria-hidden="true">...</svg>
Envoyer
</button>

<!-- Bouton desactive -->

<button type="submit" disabled
aria-disabled="true">Formulaire incomplet</button>

<!-- Bouton qui soumet un autre formulaire -->

<button type="submit" form="mon-form"
formaction="/autre-action"
formmethod="post">Sauvegarder</button>

/* CSS bouton moderne */

button[type='submit'] {
background: linear-gradient(135deg, #f5a623, #e44d26);
color: white; border: none; border-radius: 8px;
padding: 12px 24px; font-size: 1rem;
cursor: pointer; transition: transform 0.2s, opacity 0.2s;
}
button[type='submit']:hover { transform: translateY(-1px); opacity: 0.9; }
button[type='submit']:active { transform: translateY(0); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

14 Accessibilite des formulaires

IARO | Cours de Developpement Web | HTML5 - Module 8 : Formulaires Page 16 / 19

HTML5 Module 8 — Formulaires HTML5 par IARO

[Link]
<!-- Formulaire accessible complet -->
<form action="/inscription" method="post"
aria-label="Formulaire d inscription IARO"
novalidate>

<!-- Annonce les erreurs globales -->

<div role="alert" aria-live="polite" id="erreurs-globales">
</div>

<!-- Groupe avec fieldset -->

<fieldset>
<legend>Informations personnelles</legend>

<!-- Label + input correctement associes -->

<div class="champ">
<label for="prenom">
Prenom <span aria-hidden="true">*</span>
</label>
<input type="text" id="prenom" name="prenom"
required aria-required="true"
autocomplete="given-name"
aria-describedby="prenom-aide prenom-erreur">
<span id="prenom-aide" class="aide">
2 a 50 caracteres
</span>
<span id="prenom-erreur" role="alert"
aria-live="polite" class="erreur">
</span>
</div>

<div class="champ">
<label for="email-insc">Email</label>
<input type="email" id="email-insc" name="email"
required autocomplete="email"
aria-required="true">
</div>
</fieldset>

<button type="submit">
Creer mon compte
</button>
</form>

IARO | Cours de Developpement Web | HTML5 - Module 8 : Formulaires Page 17 / 19

HTML5 Module 8 — Formulaires HTML5 par IARO

15 Bonnes pratiques — Formulaires HTML5

Pratique Recommandation

label obligatoire Chaque champ doit avoir un label associe (for/id ou imbrication)

name sur chaque input Sans name, le champ n est pas envoye au serveur

autocomplete Toujours specifier autocomplete pour UX et securite (new-password)

fieldset pour grouper Grouper les champs logiquement avec fieldset + legend

type correct Utiliser le bon type (email, tel, number...) pour la validation native

required + aria-required Les deux pour la validation et les lecteurs d ecran

pattern avec title Toujours ajouter un title explicatif quand pattern est utilise

:user-invalid en CSS Eviter :invalid qui s active au chargement sur les champs vides

button type explicite Toujours specifier type='submit', 'reset' ou 'button'

novalidate + JS Desactiver la validation native si on gere entierement en JS

multipart pour fichiers enctype='multipart/form-data' obligatoire pour les uploads

aria-describedby Pointer vers les messages d aide et d erreur

role=alert pour erreurs Les messages d erreur dynamiques doivent avoir role=alert

tabindex logique L ordre de tabulation doit suivre l ordre visuel

autocomplete=off Sur les champs sensibles (OTP, codes de securite)

Labels visibles Eviter placeholder comme seul label, il disparait a la saisie

16 Resume complet du Module 8

Concept A retenir

<form action method> Conteneur, action=URL destination, method=get/post

enctype multipart Obligatoire pour les formulaires avec upload de fichiers

<label for='id'> Associe etiquette et champ, obligatoire pour l accessibilite

<input type='text'> 22 types : text, email, password, number, date, range, color...

type='email' Validation email automatique + clavier adapte sur mobile

type='tel' Clavier telephone sur mobile, pas de validation sans pattern

type='number' min max Valeur numerique avec bornes et increment step

type='date' Selecteur de date natif, format ISO 8601 (YYYY-MM-DD)

type='range' Curseur, utiliser output pour afficher la valeur

type='checkbox' Cases a cocher independantes (name + value distincts)

type='radio' Choix exclusif, meme name pour le groupe

type='hidden' Valeur cachee envoyee au serveur (token, source...)

type='file' accept Upload avec filtrage MIME, multiple pour plusieurs fichiers

<textarea rows cols> Zone multiligne, resize:vertical en CSS

IARO | Cours de Developpement Web | HTML5 - Module 8 : Formulaires Page 18 / 19

HTML5 Module 8 — Formulaires HTML5 par IARO

<select> <option> Liste deroulante, optgroup pour grouper, multiple pour multi-sel

<datalist> Suggestions d autocompletion liees par list='id-datalist'

<output for> Affiche le resultat d une expression calculee

<fieldset> <legend> Groupement logique de champs avec titre

required Champ obligatoire, empeche soumission si vide

pattern='regex' Validation par expression reguliere, ajouter title explicatif

minlength maxlength Longueur min/max du texte

min max step Bornes et increment pour number, range, date, time

autocomplete='...' Nom semantique pour aide navigateur/gestionnaire de mots de passe

:valid :invalid :user-invalid pour eviter l activation au chargement du formulaire

<button type='submit'> Preferer button a input type=submit (plus stylisable)

Fin du Module 8 — Prochain : Module 9 : Canvas et graphiques

IARO | Cours de Developpement Web | HTML5 - Module 8 : Formulaires Page 19 / 19