Les éléments et attributs de formulaire

Le langage HTML 5
El hadji Mamadou NGUER Enseignant chercheur en Informatique à l’UVS
Séquence 2 : Les éléments et attributs de formulaire

Objectifs spécifiques : A la suite de cette séquence, l’étudiant doit être capable de

décrire, expliquer et mettre en œuvre :

1. les nouveaux éléments et attributs de formulaire,

2. les nouveaux types d’entrée de l’élément input,
3. et les nouveaux attributs de l’élément input.
Introduction

HTML5 contient :
• de nouveaux éléments de formulaire: <datalist> et <output>
• de nouveaux attributs de <form>: autocomplete et novalidate
• de nouveaux attributs de <input>:
- Autocomplete - formmethod
- min et max
- Autofocus - formnovalidate
- multiple
- Form - formtarget
- pattern (regexp)
- Formaction - height et width
- placeholder
- formenctype - list
- required
- step
• de nouveaux types d’entrée de <input>:
- color - email - search
- Date - month - tel
- datetime - number - time
- datetime-local - range - url
- week
Les nouveaux éléments et attributs de formulaire

L’élément datalist
• L'élément <datalist> spécifie une liste d'options prédéfinies pour un élément <input>.

• Il est utilisé pour fournir une fonctionnalité de "saisie semi-automatique" sur les éléments
<input>.
• Et permet de montrer à l’utilisateur une liste déroulante d’options prédéfinies comme
données d'entrée.

• L’attribut list <input> sera utilisé pour lier l'élément <input> à l’élément <datalist>.

Exemple : Un élément <input> avec des valeurs prédéfinies dans un <datalist>:

<input list="navigateurs">
<datalist id="navigateurs">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
</datalist>
Les nouveaux éléments et attributs de formulaire

L’élément datalist
• Exemple : Un élément <input> avec des valeurs prédéfinies dans un <datalist>:
<input list="navigateurs">

<datalist id="navigateurs">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Les nouveaux éléments et attributs de formulaire

L’élément keygen (Deleted from HTML 5)

• L'élément <keygen> fournit un moyen sûr pour authentifier les utilisateurs.

• La balise <keygen> spécifie un champ de générateur de clés paires dans un formulaire.

• Lorsque le formulaire est soumis, deux clés sont générées, une privée et une publique.

• La clé privée est stockée localement et la clé publique est envoyée au serveur et pourra
être utilisée ultérieurement pour générer un certificat de client pour authentifier l'utilisateur.

Exemple : Un formulaire avec un champ de keygen :

<form action="action_page.php" method="get">
Identifiant: <input type="text" name="login">
Cryptage: <keygen name="securite">
<input type="submit">
</form>
Les nouveaux éléments et attributs de formulaire

L’élément Output
• L'élément <output> représente le résultat d'un calcul (tel que celui réalisé par un script).

Exemple : Effectuer un calcul et afficher le résultat dans un élément <output>:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

Attribut Valeur Description

for Id de l’élément Spécifie la relation entre le résultat du calcul et les éléments utilisés dans le
calcul
form Id du Spécifie une ou plusieurs formulaires auxquelles appartient l'élément de
formulaire sortie
name nom Spécifie un nom pour l'élément de sortie
Les nouveaux éléments et attributs de formulaire

L’attribut autocomplete
• Lorsque l’autocomplétion est activé, le navigateur complète automatiquement les valeurs
saisies en se basant sur les valeurs entrées par l'utilisateur auparavant.

• NB: Il est possible d’activer l’autocomplétion sur le formulaire, et le désactiver sur les champs
d'entrée, vice versa.
• L’autocomplétion fonctionne avec <form> et les types <input> suivants: text, search, url, tel,
email, password, datepickers, range, et color.

• Exemple : Autocompletion activée sur le formulaire (et désactivé sur un champs de saisie):
<form action="page.php" autocomplete="on">
Prénoms:<input type="text" name="prenoms"><br>
Nom: <input type="text" name="nom"><br>
Email: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
Les nouveaux éléments et attributs de formulaire

L’attribut novalidate
• C’est un attribut de <form> qui précise que les données de formulaire ne doivent pas être
validées lorsqu'elles sont soumises.

• Exemple :
<form action="page_action.php" novalidate>
Email: <input type="email" name="user_email"><br>
<input type="submit">
</form>
Les nouveaux types d’entrée de <input>

• Les nouveaux types d’entrée de <input> introduits dans HTML 5 pour permettre un meilleur
contrôle de saisie et de validation. :

- color - email - search

- Date - month - tel
- datetime - number - time
- datetime-local - range - url
- week

