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é.
<!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.
<!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).
<!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).
<!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é:
Sélectionner 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.
<!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 :
<!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 :
<!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.
<!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) :
Sélectionner 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>
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.
<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é.
<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.
<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 |
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENT