L’élément HTML <input> permet de créer divers contrôles de formulaire pour la collecte de données utilisateur. Il est possible de personnaliser le comportement et l’apparence de ces contrôles à l’aide de différents attributs. Voici quelques attributs couramment utilisés :

value

L’attribut value sert à définir la valeur initiale de l’élément <input>. La valeur spécifique dépend du type d’entrée :

• Pour les boutons ( type="button" , type="reset" , type="submit" ), il définit le texte affiché sur le bouton ;

• Pour les champs de texte ( type="text" ) et de mot de passe ( type="password" ), il définit la valeur par défaut du champ ;

• Pour les cases à cocher ( type="checkbox" ) et les boutons radio ( type="radio" ), il définit la valeur associée à l’entrée.

Remarque

L’attribut value ne peut pas être utilisé avec <input type="file">.

autofocus

L'attribut autofocus spécifie que le champ de saisie doit automatiquement recevoir le focus lorsque la page web est chargée. À l'ouverture de la page, le champ de saisie sera sélectionné automatiquement, permettant à l'utilisateur de commencer à taper sans avoir à cliquer d'abord sur le champ.

Remarque

L'attribut autofocus ne fonctionne pas ici car la page ne se recharge pas lorsque vous cliquez sur le bouton "Run Code".

required

L'attribut required est utilisé pour rendre un champ de saisie obligatoire. Il indique que le champ doit être rempli avant que l'utilisateur puisse soumettre le formulaire. Si l'utilisateur tente de soumettre le formulaire sans remplir le champ obligatoire, un message d'erreur de validation s'affichera pour indiquer que le champ est requis.

placeholder

L'attribut placeholder fournit une indication ou un exemple de la valeur attendue à l'utilisateur. Un court texte s'affiche à l'intérieur du champ de saisie avant que l'utilisateur n'entre une valeur. Ceci est utile pour les champs nécessitant un format spécifique, comme les numéros de téléphone ou de carte de crédit.

Remarque

Dans les exemples ci-dessus, différents attributs type pour les éléments <input> sont utilisés, ce qui influence considérablement leur apparence et leur fonctionnalité. Vous explorerez plus en détail les différents types d’input dans le prochain chapitre.