HTML
Éléments de contrôle d'entrée

Introduction

Syntaxe

• <input type="" name="" value="">

Paramètres

Remarques

Case à cocher et boutons radio

Vue d'ensemble

Les cases à cocher et les boutons radio sont écrits avec la balise HTML <input> et leur comportement est défini dans la spécification HTML .

La case à cocher ou le bouton radio le plus simple est un élément <input> avec un attribut de type respectivement checkbox ou radio :

<input type="checkbox">
<input type="radio">

Un seul élément de case à cocher autonome est utilisé pour une seule option binaire telle qu'une question oui ou non. Les cases à cocher sont indépendantes, ce qui signifie que l'utilisateur peut sélectionner autant de choix qu'il le souhaite dans un groupe de cases à cocher. En d'autres termes, cocher une case ne désélectionne pas les autres cases à cocher du groupe de cases à cocher.

Les boutons radio viennent généralement en groupes (si elle n'est pas groupée avec un autre bouton radio, vous vouliez probablement utiliser une case à cocher) identifiée en utilisant le même attribut de name sur tous les boutons de ce groupe. La sélection des boutons radio est mutuellement exclusive , ce qui signifie que l'utilisateur ne peut sélectionner qu'un seul choix parmi un groupe de boutons radio. Lorsqu'un bouton radio est coché, tout autre bouton radio portant le même name que précédemment coché devient décoché.

Exemple:

<input type="radio" name="color" id="red" value="#F00">
<input type="radio" name="color" id="green" value="#0F0">
<input type="radio" name="color" id="blue" value="#00F">

Lorsqu'ils sont affichés, les boutons radio apparaissent sous la forme d'un cercle (non coché) ou d'un cercle rempli (coché). Les cases à cocher apparaissent sous la forme d’un carré (non coché) ou d’un carré rempli (coché). Selon le navigateur et le système d'exploitation, le carré a parfois des coins arrondis.

Les attributs

Les cases à cocher et les boutons radio ont plusieurs attributs pour contrôler leur comportement:

value

Comme tout autre élément d'entrée, l'attribut value spécifie la valeur de chaîne à associer au bouton en cas de soumission de formulaire. Cependant, les cases à cocher et des boutons radio sont spéciaux en ce que lorsque la valeur est omis, par défaut on lorsqu'il est soumis, plutôt que d' envoyer une valeur vide. L'attribut de value n'est pas reflété dans l'apparence du bouton.

checked

L'attribut checked spécifie l'état initial d'une case à cocher ou d'un bouton radio. Ceci est un attribut booléen et peut être omis.

Chacune de ces méthodes est valide et équivalente pour définir un bouton radio vérifié:

<input checked>
<input checked="">
<input checked="checked">
<input checked="ChEcKeD">

L'absence de l'attribut checked est la seule syntaxe valide pour un bouton non checked :

<input type="radio">
<input type="checkbox">

Lors de la réinitialisation d'un <form> , les cases à cocher et les boutons radio reviennent à l'état de leur attribut checked .

Accessibilité

Étiquettes

Pour donner un contexte aux boutons et montrer aux utilisateurs à quoi sert chaque bouton, chacun d’eux doit avoir une étiquette. Cela peut être fait en utilisant un élément <label> pour envelopper le bouton. De plus, cela permet de cliquer sur l'étiquette, de sorte que vous sélectionnez le bouton correspondant.

Exemple:

<label>
  <input type="radio" name="color" value="#F00">
  Red
</label>

ou avec un élément <label> avec un attribut for défini sur l'attribut id du bouton:

<input type="checkbox" name="color" value="#F00" id="red">
<label for="red">Red</label>

Groupes de boutons

Étant donné que chaque bouton radio affecte les autres dans le groupe, il est courant de fournir une étiquette ou un contexte pour l'ensemble du groupe de boutons radio.

Pour fournir une étiquette pour le groupe entier, les boutons radio doivent être inclus dans un élément <fieldset> avec un élément <legend> .

Exemple:

<fieldset>
  <legend>Theme color:</legend>
  <p>
    <input type="radio" name="color" id="red" value="#F00">
    <label for="red">Red</label>
  </p>
  <p>
    <input type="radio" name="color" id="green" value="#0F0">
    <label for="green">Green</label>
  </p>
  <p>
    <input type="radio" name="color" id="blue" value="#00F">
    <label for="blue">Blue</label>
  </p>
</fieldset>

Les cases à cocher peuvent également être regroupées de manière similaire, avec un champ et une légende identifiant le groupe de cases à cocher correspondantes. Cependant, gardez à l'esprit que les cases à cocher ne doivent pas partager le même nom car elles ne s'excluent pas mutuellement. Si cela se produit, le formulaire soumet plusieurs valeurs pour la même clé et tous les langages côté serveur ne gèrent pas cela de la même manière (comportement non défini). Chaque case à cocher doit avoir un nom unique ou utiliser un ensemble de crochets ( [] ) pour indiquer que le formulaire doit soumettre un tableau de valeurs pour cette clé. La méthode que vous choisissez doit dépendre de la manière dont vous prévoyez de gérer les données de formulaire côté client ou côté serveur. Vous devez également garder la légende courte, car certaines combinaisons de navigateurs et de lecteurs d'écran lisent la légende avant chaque champ de saisie dans le jeu de champs.

Caché

<input type="hidden" name="inputName" value="inputValue">  

Une entrée masquée ne sera pas visible pour l'utilisateur, mais sa valeur sera envoyée au serveur lorsque le formulaire est néanmoins soumis.

Mot de passe

<input type="password" name="password">

L'élément input avec un attribut type dont la valeur est password crée un champ de texte à une seule ligne similaire au type=text entrée type=text , sauf que le texte n'est pas affiché lorsque l'utilisateur le saisit.

<input type="password" name="password" placeholder="Password">

Le texte d’espace réservé est affiché en texte brut et est automatiquement remplacé lorsqu'un utilisateur commence à taper.

Remarque: Certains navigateurs et systèmes modifient le comportement par défaut du champ de mot de passe pour afficher également le dernier caractère saisi pendant une courte durée, comme ceci:

Soumettre

<input type="submit" value="Submit">

Une entrée de soumission crée un bouton qui soumet le formulaire dans lequel il se trouve lorsqu'il est cliqué.

Vous pouvez également utiliser l'élément <button> si vous avez besoin d'un bouton de soumission qui peut être plus facilement stylé ou contenir d'autres éléments:

<button type="submit">
  <img src="submit-icon.jpg" /> Submit
</button>

Fichier

<input type="file" name="fileSubmission">

Les entrées de fichier permettent aux utilisateurs de sélectionner un fichier dans leur système de fichiers local pour l'utiliser avec la page en cours. S'ils sont utilisés avec un élément de form , ils peuvent être utilisés pour permettre aux utilisateurs de télécharger des fichiers sur un serveur (pour plus d'informations, voir Téléchargement de fichiers ).

L'exemple suivant permet aux utilisateurs d'utiliser l'entrée de file pour sélectionner un fichier dans leur système de fichiers et télécharger ce fichier sur un script sur le serveur nommé upload_file.php .

<form action="upload_file.php" method="post" enctype="multipart/form-data">
    Select file to upload:
    <input type="file" name="fileSubmission" id="fileSubmission">
    <input type="submit" value="Upload your file" name="submit">
</form>

Plusieurs fichiers

L'ajout de l'attribut multiple permettra à l'utilisateur de sélectionner plusieurs fichiers:

<input type="file" name="fileSubmission" id="fileSubmission" multiple>

Accepter les fichiers

L'attribut d'acceptation spécifie les types de fichiers que l'utilisateur peut sélectionner. Par exemple, .png , .gif , .jpeg .

<input type="file" name="fileSubmission" accept="image/x-png,image/gif,image/jpeg" />

Validation des entrées

La validation des entrées HTML est effectuée automatiquement par le navigateur en fonction des attributs spéciaux de l'élément d'entrée. Il pourrait remplacer partiellement ou complètement la validation des entrées JavaScript. Ce type de validation peut être contourné par l'utilisateur via des requêtes HTTP spécialement conçues pour ne pas remplacer la validation des entrées côté serveur. La validation ne se produit que lorsque vous tentez de soumettre le formulaire. Par conséquent, toutes les entrées restreintes doivent se trouver dans un formulaire pour que la validation ait lieu (sauf si vous utilisez JavaScript). Gardez à l'esprit que les entrées désactivées ou en lecture seule ne déclencheront pas de validation.

Certains nouveaux types de saisie (tels que la email , l' url , le tel , la date et bien d'autres) sont automatiquement validés et ne nécessitent pas vos propres contraintes de validation.

<input required>

Longueur minimum / maximum

Utilisez les minlength et maxlength pour indiquer les exigences de longueur. La plupart des navigateurs empêcher l'utilisateur de taper plus de caractères max dans la boîte, les empêchant de faire leur entrée invalide même avant de tenter la soumission.

<input minlength="3">
<input maxlength="15">
<input minlength="3" maxlength="15">

Spécifier une plage

Utiliser les attributs min et max pour restreindre la plage de nombres qu'un utilisateur peut saisir dans une entrée de type number ou range

Marks: <input type="number" size="6" name="marks" min="0" max="100" />
Subject Feedback: <input type="range" size="2" name="feedback" min="1" max="5" />

<input pattern="\d*" title="Numbers only, please.">

<input type="file" accept="image/*" title="Only images are allowed">

<input type="file" accept="image/*,.rar,application/zip">

Remarque: L' novalidate attribut novalidate à l'élément de form ou à l'attribut formnovalidate au bouton d' formnovalidate empêche la validation sur les éléments de formulaire. Par exemple:

<form>
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <input pattern="\d*" name="number" required>

    <input type="submit" value="Publish"> <!-- form will be validated -->
    <input type="submit" value="Save" formnovalidate> <!-- form will NOT be validated -->
</form>

Le formulaire comporte des champs requis pour "publier" le brouillon mais n'est pas requis pour "enregistrer" le brouillon.

Réinitialiser

<input type="reset" value="Reset">

Une entrée de type reset crée un bouton qui, une fois cliqué, réinitialise toutes les entrées sous sa forme d'origine.

• Le texte d'un champ de saisie sera réinitialisé ou sa valeur par défaut (spécifiée à l'aide de l'attribut value ).
• Toute option dans un menu de sélection sera désélectionnée sauf si elle possède l'attribut selected .
• Toutes les cases à cocher et les cases radio seront désélectionnées, sauf si elles possèdent l'attribut checked .

Remarque: Un bouton de réinitialisation doit être situé à l'intérieur ou attaché (via l'attribut de form ) à un élément <form> pour avoir un effet. Le bouton ne réinitialisera que les éléments de ce formulaire.

Nombre

<input type="number" value="0" name="quantity">

Tel

<input type="tel" value="+8400000000">

L'élément input avec un attribut type dont la valeur est tel représente un contrôle d'édition de texte en clair sur une ligne pour la saisie d'un numéro de téléphone.

Email

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

Bouton

<input type="button" value="Button Text">

Les boutons peuvent être utilisés pour déclencher des actions sur la page sans soumettre le formulaire. Vous pouvez également utiliser l'élément <button> si vous avez besoin d'un bouton pouvant être plus facilement stylé ou contenant d'autres éléments:

<button type="button">Button Text</button>

Les boutons sont généralement utilisés avec un événement "onclick":

<input type="button" onclick="alert('hello world!')" value="Click Me">

ou

<button type="button" onclick="alert('hello world!')">Click Me</button>

Les attributs

[name]

Le name du bouton, qui est soumis avec les données du formulaire.

[type]

Le type du bouton.

Les valeurs possibles sont:

submit : le bouton envoie les données du formulaire au serveur. C'est la valeur par défaut si l'attribut n'est pas spécifié ou si l'attribut est modifié dynamiquement en une valeur vide ou non valide.

reset : le bouton réinitialise toutes les commandes à leurs valeurs initiales.

button : le bouton n'a pas de comportement par défaut. Des scripts côté client peuvent être associés aux événements de l'élément, qui sont déclenchés lorsque les événements se produisent.

menu : Le bouton ouvre un menu contextuel défini via son élément désigné.

[value]

La valeur initiale du bouton.

Couleur

<input type="color" name="favcolor" value="#ff0000">

URL

<input type="url" name="Homepage">

Rendez-vous amoureux

<input type="date" />

DateTime-Local

<input type="datetime-local" />

Image

<input type="image" src="img.png" alt="image_name" height="50px" width="50px"/>

Une image. Vous devez utiliser l'attribut src pour définir la source de l'image et l'attribut alt pour définir un autre texte. Vous pouvez utiliser les attributs height et width pour définir la taille de l'image en pixels.

Gamme

<input type="range" min="" max="" step="" />

Mois

<input type="month" />

Temps

<input type="time" />

19:04:39
08:20:39.04

La semaine

<input type="week" />

Texte

Le type d'entrée le plus basique et l'entrée par défaut si aucun type n'est spécifié. Ce type d'entrée définit un champ de texte à une seule ligne avec des sauts de ligne automatiquement supprimés de la valeur d'entrée. Tous les autres caractères peuvent être entrés dans ceci. <input> éléments <input> sont utilisés dans un élément <form> pour déclarer des contrôles d'entrée permettant aux utilisateurs d'entrer des données.

Syntaxe

<input type="text">

ou (sans spécifier de type , en utilisant l'attribut default):

<input>

La largeur par défaut d'une entrée de champ de texte est de 20 caractères. Cela peut être modifié en spécifiant une valeur pour l'attribut size comme ceci:

<input type="text" size="50">

L'attribut size est nettement différent de la définition d'une largeur avec CSS. L'utilisation d'une largeur définit une valeur spécifique (en nombre de pixels, en pourcentage de l'élément parent, etc.) selon laquelle l'entrée doit toujours être large. L'utilisation de la size calcule la largeur à allouer en fonction de la police utilisée et de la largeur des caractères.

Remarque: L' utilisation de l'attribut size ne limite pas intrinsèquement le nombre de caractères pouvant être saisis dans la boîte, mais uniquement la largeur d'affichage de la boîte. Pour limiter la longueur, voir Validation en entrée .

Un champ de saisie n'autorise qu'une ligne de texte. Si vous avez besoin d'une entrée de texte multiligne pour une quantité substantielle de texte, utilisez plutôt un élément <textarea> .

Chercher

<input type="search" name="googlesearch">

DateTime (Global)

L'élément input avec un attribut type dont la valeur est " datetime " représente un contrôle permettant de définir la valeur de l'élément sur une chaîne représentant une date et une heure globales (avec des informations de fuseau horaire).

<fieldset>
   <p><label>Meeting time: <input type=datetime name="meeting.start"></label>
</fieldset>

Attributs autorisés:

• attributs globaux
• prénom
• désactivée
• forme
• type
• autocomplete
• autofocus
• liste
• min max
• step (float)
• lecture seulement
• valeur requise