HTML5 Input Type


En plus de nouveaux attributs HTML5, nous avons aussi de nouveaux types de la balise <input />.
  • email
  • 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" >

input type email


range:

Le type "range" nous permet de créer un curseur native.
<input type="range" >
input type range

Plus particulièrement, il peut recevoir des attributs: min, max, step, et value, etc.
Pour une démonstration rapide, nous allons prendre un exemple:
HTML5:
<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.
JavaScript:
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 type number

Vous pouvez changer le style de ce type, on utilise le sélecteur:
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">
Dans les navigateurs qui supporte le type "date" seules les dates spécifié seront sélectionnable.

input type date-min-max

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">
input type date-step
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.

input type color


url:

Le type "url" permet de s'assurer que le text saisi par l'utilisateur est un url valide.
<input type="url">

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.
Partager!

Enregistrer un commentaire