<input>

La balise <input> est utilisée principalement pour collecter des données de l'utilisateur dans des formulaires.

Cette balise est polyvalente et permet la création de nombreux types de champs, allant des champs de texte aux boutons en passant par les cases à cocher (qu'on appelle les checkboxs).

Structure et syntaxe de la balise <input>

La balise <input> est une balise autonome, ce qui signifie qu'elle ne nécessite pas de balise de fermeture.

Voici un exemple simple :

<input type="text" name="username" placeholder="Entrez votre nom">

Dans cet exemple :

• type="text" : Définit le type de champ (ici un champ de texte) ;
• name="username" : Donne un nom au champ, qui est ensuite utilisé lors de la soumission du formulaire ;
• placeholder="Entrez votre nom" : Affiche un texte indicatif à l'intérieur du champ avant qu'il ne soit rempli.

Essayez par vous-même :

Types d’attributs

La balise <input> prend en charge une grande variété d’attributs, dont les principaux sont :

• type : Définit le type d'input. Par exemple :
  • text : Un champ de texte classique.
  • password : Un champ pour les mots de passe, masquant le texte entré.
  • email : Un champ de saisie pour les adresses e-mail.
  • number : Un champ pour les nombres.
  • checkbox : Pour une case à cocher.
  • radio : Pour un bouton radio (un bouton qui ne permet pas de sélectionner différentes valeurs simultanément).
  • file : Un champ pour envoyer un fichier.
  • submit : Un bouton pour soumettre le formulaire.
  • button : Un bouton générique sans comportement par défaut.
  • date : Pour afficher une fenêtre permettant une sélection de date.
• value : Définit la valeur par défaut du champ.
• name : Donne un identifiant qui permet de récupérer la valeur entrée par l'utilisateur.
• placeholder : Affiche un texte indicatif qui permet de mieux comprendre le type d'information attendu par cet input.
• required : Rend le champ obligatoire.
• readonly : Rend le champ non modifiable.
• disabled : Désactive le champ, empêchant toute interaction.

Exemples d’utilisation

Voici quelques exemples pratiques pour montrer la diversité de la balise <input> :

<form>
    <label for="name">Nom :</label>
    <input type="text" id="name" name="name" placeholder="Entrez votre nom" required>
    
    <label for="password">Mot de passe :</label>
    <input type="password" id="password" name="password" required>

    <label for="email">E-mail :</label>
    <input type="email" id="email" name="email">

    <label for="birthdate">Date de naissance :</label>
    <input type="date" id="birthdate" name="birthdate">

    <label>
        <input type="checkbox" name="newsletter">
        S'abonner à la newsletter
    </label>

    <input type="submit" value="Envoyer">
</form>

Différence avec la balise <button>

La balise <input> et la balise <button> sont souvent confondues, mais elles ont des différences clés :

• <input> est limitée à un texte simple ou à une valeur dans ses champs (on ne peut pas mettre une icône par exemple) ;
• <button> peut contenir du contenu complexe, comme des images, des icônes ou du HTML.

Compatibilité des navigateurs

La balise <input> est compatible avec tous les navigateurs modernes.