Les éléments contenus dans les pages web guident l'utilisateur lors de la consultation et l'invitent souvent à sélectionner ou à laisser des informations destinées à être collectées et traitées par la structure émettrice. En langage HTML, cette interactivité se programme grâce à la balise « input ».
Qu'est-ce que l'élément input en HTML ?
L'élément « input » en HTML est le code informatique pour introduire une zone de saisie dans un formulaire web que l'utilisateur peut remplir. La nature de cet item doit être précisée à l'aide du tag « type » pour générer un champ à remplir, soit des cases à cocher, soit des boutons.
À quoi sert input en HTML ?
Langage commun à toute page web pour créer des formulaires en ligne faciles à comprendre et à utiliser pour l'internaute, il est largement utilisé dans le cadre d'inscription, de demandes administratives, enquête et sondage, de commandes de produits et de réservation entre autres.
Il permet également de créer des pages web dynamiques pour offrir des expériences interactives en ligne, qu'il s'agisse de recueillir les commentaires des utilisateurs ou de proposer des jeux.
Les données saisies s'en trouvent de fait plus rapidement transmises, analysées et traitées par les entreprises ou services auxquels elles sont adressées.
Ce tag offre donc de nombreuses possibilités aux développeurs :
- Champs pour la saisie de texte, de nombres, de dates, de coordonnées ou de mots de passe.
- Cases à cocher.
- Menus déroulants.
- Boutons radio ou d'envoi.
- Sélection et téléchargement de fichiers ou d'images.
À noter : Input en HTML est un élément vide introduit par une seule balise ouvrante. Cela signifie qu'il ne comprend aucun contenu. Un éditeur HTML s'avère d'une aide précieuse pour coder rapidement un formulaire avec différents types d'input, sans risque d'erreur.
Quels sont les différents types d'input en HTML ?
L'input nécessite d'être complété par différents attributs qui en font l'un des éléments les plus complexes et puissants en HTML. Deux d'entre eux sont indispensables à son bon fonctionnement : type qui détermine le genre de données à saisir et name qui nomme chaque champ du formulaire web.
Toutefois, la valeur des champs à saisir peut être définie par d'autres codes : value pour donner une valeur par défaut, size pour définir la taille du champ, maxlenght pour déterminer le nombre maximal de caractères à saisir ou placeholder pour donner une indication sur le contenu du champ.
Les différents champs à saisir dans les formulaires HTML dépendent grandement de la valeur indiquée dans leur attribut. Voici une liste des différents types d'input les plus courants :
- Text
- Number
- Color
- Image
- Tel
- Date
- Time
- Datetime-local
- Checkbox
- Radio
- Range
- Submit
- File
- Password
- URL
Text
Les champs de saisie de texte sont les input les plus utilisés pour la conception de formulaires HTML. Le type d'input text désigne la valeur par défaut de l'attribut type. Il permet de créer des champs d'une seule ligne destinés à la saisie de texte.
Exemple : <input type="text" name="text">
Number
Ce type d'input sert à définir un champ pour saisir un nombre dans un formulaire web. Le plus souvent, il contient un curseur pour augmenter ou réduire la valeur ainsi que des paramètres de validation. L'utilisation de l'élément number fait apparaître un clavier numérique sur certains appareils notamment les mobiles.
Exemple : <input type="number" name="number">
Color
L'item input color permet de créer un contrôle afin de sélectionner une couleur. Un sélecteur de coloris s'affiche dans les navigateurs qui le prennent en charge.
Exemple : <input type="color" name="black">
Image
Le type d'input image correspond au bouton graphique d'envoi du formulaire. Pour cet élément, deux attributs doivent être définis :
- src avec la source de l'image.
- alt avec le texte alternatif en cas d'absence de l'image.
Exemple : <input type="image" name="image">
Cet élément input permet la saisie et la collecte d'une adresse électronique dans un formulaire HTML. Présenté sous forme d'un champ de type text, cependant il comporte des fonctionnalités telles que la validation des adresses e-mail et la modification du clavier pour les appareils disposant de claviers dynamiques.
Exemple : <input type="email" name="email">
Tel
L'élément input de type tel permet de créer un champ texte conçu pour la saisie d'un numéro de téléphone. Ce contrôle affiche un pavé numérique pour certains appareils ayant des claviers dynamiques.
Exemple : <input type="tel" name="tel"> ou <input type="phone" name="phone">
Date
Le type d'input date offre aux utilisateurs la possibilité de choisir une date composée d'un jour, d'un mois et d'une année. Des sélecteurs s'affichent pour définir le format souhaité de la date. Les éléments input de type date sont souvent utilisés pour collecter des données dans le cadre d'un événement.
Exemple : <input type="date" name="date">
Time
L'élément input de type time permet aux utilisateurs de sélectionner une heure spécifique grâce à un sélecteur affiché sous forme d'horloge. Il est également utilisé pour la récolte de données dans le cadre d'un événement.
Exemple : <input type="time" name="time">
Datetime-local
Grâce à ce type d'input, les internautes peuvent saisir à la fois une date et une heure sans fuseau horaire. Ce contrôle déclenche l'ouverture d'un sélecteur pour le choix de ces valeurs temporelles.
Exemple : <input type="datetime-local" name="eventdate">
Checkbox
L'input de type checkbox s'emploie pour créer des cases à cocher afin que les utilisateurs puissent sélectionner une ou plusieurs options. On le trouve généralement dans les formulaires comportant des choix multiples de réponses, par exemple lors de la réalisation d'une enquête.
Exemple : <input type="checkbox" name="yes">
Radio
Avec ce type d'input, les développeurs peuvent insérer des boutons radio dans un formulaire web. Ces boutons proposent aux utilisateurs de choisir une seule valeur parmi une liste d'options portant le même attribut name. Ils sont le plus souvent utilisés pour les enquêtes dans lesquelles une seule réponse peut être sélectionnée.
Exemple : <input type="radio" name="dog">
Range
L'élément input range invite à choisir un nombre ou une préférence parmi une plage de valeurs. Ce contrôle prend la forme d'une jauge horizontale avec la valeur par défaut située au milieu. Ce type d'input est utilisé avec les attributs min et max pour fixer un intervalle de valeurs autorisées, comme le niveau de volume ou la luminosité.
Exemple : <input type="range" name="rating">
Submit
Le type inputsubmit s'affiche sous forme d'un bouton pour l'envoi des données des formulaires web. Il peut également être utilisé pour déclencher des scripts côté client.
Exemple : <input type="submit" name="submit">
File
L'élément input de type file sert à créer un bouton permettant aux utilisateurs de choisir un fichier pour le télécharger dans un formulaire. Les développeurs peuvent l'utiliser avec l'attribut accept afin de déterminer les types de fichiers qui peuvent être sélectionnés.
Exemple : <input type="file" name="file">
Password
Le type d'input password définit un champ de saisie sur une seule ligne dont les caractères seront masqués. Ce contrôle affichera une alerte pour les sites non sécurisés.
Exemple : <input type="password" name="password">
URL
L'élément input de type url permet de créer un champ texte destiné à la saisie d'une adresse URL. Ce contrôle possède un système validation ainsi qu'un clavier adapté pour les appareils et navigateurs qui le prennent en charge et disposent d'un clavier dynamique.
Exemple : <input type="url" name="url">
Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez le CMS de HubSpot.
