Nouveaux types d'inputs en HTML5

HTML5 introduit plusieurs nouveaux types des <input> comme le mail, date, time, color, range, etc. pour améliorer l'expérience utilisateur et rendre les formulaires plus interactifs. Cependant, si un navigateur ne parvient pas à reconnaître ces nouveaux types d'entrée, il les traitera comme une zone de texte normale.

Dans cette section, nous allons examiner brièvement chacun des nouveaux types d'entrée suivants :

color date datetime-locale mail month number range search tel time url week

Il y avait aussi un type d'entrée datetime pour entrer une date et une heure, mais il est maintenant obsolète.

Type d'entrée color

Le type color permet à l'utilisateur de sélectionner une couleur à partir d'un sélecteur de couleurs et renvoie la valeur de la couleur au format hexadécimal ( #rrggbb). Si vous ne spécifiez pas de valeur, la valeur par défaut est #000000, qui est noire.

Essayons l'exemple suivant pour comprendre comment cela fonctionne :

<form>
    <label for="couleur">Choisir une couleur</label>
    <input type="couleur" value="#ff0000" id="couleur">
</form>

Remarque : L'input de couleur (c'est-à-dire type="color") est prise en charge dans tous les principaux navigateurs Web modernes tels que Firefox, Chrome, Opera, Safari (12.1+), Edge (14+). Non pris en charge par Microsoft Internet Explorer et les anciennes versions des navigateurs Apple Safari.

Type date

Le type date permet à l'utilisateur de sélectionner une date dans un calendrier déroulant.

La valeur de la date inclut l'année, le mois et le jour, mais pas l'heure.

<form>
    <label for="madate">Choisir une date :</label>
    <input type="date" value="24-07-2022" id="madate">
</form>

Remarque : La saisie de la date (c'est-à-dire type="date") est prise en charge par les navigateurs Chrome, Firefox, Opera et Edge. Non pris en charge par les navigateurs Internet Explorer et Safari.

Type  datetime-local

Le type datetime-local permet à l'utilisateur de sélectionner à la fois la date et l'heure locale, y compris l'année, le mois et le jour ainsi que l'heure en heures et minutes.

Essayons l'exemple suivant pour comprendre comment cela fonctionne :

<form>
    <label for="mydatetime">Choisir une date et l'heure:</label>
    <input type="datetime-local" id="mydatetime">
</form>

Avertissement : Linput de type="datetime-local" n'est pas prise en charge par les navigateurs Firefox, Safari et Internet Explorer. Actuellement pris en charge par les navigateurs Chrome, Edge et Opera.

Type mail

Le type email permet à l'utilisateur d'entrer une adresse e-mail. Il est très similaire à un type de saisie de texte standard, mais s'il est utilisé en combinaison avec l'attribut required, le navigateur peut rechercher les modèles pour s'assurer qu'une adresse e-mail correctement formatée doit être saisie.

Essayons cet exemple en saisissant n'importe quelle adresse e-mail pour voir comment cela fonctionne réellement :

<form>
    <label for="monemail">Entrez votre adresse email:</label>
    <input type="email" id="monemail" required>
</form>

Conseil : Vous pouvez styliser le champ de saisie de l'e-mail pour différents états de validation, lorsqu'une valeur est saisie à l'aide de pseudo-classes :valid, :invalid ou :required  .

Remarque : La validation de l'input e-mail (c'est-à-dire type="email") est prise en charge par tous les principaux navigateurs tels que Firefox, Chrome, Safari, Opera, Internet Explorer 10 et versions ultérieures.

Type month

Le type month permet à l'utilisateur de sélectionner un mois et une année dans un calendrier déroulant.

La valeur est une chaîne au format "AAAA-MM", où AAAA est l'année à quatre chiffres et MM est le numéro du mois. Essayons un exemple pour voir comment cela fonctionne essentiellement :

<form>
    <label for="mois">Choisir le mois:</label>
    <input type="month" id="mois">
</form>

Avertissement : La saisie type="month" n'est pas prise en charge par les navigateurs Firefox, Safari et Internet Explorer. Actuellement pris en charge dans les navigateurs Chrome, Edge et Opera.

Type number

Le type number peut être utilisé pour entrer une valeur numérique. Vous pouvez également empêcher l'utilisateur de saisir uniquement des valeurs acceptables à l'aide des attributs supplémentaires min, max et step.

L'exemple suivant vous permettra d'entrer une valeur numérique entre 1 et 10.

