HTML - Contrôle de formulaire

Champs de saisie

Les champs de saisie sont le type de contrôle de formulaire le plus courant. Ils permettent aux utilisateurs de saisir divers types de données, tels que du texte, des chiffres et des dates. Voici quelques champs de saisie couramment utilisés :

Cases à cocher et boutons radio

Les cases à cocher et les boutons radio sont utilisés lorsque les utilisateurs doivent sélectionner une ou plusieurs options parmi un groupe de choix.

Listes déroulantes et boîtes de sélection

Les listes déroulantes et les boîtes de sélection offrent un moyen aux utilisateurs de choisir une ou plusieurs options dans une liste prédéfinie.

Boutons

Les boutons sont utilisés pour déclencher des actions ou soumettre des formulaires.

Zones de texte

Les zones de texte sont utilisées pour saisir du texte sur plusieurs lignes.

Les attributs rows et cols peuvent être utilisés pour définir les dimensions initiales de la zone de texte. L'attribut rows définit le nombre de lignes de texte visibles, tandis que l'attribut cols définit la largeur moyenne des caractères. Les zones de texte sont redimensionnables par défaut, permettant aux utilisateurs d'ajuster la taille de la zone de saisie. Le comportement de redimensionnement peut être contrôlé à l'aide de propriétés CSS comme resize.

Éléments d'étiquette

L'élément <label> est utilisé pour créer une étiquette pour un contrôle de formulaire. Il fournit une description textuelle associée à un contrôle de formulaire spécifique, tel qu'un champ de saisie, une case à cocher ou un bouton radio. Le texte de l'étiquette vous aide à comprendre l'objectif du contrôle de formulaire et les informations que vous devez saisir ou sélectionner.

<label for="name">Nom :</label>
<input type="text" id="name" name="name">

Association des étiquettes aux contrôles de formulaire

Pour associer une étiquette à un contrôle de formulaire, vous pouvez utiliser l'attribut for de l'élément <label>. La valeur de l'attribut for doit correspondre à l'attribut id du contrôle de formulaire correspondant. Cela crée une connexion logique entre l'étiquette et le contrôle de formulaire, vous permettant de cliquer sur l'étiquette pour donner le focus au contrôle associé.

<input type="checkbox" id="terms" name="terms">
<label for="terms">J'accepte les conditions générales</label>

Importance de l'étiquetage pour l'accessibilité

L'étiquetage des contrôles de formulaire est important pour l'accessibilité. Il vous aide à comprendre l'objectif et le contexte de chaque contrôle de formulaire lors de l'utilisation de technologies d'assistance, comme les lecteurs d'écran. Lorsqu'une étiquette est correctement associée à un contrôle de formulaire, les technologies d'assistance peuvent transmettre le texte de l'étiquette, facilitant ainsi la navigation et l'interaction avec le formulaire.

En plus de l'attribut for, vous pouvez également imbriquer le contrôle de formulaire à l'intérieur de l'élément <label>. Cela associe implicitement l'étiquette au contrôle imbriqué, même sans utiliser l'attribut for. Cependant, l'utilisation de l'attribut for est toujours considérée comme une bonne pratique pour une association explicite.

<label>
  <input type="radio" name="gender" value="male"> Homme
</label>
<label>
  <input type="radio" name="gender" value="female"> Femme
</label>

En étiquetant correctement les contrôles de formulaire, vous rendez vos formulaires plus accessibles et conviviaux pour tous les utilisateurs, y compris ceux qui utilisent des technologies d'assistance.

Éléments Fieldset

L'élément <fieldset> regroupe les contrôles de formulaire liés au sein d'un formulaire. Il crée un regroupement visuel et logique des contrôles de formulaire, rendant le formulaire plus structuré et plus facile à comprendre. L'élément <fieldset> contient les contrôles regroupés et peut également inclure une légende ou une étiquette pour le groupe en utilisant l'élément <legend>.

<form>
  <fieldset>
    <legend>Informations de contact</legend>
    <label for="name">Nom :</label>
    <input type="text" id="name" name="name"><br>
    <label for="email">E-mail :</label>
    <input type="email" id="email" name="email"><br>
    <label for="phone">Téléphone :</label>
    <input type="tel" id="phone" name="phone">
  </fieldset>
</form>

Éléments Legend

L'élément <legend> fournit une légende ou une étiquette pour un <fieldset>. Il apparaît comme un en-tête dans le fieldset et décrit les contrôles de formulaire regroupés. L'élément <legend> doit être le premier enfant de l'élément <fieldset>.

<fieldset>
  <legend>Adresse de livraison</legend>
  <label for="address">Adresse :</label>
  <input type="text" id="address" name="address"><br>
  <label for="city">Ville :</label>
  <input type="text" id="city" name="city"><br>
  <label for="zip">Code postal :</label>
  <input type="text" id="zip" name="zip">
</fieldset>

Regroupement des contrôles de formulaire liés

Lors du regroupement des contrôles de formulaire à l'aide de <fieldset>, considérez la relation logique entre les contrôles. Regroupez les contrôles qui sont étroitement liés ou appartiennent à la même catégorie. Cela aide à organiser le formulaire et le rend plus facile à comprendre et à remplir pour les utilisateurs.

