En plus de nouveaux attributs HTML5, nous avons aussi de nouveaux types de la balise <input />.
Le type "email" autoriser uniquement la structure des adresse email valide.
Le type "range" nous permet de créer un curseur natif.
Plus particulièrement, il peut recevoir des attributs: min, max, step, et value, etc.
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;
});
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".
Permet de saisir seulement des chiffres, peut-être lorsque vous avez besoin de l'âge ou d'un numéro quelconque.
Vous pouvez changer le style de ce type, on utilise le sélecteur:
input::-webkit-inner-spin-button {
/* votre style */
}
Le type "date" nous donne la possibilité d'indiquer aux utilisateurs de sélectionner une date valide.
Quelques options de ce type:
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">
Dans les navigateurs qui supporte le type "date" seules les dates spécifié seront sélectionnable.
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">
En plus, HTML5 offre également des choix alternatifs:
<input type="datetime">
<input type="date">
<input type="month">
<input type="week">
<input type="time">
les navigateurs prennent en charge des différents couleur.
Le type "url" permet de s'assurer que le text saisi par l'utilisateur est un url valide.
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.
Si vous voulez valider un numéro de téléphone, vous aurez la possibilité 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.
type "search"; à première vue, ne fait pas beaucoup plus que créer une input avec des coins arrondis.
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">
Les nouvelles balises html5, input type, HTML5
via Blog Développeur http://ift.tt/1jIG4rp
