HTML5 Les Nouveaux Types input

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.

Nouveaux Types d'entrée de formulaire

HTML5 cours tutorial

Ce 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é.

Opera Chrome Internet Explorer

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.

Opera Safari Chrome Firefox Internet Explorer

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).

Opera Safari Chrome Firefox Internet Explorer

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).

Opera Safari Chrome Firefox Internet Explorer

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.

Opera Safari Chrome Firefox Internet Explorer

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.

Opera Safari Chrome Firefox Internet Explorer

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 :

Opera Safari Chrome Firefox Internet Explorer

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.

Opera Safari Chrome Firefox Internet Explorer

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

Le type de recherche est utilisé pour les champs de recherche (un champ de recherche se comporte comme un champ de texte normal).

Opera Safari Chrome Firefox Internet Explorer

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.

Opera Safari Chrome Firefox Internet Explorer

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.

Opera Safari Chrome Firefox Internet Explorer

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é.

Opera Safari Chrome Firefox Internet Explorer

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.

Opera Safari Chrome Firefox Internet Explorer

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

<input>

Définit un contrôle d'entrée

Par carabde 10 juin 2014

chapitre précédent

sommaire

chapitre suivant