Voici quelques exemples courants de regroupement de contrôles de formulaire liés :

En regroupant les contrôles de formulaire liés avec <fieldset> et en fournissant des étiquettes claires avec <legend>, vous améliorez l'utilisabilité et la lisibilité de vos formulaires. Cela guide les utilisateurs à travers le formulaire et facilite la compréhension des informations requises.

N'oubliez pas d'utiliser des étiquettes appropriées pour chaque contrôle de formulaire dans le fieldset afin de maintenir l'accessibilité et l'utilisabilité.

Attribut Required

L'attribut required est utilisé pour indiquer qu'un contrôle de formulaire doit être rempli avant que le formulaire puisse être soumis. Lorsqu'un contrôle de formulaire possède l'attribut required, le navigateur empêchera la soumission du formulaire si le contrôle est laissé vide ou ne répond pas aux critères de validation spécifiés.

<label for="name">Nom :</label>
<input type="text" id="name" name="name" required>

Attribut Disabled

L'attribut disabled est utilisé pour désactiver un contrôle de formulaire, le rendant non interactif et non modifiable. Les contrôles de formulaire désactivés sont généralement grisés et ne peuvent pas être sélectionnés, cliqués ou modifiés par l'utilisateur.

<label for="username">Nom d'utilisateur :</label>
<input type="text" id="username" name="username" disabled>

Les contrôles de formulaire désactivés ne sont pas soumis dans le cadre des données du formulaire lors de son envoi. Ils sont ignorés lors du traitement du formulaire.

Attribut Readonly

L'attribut readonly est utilisé pour rendre un contrôle de formulaire en lecture seule, ce qui signifie que vous pouvez voir sa valeur mais ne pouvez pas la modifier. Les contrôles de formulaire en lecture seule peuvent toujours être sélectionnés et inclus dans la soumission du formulaire.

<label for="email">Email :</label>
<input type="email" id="email" name="email" value="utilisateur@exemple.com" readonly>

Les contrôles de formulaire en lecture seule sont utiles lorsque vous souhaitez afficher des valeurs pré-remplies ou calculées qui ne doivent pas être modifiées par l'utilisateur.

Attribut Placeholder

L'attribut placeholder est utilisé pour fournir un texte d'indication ou d'exemple à l'intérieur d'un contrôle de formulaire lorsqu'il est vide. Le texte de l'espace réservé disparaît lorsque vous commencez à taper ou lorsque le contrôle de formulaire reçoit le focus.

<label for="search">Recherche :</label>
<input type="text" id="search" name="search" placeholder="Entrez un terme de recherche...">

Les espaces réservés doivent être utilisés comme une indication supplémentaire et ne doivent pas remplacer l'étiquetage approprié des contrôles de formulaire. Ils sont utiles pour fournir des conseils ou des exemples supplémentaires, mais ne doivent pas être considérés comme le seul moyen de communiquer l'objectif d'un contrôle de formulaire.

Appliquer du CSS aux contrôles de formulaire

Pour appliquer des styles CSS aux contrôles de formulaire, vous pouvez utiliser des sélecteurs CSS pour cibler des éléments de formulaire spécifiques. Vous pouvez sélectionner les contrôles de formulaire en fonction de leur type, classe, ID ou d'autres attributs. Voici quelques exemples de sélecteurs CSS pour les contrôles de formulaire :

/* Sélectionner tous les éléments input */
input {
  /* Styles CSS */
}

/* Sélectionner un type d'input spécifique */
input[type="text"] {
  /* Styles CSS */
}

/* Sélectionner un contrôle de formulaire avec une classe spécifique */
.form-control {
  /* Styles CSS */
}

/* Sélectionner un contrôle de formulaire avec un ID spécifique */
#username {
  /* Styles CSS */
}

Une fois que vous avez sélectionné les contrôles de formulaire, vous pouvez appliquer diverses propriétés CSS pour les styliser. Voici quelques propriétés CSS couramment utilisées pour styliser les contrôles de formulaire :

input[type="text"] {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

Pseudo-classes pour les états des contrôles de formulaire

CSS fournit des pseudo-classes qui vous permettent de styliser les contrôles de formulaire en fonction de leurs états. Les pseudo-classes sont des mots-clés ajoutés aux sélecteurs pour spécifier un état particulier d'un élément. Voici quelques pseudo-classes couramment utilisées pour les contrôles de formulaire :

input[type="text"]:focus {
  outline: none;
  border-color: blue;
}

input[type="email"]:valid {
  border-color: green;
}

input[type="number"]:invalid {
  border-color: red;
}

input[type="text"]:disabled {
  background-color: #eee;
  cursor: not-allowed;
}

Personnaliser l'apparence des contrôles de formulaire

CSS vous permet de modifier l'apparence des contrôles de formulaire au-delà des styles par défaut du navigateur. Vous pouvez utiliser des propriétés et des techniques CSS pour créer des contrôles de formulaire visuellement attrayants et uniques qui correspondent au design de votre site web.

input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  transition: background-color 0.3s;
}

input[type="checkbox"]:checked {
  background-color: #007bff;
  border-color: #007bff;
}

select {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  appearance: none;
  background-image: url("arrow-down.svg");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

select:focus {
  outline: none;
  border-color: blue;
}