HTML - Attributs de formulaire

action

L'attribut action spécifie l'URL ou le script côté serveur qui traitera la soumission du formulaire. Lorsque vous soumettez le formulaire, les données sont envoyées à l'URL ou au script spécifié pour traitement. La valeur de l'attribut action peut être une URL absolue ou relative.

<form action="/submit-form.php">
  <!-- éléments du formulaire -->
</form>

Lorsque vous soumettez le formulaire, les données seront envoyées au script "/submit-form.php" sur le serveur pour traitement.

method

L'attribut method définit la méthode HTTP utilisée pour la soumission du formulaire. Les deux valeurs les plus courantes sont GET et POST.

<form action="/submit-form.php" method="POST">
  <!-- éléments du formulaire -->
</form>

Les données du formulaire seront envoyées en utilisant la méthode POST lorsque vous soumettrez le formulaire.

target

L'attribut target spécifie où afficher la réponse après la soumission du formulaire. Il détermine la fenêtre ou le cadre cible où la réponse du serveur sera chargée. Les valeurs possibles sont :

<form action="/submit-form.php" target="_blank">
  <!-- éléments du formulaire -->
</form>

Lorsque vous soumettez le formulaire, la réponse du serveur sera ouverte dans une nouvelle fenêtre ou un nouvel onglet.

enctype

L'attribut enctype spécifie le type d'encodage pour les données du formulaire lors de l'utilisation de la méthode POST. Il est utilisé pour indiquer comment les données du formulaire doivent être encodées avant d'être envoyées au serveur. Les valeurs courantes sont :

<form action="/submit-form.php" method="POST" enctype="multipart/form-data">
  <!-- éléments du formulaire -->
</form>

Les données du formulaire seront encodées en utilisant le type d'encodage "multipart/form-data", permettant l'inclusion de téléchargements de fichiers dans la soumission du formulaire.

required

L'attribut required indique qu'un champ de formulaire doit être rempli avant que le formulaire puisse être soumis. Lorsque vous ajoutez l'attribut required à un champ de saisie, le navigateur vérifiera si le champ a une valeur avant d'autoriser la soumission du formulaire. Si le champ est vide, le navigateur affichera un message d'erreur et empêchera la soumission du formulaire.

<form>
  <label for="name">Nom :</label>
  <input type="text" id="name" name="name" required>
  <input type="submit" value="Envoyer">
</form>

Le champ "Nom" est marqué comme obligatoire. Si vous essayez de soumettre le formulaire sans saisir de valeur dans le champ "Nom", le navigateur affichera un message d'erreur et empêchera la soumission du formulaire.

min et max

Les attributs min et max définissent les valeurs minimales et maximales pour les champs de saisie numériques, tels que les types number, range et date. Ces attributs vous aident à définir des limites sur les valeurs autorisées pour ces champs.

<form>
  <label for="quantity">Quantité :</label>
  <input type="number" id="quantity" name="quantity" min="1" max="10">
  <input type="submit" value="Envoyer">
</form>

Le champ "Quantité" a une valeur minimale de 1 et une valeur maximale de 10. Si vous essayez de saisir une valeur en dehors de cette plage, le navigateur affichera un message d'erreur lors de la soumission du formulaire.

minlength et maxlength

Les attributs minlength et maxlength définissent le nombre minimum et maximum de caractères autorisés dans un champ de saisie de texte. Ces attributs vous aident à contrôler la longueur de la saisie de l'utilisateur.

<form>
  <label for="username">Nom d'utilisateur :</label>
  <input type="text" id="username" name="username" minlength="4" maxlength="10">
  <input type="submit" value="Envoyer">
</form>

Le champ "Nom d'utilisateur" doit avoir un minimum de 4 caractères et un maximum de 10 caractères. Si la valeur saisie ne répond pas à ces exigences, le navigateur affichera un message d'erreur lors de la soumission du formulaire.

pattern

L'attribut pattern définit un modèle d'expression régulière auquel la valeur saisie doit correspondre. Il vous permet de définir un format ou un modèle que la saisie de l'utilisateur doit suivre. Si la valeur saisie ne correspond pas au modèle, le navigateur affichera un message d'erreur.

<form>
  <label for="phone">Numéro de téléphone :</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
  <input type="submit" value="Envoyer">
</form>

Le champ "Numéro de téléphone" a un modèle qui exige que la saisie soit au format de trois chiffres, suivis d'un tiret, trois autres chiffres, un autre tiret, et quatre chiffres (par exemple, 123-456-7890). Si le numéro de téléphone saisi ne correspond pas à ce modèle, le navigateur affichera un message d'erreur lors de la soumission du formulaire.

autocomplete