• Les principaux navigateurs ne prennent pas tous en charge tous les nouveaux types
d'entrée. Cependant, vous pouvez déjà commencer à les utiliser. S’ils ne sont pas supportés,
ils se comporteront comme des champs de texte ordinaire.
Les nouveaux types d’entrée de <input>

• Le type d’entrée color : Le type d’entrée color est utilisé pour les champs de saisie devant
contenir une couleur.
Exemple :
Sélectionner une couleur :
<input type="color" name="ncouleur">

• Le type d’entrée date : Le type date permet à l'utilisateur de sélectionner une date.
Exemple :
Date de naissance :
<input type="date" name="datenais">
Les nouveaux types d’entrée de <input>

• Le type d’entrée datetime : Il permet à l'utilisateur de sélectionner une date et une heure
(avec fuseau horaire).
Exemple : Donner une date avec heure :
<input type="datetime" name="date_examen">

• Le type d’entrée e-mail : Il est utilisé pour des champs d'entrée devant contenir une adresse
e-mail.
Exemple : une adresse e-mail qui sera automatiquement validé lors de son envoi:

Date de naissance :
<input type="email" name="adr_email">
Les nouveaux types d’entrée de <input>

• Le type d’entrée month : Il permet à l'utilisateur de sélectionner un mois et l'année.

Exemple : Date anniversaire (mois et année): :
<input type="month" name="date_anniv">

• Le type d’entrée number : Il est utilisé pour les champs de saisie qui doivent contenir une
valeur numérique. On peut mettre des restrictions.
Exemple : Définir un intervalle numérique (avec des restrictions):

Age patient : <input type="number" name="age_patient" min="0" max="100">

Les nouveaux types d’entrée de <input>

• Le type d’entrée month : Il permet à l'utilisateur de sélectionner un mois et l'année.

Exemple : Date anniversaire (mois et année): :
<input type="month" name="date_anniv">

• Le type d’entrée number : Il est utilisé pour les champs de saisie qui doivent contenir une
valeur numérique. On peut mettre des restrictions avec les attributs suivants :
- max pour spécifier la valeur maximale autorisée
- min pour spécifier la valeur minimale autorisée
- step pour spécifier les intervalles de numéros juridiques
- value pour indiquer la valeur par défaut
Exemple : Définir un intervalle numérique (avec des restrictions):

Age patient : <input type="number" name="age_patient" min="0" max="100">

Les nouveaux types d’entrée de <input>

• Le type d’entrée range: Il est utilisé pour les champs de saisie qui doivent contenir une
valeur d'une plage de nombres. On peut mettre des restrictions avec les attributs suivants
max, min, step et value vus dans le type d’entrée number.
Exemple : Définir un intervalle numérique (avec un curseur):

Entrer un point : <input type="range" name="point" min="0" max="100">

• Autres type d’entrée : Il existe d’autres types d’entrées de input tels que :
- search pour définir un champ de recherche
- tel pour définir un champ devant contenir un numéro de téléphone
- time pour définir un champ devant contenir une heure
- url pour définir un champ devant contenir une url
- week pour définir un champ devant contenir une semaine d’une année
Les nouveaux attributs de <input>

• Les nouveaux attributs de <input> introduits dans HTML 5 sont :

- autocomplete - formmethod - min et max
- autofocus - formnovalidate - multiple
- form - formtarget - pattern (regexp)
- formaction - height et width - placeholder
- formenctype - list - required
- step
• L’attribut autofocus: C’est un attribut booléen qui permet de donner le focus à un élément
<input> au chargement de la page.

<form action="page_action.php">
Email: <input type="text" name="email" autofocus><br>
<input type="submit">
</form>
Les nouveaux attributs de <input>

• L’attribut form: Il indique une ou plusieurs formulaires auxquels un élément <input>

appartient. Pour faire référence à plus d'un formulaire, une liste d’identifiants de formulaire
séparés par des espaces.
<form action="page_action.php" id="form1">
Exemple : Prénoms: <input type="text" name="prenoms"><br>
<input type="submit" value="Submit">
</form>
Nom: <input type="text" name="nom" form="form1">

• L’attribut formaction: Utilisé avec les boutons de type="submit" ou de type="image", il

spécifie l'URL d'un fichier qui traitera les données du formulaire. Il remplace l'attribut action
d’un élément form. <form action="page.php">
Prénoms: <input type="text" name="prenoms"><br>
Exemple : Nom: <input type="text" name="nom"><br>
<input type="submit" value="Envoyer"><br>
<input type="submit" formaction="page_admin.php"
value="Envoyer comme admin">
</form>
Les nouveaux attributs de <input>