<form>
    <label for="monnumero">Entrez un chiffre:</label>
    <input type="number" min="1" max="10" step="0.5" id="monnumero">
</form>

Remarque : La saisie numérique (c'est-à-dire type="number") est prise en charge par tous les principaux navigateurs Web tels que Firefox, Chrome, Safari, Opera, Internet Explorer 10 et versions ultérieures. Internet Explorer a cependant reconnu le nombre mais ne fournit pas de boutons d'incrémentation et de décrémentation.

Type range

Le type range peut être utilisé pour entrer une valeur numérique dans une plage spécifiée. Il fonctionne de manière très similaire au type number, mais il offre un contrôle plus simple pour entrer un nombre.

Essayons l'exemple suivant pour comprendre comment cela fonctionne :

<form>
    <label for="mynumber">Choisir un nombre:</label>
    <input type="range" min="1" max="10" step="0.5" id="mynumber">    
</form>

Remarque : L'input de plage (c'est-à-dire type="range") est prise en charge par tous les principaux navigateurs Web tels que Firefox, Chrome, Safari, Opera, Internet Explorer 10 et versions ultérieures.

Type search

Le type search peut être utilisé pour créer des champs de saisie de recherche.

Un champ de recherche se comporte généralement comme un champ de texte normal, mais dans certains navigateurs comme Chrome et Safari dès que vous commencez à taper dans le champ de recherche, une petite croix apparaît sur le côté droit du champ qui vous permet d'effacer rapidement le champ de recherche. Essayons un exemple pour voir comment cela fonctionne :

<form>
    <label for="recherche">Rechercher un tutoriel:</label>
    <input type="search" id="recherche">
</form>

Remarque : L'input de recherche (c'est-à-dire type="search") est prise en charge par tous les principaux navigateurs Web tels que Firefox, Chrome, Safari, Opera, Internet Explorer 10 et supérieur.

Type tel

Le type tel peut être utilisé pour entrer un numéro de téléphone.

Les navigateurs ne prennent pas en charge la validation d'entrée tel de manière native. Cependant, vous pouvez utiliser l'attribut placeholder pour aider les utilisateurs à entrer le format correct pour un numéro de téléphone ou spécifier une expression régulière pour valider l'entrée de l'utilisateur à l'aide de l'attribut pattern. Voyons un exemple :

<form>
    <label for="phone">Numéro de téléphone:</label>
    <input type="tel" id="phone" placeholder="xx-xxxx-xxxx" required>
</form>

Remarque : La validation de l'input tel (c'est-à-dire type="tel") n'est actuellement prise en charge par aucun navigateur car le format des numéros de téléphone varie énormément d'un pays à l'autre, mais elle reste utile. Les navigateurs mobiles affichent un clavier numérique pour le champ de saisie tel pour entrer les numéros de téléphone.

Type time

Le type time peut être utilisé pour saisir une heure (heures et minutes).

Le navigateur peut utiliser le format 12 ou 24 heures pour saisir les heures, en fonction du réglage de l'heure du système local.

<form>
    <label for="mytime">Choisir le temps:</label>
    <input type="time" id="mytime">
</form>

Avertissement : L'input type="time" n'est pas prise en charge par les navigateurs Internet Explorer et Safari. Actuellement pris en charge par les navigateurs Chrome, Firefox, Edge et Opera.

Type URL

Le type url peut être utilisé pour saisir des URL ou des adresses Web.

Vous pouvez utiliser l'attribut multiple pour saisir plusieurs URL. De plus, si l'attribut required est spécifié, le navigateur effectuera automatiquement une validation pour s'assurer que seul le texte correspondant au format standard des URL est entré dans la zone de saisie. Voyons comment cela fonctionne :

<form>
    <label for="monsite">Entrez le lien de votre site:</label>
    <input type="url" id="monsite" required>
</form>

Remarque : La validation de l'input d'URL (c'est-à-dire type="url") est prise en charge par tous les principaux navigateurs tels que Firefox, Chrome, Safari, Opera, Internet Explorer 10 et versions ultérieures.

Type week

Le type week permet à l'utilisateur de sélectionner une semaine et une année dans un calendrier déroulant.

Essayons l'exemple suivant pour comprendre comment cela fonctionne :

<form>
    <label for="semaine">Select Week:</label>
    <input type="week" id="semaine">
</form>

Avertissement : La saisie type="week" n'est pas prise en charge par les navigateurs Firefox, Safari et Internet Explorer. Actuellement pris en charge par les navigateurs Chrome, Edge et Opera.