L'attribut autocomplete indique si l'autocomplétion doit être activée ou désactivée pour un champ de formulaire. L'autocomplétion suggère des valeurs possibles basées sur les valeurs précédemment saisies pour le même champ. Par défaut, l'autocomplétion est activée pour la plupart des champs de formulaire. Cependant, vous pouvez contrôler ce comportement en utilisant l'attribut autocomplete.

Les valeurs possibles pour l'attribut autocomplete sont :

<form>
  <label for="username">Nom d'utilisateur :</label>
  <input type="text" id="username" name="username" autocomplete="off">
  <input type="submit" value="Envoyer">
</form>

Le champ "Nom d'utilisateur" a l'autocomplétion désactivée. Le navigateur ne suggérera pas de valeurs précédemment saisies pour ce champ.

readonly

L'attribut readonly indique qu'un champ de formulaire est en lecture seule et ne peut pas être modifié par l'utilisateur. Lorsque vous ajoutez l'attribut readonly à un champ de saisie, l'utilisateur peut toujours voir la valeur du champ mais ne peut pas la modifier. La valeur du champ sera envoyée lors de la soumission du formulaire.

<form>
  <label for="email">E-mail :</label>
  <input type="email" id="email" name="email" value="utilisateur@exemple.com" readonly>
  <input type="submit" value="Envoyer">
</form>

Le champ "E-mail" est marqué comme lecture seule. L'utilisateur ne peut pas modifier la valeur du champ, mais elle sera incluse dans la soumission du formulaire.

disabled

L'attribut disabled indique qu'un champ de formulaire est désactivé et ne peut pas être utilisé par l'utilisateur. Lorsque vous ajoutez l'attribut disabled à un champ de saisie, le champ devient grisé et non cliquable. La valeur du champ ne sera pas envoyée lors de la soumission du formulaire.

<form>
  <label for="country">Pays :</label>
  <select id="country" name="country" disabled>
    <option value="US">États-Unis</option>
    <option value="CA">Canada</option>
    <option value="UK">Royaume-Uni</option>
  </select>
  <input type="submit" value="Envoyer">
</form>

La liste déroulante "Pays" est désactivée. L'utilisateur ne peut pas sélectionner de valeur, et la valeur du champ ne sera pas incluse dans la soumission du formulaire.

L'utilisation des attributs readonly et disabled peut améliorer l'accessibilité en fournissant des indices visuels aux utilisateurs sur l'interactivité des champs de formulaire. Il est important d'utiliser ces attributs correctement en fonction des exigences spécifiques de votre formulaire.

accept-charset

L'attribut accept-charset spécifie les encodages de caractères que le serveur accepte pour la soumission du formulaire. Il indique au navigateur quels encodages de caractères le serveur peut gérer. Par défaut, les données du formulaire sont envoyées en utilisant l'encodage de caractères de la page contenant le formulaire.

<form action="/submit-form.php" accept-charset="UTF-8">
  <!-- éléments du formulaire -->
</form>

Les données du formulaire seront envoyées en utilisant l'encodage de caractères UTF-8, comme spécifié par l'attribut accept-charset. Si le serveur ne prend pas en charge l'encodage de caractères spécifié, il pourrait ne pas être en mesure de traiter correctement les données du formulaire.

Il est important de noter que l'attribut accept-charset est rarement utilisé de nos jours car la plupart des serveurs sont configurés pour gérer l'encodage de caractères de la page par défaut. Cependant, si vous devez spécifier un encodage de caractères différent pour la soumission du formulaire, vous pouvez utiliser cet attribut.

novalidate

L'attribut novalidate indique que le formulaire ne doit pas être validé lors de sa soumission. Par défaut, les formulaires HTML5 effectuent une validation côté client avant d'envoyer les données du formulaire au serveur. L'attribut novalidate contourne cette étape de validation.

<form action="/submit-form.php" novalidate>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <input type="submit" value="Envoyer">
</form>

Lorsque vous soumettez le formulaire, le navigateur n'effectuera pas de validation côté client sur les champs du formulaire. Les données du formulaire seront envoyées au serveur sans vérification de la validité des entrées.

L'attribut novalidate est utile dans les situations où vous voulez gérer la validation du formulaire uniquement côté serveur, ou lorsque vous avez votre propre logique de validation personnalisée implémentée en JavaScript.

Gardez à l'esprit que l'utilisation de l'attribut novalidate ne signifie pas que vous devez omettre complètement la validation du formulaire. Il est toujours important d'effectuer une validation côté serveur pour s'assurer que les données soumises sont valides et sûres à traiter. La validation côté client est une couche de validation supplémentaire qui aide à détecter les erreurs de saisie tôt et à économiser les ressources du serveur.

En utilisant les attributs accept-charset et novalidate de manière appropriée, vous pouvez contrôler l'encodage de caractères et le comportement de validation de vos formulaires HTML pour répondre aux besoins de votre application.