Nouveaux Types d'entrée de formulaire
HTML5 cours tutorialCe chapitre aborde les nouveaux types d'entrée suivant:
Type d'entrée : couleur
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 Sélectionnez une couleur dans un nuancier :
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="#">
Sélectionner votre couleur favourite : <input type="color"
name="favcolor"><br />
<input type="submit"></form>
</body>
</html>
Type d'entrée : date
Le type date permet à l'utilisateur de sélectionner une date.
Exemple Définir un contrôle de date :
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="#">
Date de naissance : <input type="date" name="bday">
<br /> <input type="submit"></form>
</body>
</html>
Type d'entrée : datetime
Le type datetime permet à l'utilisateur de sélectionner une date et heure (avec fuseau horaire).
Exemple Définir un contrôle de date et d'heure (avec fuseau horaire) :
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="#">
Date de debut (date et heur): <input type="datetime"
name="bdaytime">
<br /> <input type="submit"></form>
</body>
</html>
Type d'entrée : datetime local
Le type datetime local permet à l'utilisateur de sélectionner une date et heure (sans fuseau horaire).
Exemple Définir un contrôle de date et d'heure (sans fuseau horaire) :
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="#">
Date de debut (date et heur): <input type="datetime-local"
name="bdaytime">
<br /> <input type="submit"></form>
</body>
</html>
Type d'entrée : email
Le type de courrier est utilisé pour les champs d'entrée doivent contenir une adresse de messagerie.
Exemple Définissez un champ pour une adresse email
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).
Type d'entrée : month
Le type mois permet à l'utilisateur de sélectionner un mois et l'année.
Exemple Définissez un contrôle mois année (aucun fuseau horaire) :
Sélectionner 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>
Type d'entrée : number
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 Définir un champ numérique (avec restrictions) :
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="#">
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 :
- max - spécifie la valeur maximale autorisée
- min - spécifie la valeur minimale autorisée
- step - spécifie les intervalles de nombres autorisés
- value - spécifie la valeur par défaut
Essayez par exemple avec tous les attributs de restriction :
Sélectionner 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>
Type d'entrée : range
Le type range est utilisé pour les champs d'entrée qui doivent contenir une valeur dans une plage de nombres.
Exemple Définissez un contrôle permettant d'entrer un nombre dont la valeur exacte n'est pas importante (comme un contrôle slider) :
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="" 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 :
- max - spécifie la valeur maximale autorisée
- min - spécifie la valeur minimale autorisée
- step - spécifie les intervalles de nombres autorisés
- value - spécifie la valeur par défaut
Type d'entrée : search
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>
Type d'entrée: tel.
Exemple Définissez un champ pour entrer un numéro de téléphone :
Sélectionner le code
Recherche Google: <input type="search" name="googlesearch">
Telephone: <input type="tel" name="usrtel">
<br /> <input type="submit"></form>
Type d'entrée : time
Le type de temps time permet à l'utilisateur de sélectionner une heure.
Exemple Définissez un contrôle permettant d'entrer une heure (sans fuseau horaire) :
Sélectionner le code
<form action="">
Sélectionne un temp: <input type="time" name="usr_time">
<br /> <input type="submit"></form>
Type de saisie : url
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 Définir un champ permettant d'entrer une URL :
Sélectionner 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 .
Type d'entrée : week
Le type semaine permet à l'utilisateur de sélectionner une semaine et l'année.
Exemple Définissez un contrôle semaine et année (aucun fuseau horaire)
Sélectionner le code
<form action="">
sélectionner une semmaine <input type="week"
name="week_year">
<br /> <input type="submit"></form>
Balise HTML5 <input>
|
balise |
Description |
|---|---|
|
Définit un contrôle d'entrée |
La méthode secrète likes sans fin sur Facebook
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENTGRÂCE À FACEBOOK
N'A JAMAIS ÉTÉ SI FACILE
Consulter
