logo oujood
🔍

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.

OUJOOD.COM

Nouveaux Types d'entrée de formulaire

HTML5 cours tutoriel

Ce chapitre aborde les nouveaux types d'entrée suivants:

Type d'entrée : couleur

Quand on utilise le type de couleur "color", les champs d'entrée doivent contenir une couleur. En cliquant dessus, un nuancier est affiché.

Exemple : Sélectionnez une couleur dans un nuancier :

Exemple :     📋 Copier le code 

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title>HTML5 type d'entrées demo</title>
  </head>
  <body>
  <form action="#">
   Sélectionner votre couleur favorite :  <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 :

Exemple :     📋 Copier le code 

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <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-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) :

Exemple :     📋 Copier le code 

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title>HTML5 type d'entrées demo</title>
  </head>
  <body>
  <form action="#">
  Date de début (date et heure): <input type="datetime-local"
  name="bdaytime">
   <br>  <input type="submit">
  </form>
  </body>
  </html>

Type d'entrée : email

Le type email est utilisé pour les champs d'entrée qui doivent contenir une adresse e-mail.

Exemple : Définissez un champ pour une adresse email

Sera automatiquement validée lorsque le formulaire est envoyé:

Exemple :     📋 Copier le code 

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <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 email et change le clavier à l'écran pour correspondre (ajoute @ et les options .com).

Type d'entrée : month

Le type month permet à l'utilisateur de sélectionner un mois et l'année.

Exemple : Définissez un contrôle mois et année (aucun fuseau horaire) :

Exemple :     📋 Copier le code 

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <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 nombres qui pourront être acceptés :

Exemple : Définir un champ numérique (avec restrictions) :

Exemple :     📋 Copier le code 

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <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 :

Exemple :     📋 Copier le code 

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <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 curseur) :

Exemple :     📋 Copier le code 

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <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 nombres

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 search 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 de site ou recherche Google) :

Exemple :     📋 Copier le code 

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <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

Le type tel est utilisé pour les champs d'entrée qui doivent contenir un numéro de téléphone.

Exemple : Définissez un champ pour entrer un numéro de téléphone :

Exemple :     📋 Copier le code 

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title>HTML5 type d'entrées demo</title>
  </head>
  <body>
  <form action="#">
  Téléphone: <input type="tel" name="usrtel">
   <br>  <input type="submit">
  </form>
  </body>
  </html>

Type d'entrée : time

Le type time permet à l'utilisateur de sélectionner une heure.

Exemple : Définissez un contrôle permettant d'entrer une heure (sans fuseau horaire) :

Exemple :     📋 Copier le code 

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title>HTML5 type d'entrées demo</title>
  </head>
  <body>
  <form action="#">
  Sélectionnez un temps: <input type="time" name="usr_time">
   <br>  <input type="submit">
  </form>
  </body>
  </html>

Type de saisie : url

Le type url est utilisé pour les champs d'entrée qui 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 :

Exemple :     📋 Copier le code 

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title>HTML5 type d'entrées demo</title>
  </head>
  <body>
  <form action="#">
  Ajoutez votre site: <input type="url" name="homepage">
   <br>  <input type="submit">
  </form>
  </body>
  </html>

Astuce : Safari sur iPhone reconnaît le type d'entrée url et change le clavier à l'écran pour correspondre.

Type d'entrée : week

Le type week 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)

Exemple :     📋 Copier le code 

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title>HTML5 type d'entrées demo</title>
  </head>
  <body>
  <form action="#">
  Sélectionner une semaine: <input type="week"
  name="week_year">
   <br>  <input type="submit">
  </form>
  </body>
  </html>

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