Définit un bouton de commande que l'utilisateur peut appeler
Les nouveaux types de l'élément de formulaire input que HTML5 a introduit sont : color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url et week
HTML5 a introduit plusieurs nouveaux types d'entrée pour les formulaires.
Remarque : Les principaux navigateurs ne prennent pas tous en charge tous les nouveaux types d'entrée. Toutefois, vous pouvez commencer déjà à les utiliser ; Si elles ne sont pas pris en charge, ils se comportent comme des champs de texte ordinaire.
Ce chapitre aborde les nouveaux types d'entrée suivant:
Quand on utilise le type de couleur "color" les champs d'entrée doivent contenir une couleur, on cliquant dessus un nuancier est affiché.
Exemple : 📋 Copier le code
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=9"/> <title>HTML5 type d'entrées demo</title> </head> <body> <form action="#"> Sélectionner votre couleur favourite : <input type="color" name="favcolor"><br /> <input type="submit"></form> </body> </html>
Le type date permet à l'utilisateur de sélectionner une date.
Exemple : 📋 Copier le code
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=9"/> <title>HTML5 type d'entrées demo</title> </head> <body> <form action="#"> Date de naissance : <input type="date" name="bday"> <br /> <input type="submit"></form> </body> </html>
Le type datetime permet à l'utilisateur de sélectionner une date et heure (avec fuseau horaire).
Exemple : 📋 Copier le code
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=9"/> <title>HTML5 type d'entrées demo</title> </head> <body> <form action="#"> Date de debut (date et heur): <input type="datetime" name="bdaytime"> <br /> <input type="submit"></form> </body> </html>
Le type datetime local permet à l'utilisateur de sélectionner une date et heure (sans fuseau horaire).
Exemple : 📋 Copier le code
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=9"/> <title>HTML5 type d'entrées demo</title> </head> <body> <form action="#"> Date de debut (date et heur): <input type="datetime-local" name="bdaytime"> <br /> <input type="submit"></form> </body> </html>
Le type de courrier est utilisé pour les champs d'entrée doivent contenir une adresse de messagerie.
Sera automatiquement validée lorsque le formulaire est envoyé:
Exemple : 📋 Copier le code
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=9"/> <title>HTML5 type d'entrées demo</title> </head> <body> <form action="#"> E-mail: <input type="email" name="usremail"> <br /> <input type="submit"></form> </body> </html>
Astuce : Safari sur iPhone reconnaît le type de courrier et change le clavier à l'écran pour faire correspondre (ajoute et options .com).
Le type mois permet à l'utilisateur de sélectionner un mois et l'année.
Exemple : 📋 Copier le code
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=9"/> <title>HTML5 type demo</title> </head> <body> <form action=" "> Date naissance (mois et année): <input type="month" name="mois"><input type="submit"></form> </body> </html>
Le type number est utilisé pour les champs d'entrée qui doivent contenir une valeur numérique.
Vous pouvez également définir des restrictions sur le type de chiffres qui pourront être acceptés :
Exemple : 📋 Copier le code
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=9"/> <title>HTML5 type d'entrées demo</title> </head> <body> <form action="#"> Quantité (entre 1 et 5): <input type="number" name="quantity" min="1" max="5"> <br /> <input type="submit"></form> </body> </html>
Utilisez les attributs suivants pour spécifier des restrictions :
Exemple : 📋 Copier le code
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=9"/> <title>HTML5 type number avec toutes les restrictions</title> </head> <body> <form action="" method="get"> <input type="number" name="points" min="0" max="12" step="3" value="0"><input type="submit"></form> </body> </html>
Le type range est utilisé pour les champs d'entrée qui doivent contenir une valeur dans une plage de nombres.
Exemple : 📋 Copier le code
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=9"/> <title>HTML5 type d'entrées demo</title> </head> <body> <form action="" method ="get"> Points: <input type="range" name="points" min="1" max="10"> <br /> <input type="submit"></form> </body> </html>
Vous pouvez également définir des restrictions sur le type de chiffres
Utilisez les attributs suivants pour spécifier des restrictions :
Le type de recherche est utilisé pour les champs de recherche (un champ de recherche se comporte comme un champ de texte normal).
Exemple Définir un champ de recherche (comme une recherche site ou recherche Google) :
Exemple : 📋 Copier le code
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=9"/> <title>HTML5 type d'entrées demo</title> </head> <body> <form action=""> Recherche Google: <input type="search" name="googlesearch"> <br /> <input type="submit"></form> </body> </html>
Exemple : 📋 Copier le code
Recherche Google: <input type="search" name="googlesearch"> Telephone: <input type="tel" name="usrtel"> <br /> <input type="submit"></form>
Le type de temps time permet à l'utilisateur de sélectionner une heure.
Exemple : 📋 Copier le code
<form action=""> Sélectionne un temp: <input type="time" name="usr_time"> <br /> <input type="submit"></form>
Le type d'url est utilisé pour les champs d'entrée doivent contenir une adresse URL.
La valeur du champ url est validée automatiquement lorsque le formulaire est envoyé.
Exemple : 📋 Copier le code
<form action=""> Ajouter votre site: <input type="url" name="homepage"> <br /> <input type="submit"></form>
Astuce : Safari sur iPhone reconnaît le type d'entrée d'url et change le clavier à l'écran pour faire correspondre .
Le type semaine permet à l'utilisateur de sélectionner une semaine et l'année.
Exemple : 📋 Copier le code
<form action=""> sélectionner une semmaine <input type="week" name="week_year"> <br /> <input type="submit"></form>
balise |
Description |
---|---|
Définit un contrôle d'entrée |