• L’attribut formenctype: Utilisé avec les boutons de type="submit" ou de type="image", il

spécifie comment les données de formulaire sont codées lorsqu'elles sont soumises. Il
remplace l'attribut enctype d’un élément form de méthode post.
Exemple : <form action="page_binaire.php" method="post">
Prénoms: <input type="text" name="prenoms"><br>
<input type="submit" value="Soumettre">
<input type="submit" formenctype="multipart/form-data"
value="Soumettre comme Multipart/form-data">
</form>

• L’attribut formmethod: Utilisé avec les boutons de type="submit" ou de type="image", il

définit la méthode HTTP pour envoyer des données de formulaire à l'URL de action. Il
remplace l'attribut action d’un élément form.
Exemple : <form action="/action_page.php" method="get">
Nom: <input type="text" name="nom"><br>
<input type="submit" value="Soumettre">
<input type="submit" formmethod="post" value="Submit avec POST">
</form>
Les nouveaux attributs de <input>

• L’attribut formnovalidate: Pouvant être utilisé avec les boutons de type="submit", il

remplace l'attribut novalidate d’un élément form.
Exemple : <form action="page.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Submit sans valider">
</form>

• L’attribut formtarget : Pouvant être utilisé avec les boutons de type="submit" ou de

type="image", il spécifie un nom ou un mot-clé indiquant où afficher la réponse reçue après
l'envoi du formulaire. Il remplace l'attribut target d’un élément form.
Exemple : <form action="page.php">
Nom : <input type="text" name="nom"><br>
<input type="submit" value="Submit normal">
<input type="submit" formtarget="_blank"
value="Submit dans une nouvelle fenêtre">
</form>
Les nouveaux attributs de <input>

• Les attributs width et height : Pouvant être utilisé avec les boutons de type="image", il
spécifie les dimensions du bouton image.
Exemple :

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

• L’attribut list : L'attribut list fait référence à un élément <datalist> contenant des options
prédéfinies pour un élément <input>
<input list="navigateurs">
Exemple :
<datalist id="navigateurs">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Les nouveaux attributs de <input>

• Les attributs min et max : Ils spécifient les valeurs minimum et maximum pour un élément
<input>. Ils sont utilisés avec les éléments input de type number, range, date, datetime-local,
month, time et week.
Entrer une date inférieure à 1980-01-01:
Exemple : <input type="date" name="bday" max="1979-12-31">

Entrer une date superieure à 2000-01-01:

<input type="date" name="bday" min="2000-01-02">

Quantité (entre 1 et 5):

<input type="number" name="quantite" min="1" max="5">

• L’attribut multiple : Il spécifie que l'utilisateur est autorisé à entrer plusieurs valeurs dans
l'élément <input>. Il est utilisé avec les éléments input de type email et file.
Exemple :

Selectionner des images: <input type="file" name="image" multiple>

Les nouveaux attributs de <input>

• L’ attribut pattern : L'attribut pattern spécifie une expression régulière à utiliser pour vérifier
la valeur de l'élément <input>. Il est utilisé avec les éléments input de type text, search, url,
tel, email, et password.
Exemple : Un champ de saisie qui ne peut contenir que trois lettres (pas de chiffres ou de
caractères spéciaux).
Code pays: <input type="text" name="code_pays" pattern="[A-Za-z]{3}"
title="Code pays à trois letters">

• L’attribut placeholder : Il spécifie une indication décrivant la valeur attendue d’un champ de
saisie (un exemple de valeur ou une brève description du format). L'indication est affichée
dans le champ de saisie avant que l'utilisateur entre une valeur. Il est utilisé avec les éléments
input de type text, search, url, tel, email, and password.
Exemple :

<input type="text" name="nom" placeholder="Ex : Mabéye Fall">

Les nouveaux attributs de <input>

• L’ attribut required : Il spécifie qu'un champ de saisie doit être rempli avant la soumission du
formulaire. Il peut être utilisé avec les éléments input de type text, search, url, tel, email,
password, date pickers, number, checkbox, radio et file.
Exemple :
Identifiant : <input type="text" name="identifiant" required>

• L’attribut step : Il spécifie le pas des valeurs d’un élément input (ex: step="3" donnera les
valeurs -3, 0, 3, 6, etc.)" et peut être utilisé avec les attributs max et min pour créer un
intervalle de valeurs. Il fonctionne avec les éléments input de type number, range, date,
datetime-local, month, time et week.
Exemple :

<input type="number" name="points" step="3">

Fin du chapitre 2

• Nous voici à la fin du chapitre 2 consacré aux éléments et

attributs de formulaire.

• Le chapitre suivant traitera des éléments sémantiques et des

éléments graphiques.