En plus de nouveaux attributs HTML5, nous avons aussi de nouveaux types de la balise <input />.
- range
- color
- number
- datetime
- date
- month
- week
- time
- url
- tel
- search
email:
Le type "email" autoriser uniquement la structure des adresse email valide.
<input type="email" >
range:
Le type "range" nous permet de créer un curseur native.
<input type="range" >
Pour une démonstration rapide, nous allons prendre un exemple:
<input type="range" id="range" min="0" max="10" step="2" value="0"> <output for="range"></output>
Maintenant, nous allons utiliser JavaScript/JQuey pour définir la valeur rendu.
var range = document.querySelector('#range'), output = range.nextElementSibling; output.value = range.value; range.addEventListener('change', function() { output.value = range.value; });JQuery:
var range = $('#range'), output = range.siblings('output'); output.val( range.val() ); range.on('change', function() { output.val( range.val() ); });
La valeur produit correspondant à ce nous avons spécifié dans l'attribut "range".
number:
Permet de saisir seulement des chiffres, peut-être lorsque vous avez besoin de l'âge ou d'un numéro quelconque.
<input type="number" >
input::-webkit-inner-spin-button { /* votre style */ }
date:
Le type "date" nous donne la possibilité d'indiquer aux utilisateurs de sélectionner une date valide.
<input type="date" >
Quelques options de ce type:
min:
Certains sites vous obligent à choisir une date dans un délai spécifique. L'attribut "min" et "max" peut être utilisé pour cela:
<input type="date" min="2013-12-15" max="2013-12-30">
step:
Par ailleurs, si vous voulez limiter le choix à chaque cinq journée par exemple on peut utiliser l'attribut "step"
<input type="date" step="5">
d'autres options:
En plus, HTML5 offre également des choix alternatifs:
<input type="datetime"> <input type="date"> <input type="month"> <input type="week"> <input type="time">
color:
<input type="color">
les navigateurs prennent en charge des différents couleur.
url:
Le type "url" permet de s'assurer que le text saisi par l'utilisateur est un url valide.
<input type="url">
tel:
Leur avantage actuel est de présenter la forme d'un numéro de téléphone. Dans les navigateurs mobiles qui supportent ce nouveau type, permet d'afficher correctement un pavé numérique lors de la mise en place du clavier.
<input type="tel">
Si vous voulez valider un numéro de téléphone, vous aurez la possibilitée d'utiliser l'attribut pattern. Par exemple, imaginons que j'ai besoin un numéro de téléphone au format (0000-000-000):
<input type="tel" pattern="\d{4}-?\d{3}-?\d{3}">
Cela permettra d'assurer que la forme ne soumettra si la valeur fournie prend la forme d'0000-000-000 ou 0000000000.
search:
type "search"; à première vue, ne fait pas beaucoup plus que créer une input avec des coins arrondis.
<input type="search">
Peut-être une icône de recherche s'affichera sur le côté gauche de l'input, aussi permet au navigateur de se souvenir vos requêtes de recherche précédents.
<input type="search" results="3">
* la version google chrome utiliser est 31.
Enregistrer un commentaire