Module 6 : Interagir avec les

formulaires HTML
Séquence 6.1 : Les formulaires en HTML5
 Séquence 6.1 : Les formulaires en
HTML5

Développement Web – Faycel CHAOUA & Houda TOUKABRI 2

 Plan

DÉFINITION DE ÉLÉMENTS DE LES NOUVEAUX CHAMPS

FORMULAIRE FORMULAIRE <INPUT>

Développement Web – Faycel CHAOUA & Houda TOUKABRI 3

 Définition de formulaire

Développement Web – Faycel CHAOUA & Houda TOUKABRI 4

 Définition de formulaire
• Un formulaire HTML est une partie de page web qui accepte des
entrées de l’utilisateur.
• Un formulaire HTML5 : Ajout de nombreux types nouveaux
pour les champs de formulaire, auparavant fournis par des
bibliothèques JavaScript.
• De nombreux nouveaux types de champs <input> ont été
introduits (Non supportés par tous les navigateurs).
Développement Web – Faycel CHAOUA & Houda TOUKABRI 5
 Éléments de formulaire

Développement Web – Faycel CHAOUA & Houda TOUKABRI 6

 Éléments de formulaire
• <button> : crée un contrôle interactif ayant la forme d'un bouton.

• <datalist> : contient un ensemble d'éléments <option> qui représentent les valeurs

possibles pour d'autres contrôles.

• <fieldset> : regroupe plusieurs contrôles interactifs ainsi que des étiquettes (<label>)
dans un formulaire web.

• <legend> : représente une légende pour le contenu de son élément parent <fieldset>.

Développement Web – Faycel CHAOUA & Houda TOUKABRI 7

 Éléments de formulaire

• <input> : permet à l'utilisateur de saisir des données. La saisie dépend fortement de

l’attribut type.

• <label> : représente une légende pour un objet d'une interface

utilisateur. L’attribut for permet d’associer la légende à un contrôle.

• <meter> : représente une valeur scalaire dans un intervalle donné ou une valeur
fractionnaire.

Développement Web – Faycel CHAOUA & Houda TOUKABRI 8

 Éléments de formulaire

• <select> : représente un contrôle qui fournit une liste d'options parmi lesquelles
l'utilisateur pourra choisir.

• <optgroup> : crée un groupe d'options parmi lesquelles on peut choisir dans un

élément <select>.

• <option> : représente un contrôle au sein d'un élément <select>, <optgroup> ou

<datalist>.

Développement Web – Faycel CHAOUA & Houda TOUKABRI 9

 Éléments de formulaire

• <progress> : indique l'état de complétion d'une tâche et est généralement

représenté par une barre de progression.

• <output> : représente un conteneur dans lequel un site ou une application peut

injecter le résultat d'un calcul ou d'une action utilisateur.

• <textarea> : représente un contrôle qui permet d'éditer du texte sur plusieurs

lignes.

Développement Web – Faycel CHAOUA & Houda TOUKABRI 10

 Les nouveaux champs
<input>

Développement Web – Faycel CHAOUA & Houda TOUKABRI 11

 Les nouveaux champs <input>

Le champ <input type="color"> :

• Permet de choisir une couleur.

• Syntaxe : <input type="color" name="favcolor">

• Non supporté par IE.

Développement Web – Faycel CHAOUA & Houda TOUKABRI 12

 Les nouveaux champs <input>
Le champ <input type="date"> :
• Permet de sélectionner une date.
• Syntaxe : <input type="date" name="inputDate">
• Non supporté par Safari et IE (<11).
• On peut utiliser les attributs min et max pour ajouter des restrictions sur la
date choisie.

Développement Web – Faycel CHAOUA & Houda TOUKABRI 13

 Les nouveaux champs <input>

Le champ <input type="datetime-local"> :

• Permet de choisir la date et l’heure.

• Syntaxe : <input type="datetime-local" name="inputDateTime">

• Non supporté par Firefox, Safari et IE (<12).

Développement Web – Faycel CHAOUA & Houda TOUKABRI 14

 Les nouveaux champs <input>
Le champ <input type="time"> :
• Permet de choisir l’heure.
• Syntaxe : <input type="time" name="inputTime">
• Non supporté par Firefox, Safari et IE (<12).
• On peut utiliser les attributs min et max pour ajouter des restrictions sur le
temps.

Développement Web – Faycel CHAOUA & Houda TOUKABRI 15

 Les nouveaux champs <input>

Le champ <input type="week"> :

• Permet de choisir une semaine.

• Syntaxe : <input type="week" name="semaine">

• Non supporté par Firefox, Safari et IE (<12).

Développement Web – Faycel CHAOUA & Houda TOUKABRI 16

 Les nouveaux champs <input>

Le champ <input type="month"> :

• Permet de choisir un mois.

• Syntaxe : <input type="month" name="mois">

• Non supporté par Firefox, Safari et IE (<12).

Développement Web – Faycel CHAOUA & Houda TOUKABRI 17

 Les nouveaux champs <input>
Le champ <input type="email"> :
• Permet de saisir un email.
• Syntaxe : <input type="email" name="email">
• Non supporté par IE (<9).
• Validation + messages d’erreurs.
• On peut spécifier une liste de valeurs possibles.

Développement Web – Faycel CHAOUA & Houda TOUKABRI 18

 Les nouveaux champs <input>
Le champ <input type="number"> :
• Permet de saisir une valeur numérique.
• Syntaxe : <input type="number" name="nombre">

• Non supporté par IE (<9).

• On peut utiliser les attributs min, max et step pour ajouter des restrictions sur le
nombre.

Développement Web – Faycel CHAOUA & Houda TOUKABRI 19

 Les nouveaux champs <input>

Le champ <input type="range"> :

• Permet de définir une plage de nombres.

• Syntaxe : <input type="range" name="plage" min="0" max="10">

• Non supporté par IE (<9).

Développement Web – Faycel CHAOUA & Houda TOUKABRI 20

 Les nouveaux champs <input>

Le champ <input type="tel"> :

• Permet de saisir un numéro de téléphone.

• Syntaxe : <input type="tel" name="numTel" pattern="[0-9]{8}">

• On peut valider les données selon un format bien déterminé.

• On peut utiliser les attributs placeholder, pattern et required.
Développement Web – Faycel CHAOUA & Houda TOUKABRI 21
 Les nouveaux champs <input>

Le champ <input type="url"> :

• Permet de saisir une URL.

• Syntaxe : <input type="url" name="pageURL">

• Non supporté par IE (<9).

• Validation + messages d’erreurs.
Développement Web – Faycel CHAOUA & Houda TOUKABRI 22