HTML Formulaire et saisie

Le formulaire HTML collecte les informations saisies par l'utilisateur

Le formulaire HTML représente une zone du document, contenant des contrôles interactifs, et envoie les informations utilisateur collectées au serveur web.

Le formulaire HTML contient généralement divers champs de saisie, cases à cocher, boutons radio et listes déroulantes.

Voici un exemple de formulaire HTML simple :

  • <form>L'élément est utilisé pour créer un formulaire,actionL'attribut définit l'URL de la cible pour la soumission des données du formulaire,methodL'attribut définit la méthode HTTP (ici en utilisant "post") pour soumettre les données.
  • <label>L'élément est utilisé pour ajouter des étiquettes aux éléments de formulaire, améliorant l'accessibilité.
  • <input>L'élément est l'un des éléments de formulaire les plus couramment utilisés, capable de créer des champs de saisie de texte, des champs de mot de passe, des boutons radio et des cases à cocher.typeL'attribut définit le type de champ de saisie,idL'attribut est utilisé pour associer<label>L'élément,nameL'attribut est utilisé pour identifier le champ de formulaire.
  • <select>L'élément est utilisé pour créer une liste déroulante,<option>L'élément est utilisé pour définir les options dans la liste déroulante.

Exemple

<form action="/" method="post">
    <!-- Champ de saisie de texte -->
    <label for="name">Nom d'utilisateur :</label>
    <input type="text" id="name" name="name" required>

    <br>

    <!-- Champ de saisie du mot de passe -->
    <label for="password">Mot de passe :</label>
    <input type="password" id="password" name="password" required>

    <br>

    <!-- Bouton radio -->
    <label>Genre :</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">Masculin</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Féminin</label>

    <br>

    <!-- Case à cocher -->
    <input type="checkbox" id="subscribe" name="subscribe" checked>
    <label for="subscribe">S'abonner aux notifications push</label>

    <br>

    <!-- Liste déroulante -->
    <label for="country">Pays :</label>
    <select id="country" name="country">
        <option value="cn">CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>

    <br>

    <!-- Bouton d'envoi -->
    <input type="submit" value="Submit">
</forme>

Essayez-le »
Examples

Exemple en ligne

Exemple

Voici un exemple de formulaire qui contient deux champs de saisie :

<form action="">
Prénom : <input type="text" name="firstname"><br>
Nom : <input type="text" name="lastname">
</forme>

Essayez-le »

Exemple

Voici un exemple de formulaire qui contient un champ de saisie normal et un champ de saisie de mot de passe :

<form action="">
Nom d'utilisateur : <input type="text" name="user"><br>
Mot de passe : <input type="password" name="password">
</forme>

Essayez-le »

(Vous pouvez trouver plus d'exemples en bas de cette page.)

Formulaire HTML

Un formulaire est une zone contenant des éléments de formulaire.

Les éléments de formulaire sont des éléments qui permettent aux utilisateurs de saisir du contenu, tels que les champs de texte (textarea), les listes déroulantes (select), les boutons radio (radio-buttons) et les cases à cocher (checkbox).

Nous pouvons utiliser<form>balise pour créer un formulaire :

Exemple

<forme>
.
Élément input
.
</forme>

Formulaire HTML - Éléments input

Les balises de formulaire les plus couramment utilisées sont les balises input<input>。

Le type d’entrée est défini par l’attributtype.

Nous allons présenter plusieurs types d’entrée couramment utilisés.

Champ de texte (Champs de texte)

Le champ de texte est défini par la balise<input type="text">; lorsque les utilisateurs doivent saisir des lettres, des chiffres, etc., ils utilisent le champ de texte.

Exemple

<forme>
Prénom : <input type="text" name="firstname"><br>
Nom : <input type="text" name="lastname">
</forme>

Le navigateur affiche comme suit :

Prénom :
Nom de famille :

Remarque :Le formulaire lui-même n’est pas visible. Dans la plupart des navigateurs, la largeur par défaut du champ de texte est de 20 caractères.

Champ de mot de passe

Le champ de mot de passe est défini par la balise<input type="password">:

Exemple

<forme>
Mot de passe : <input type="password" name="pwd">
</forme>

Le navigateur affiche comme suit :

Mot de passe :

Remarque :Les caractères du champ de mot de passe ne seront pas affichés en texte brut, mais seront remplacés par des astérisques ou des points.*Bouton radio (Boutons radio).La balise définit les options pour les boutons radio :

Bouton radio (Boutons radio)

<input type="radio">Le navigateur affiche comme suit :

Exemple

<form action="">
<input type="radio" name="sex" value="male">Homme<br>
<input type="radio" name="sex" value="female">Femme
</forme>

Définissez les cases à cocher.

Male
Female

Case à cocher (Cases à cocher)

<input type="checkbox">Le navigateur affiche comme suit :

Case à cocher (Cases à cocher)

Exemple

<forme>
<input type="checkbox" name="vehicle[]" value="Bike">J'aime les vélos<br>
<input type="checkbox" name="vehicle[]" value="Car">J'aime les petites voitures
</forme>

Le navigateur affiche comme suit :

J'aime les vélos
J'aime les petites voitures

Bouton d'envoi (Submit)

<input type="submit">Définit le bouton d'envoi.

Lorsque l'utilisateur clique sur le bouton de confirmation, le contenu du formulaire sera envoyé au serveur. L'attribut action du formulaireactionDéfinit le nom du fichier sur le serveur.

actionsera traité sur les données de saisie utilisateur reçues :

Exemple

<form name="input" action="html_form_action.php" method="get">
Nom d'utilisateur : <input type="text" name="user">
<input type="submit" value="Submit">
</forme>

Le navigateur affiche comme suit :

Nom d'utilisateur :

Si vous saisissez plusieurs lettres dans le champ de texte ci-dessus et cliquez sur le bouton de confirmation, les données saisies seront envoyées au fichierhtml_form_action.php, et la page affichera les résultats de la saisie.

Dans l'exemple ci-dessus, il y a un attribut method, qui est utilisé pour définir la méthode de soumission des données du formulaire, et qui peut être l'une des valeurs suivantes :

  • post: méthode HTTP POST, les données du formulaire seront incluses dans le corps du formulaire et envoyées au serveur, utilisées pour soumettre des données sensibles, telles qu'un nom d'utilisateur et un mot de passe.

  • get: Valeur par défaut, méthode HTTP GET, les données du formulaire seront ajoutées à l'URL de l'attributaction, et séparées par?, généralement utilisées pour des informations non sensibles, telles que la pagination, etc. Par exemple : https://www.example.com/?page=1, le numéro de page "1" est la donnée soumise par la méthode get.

Exemple

<!-- Ci-dessous se trouve un formulaire qui utilise une requête GET pour envoyer des données à l'URL actuelle, la méthode par défaut est GET. -->
<forme>
  <label>Nom :
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Enregistrer</button>
</forme>

<!-- Ci-dessous se trouve un formulaire qui utilise une requête POST pour envoyer des données à l'URL actuelle. -->
<form method="post">
  <label>Nom :
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Enregistrer</button>
</forme>

<!-- Le formulaire utilise les balises fieldset, legend et label -->
<form method="post">
  <fieldset>
    <legend>Titre</legend>
    <label><input type="radio" name="radio"> Sélectionnez-moi</label>
  </fieldset>
</forme>

Try itPlus d’exemples

Bouton radio (Boutons radio)
Cet exemple montre comment créer des boutons radio en HTML.

Case à cocher (Cases à cocher)
Cet exemple montre comment créer des cases à cocher dans une page HTML. Les utilisateurs peuvent sélectionner ou désélectionner des cases à cocher.

Liste déroulante simple
Cet exemple montre comment créer une liste déroulante simple. La liste déroulante est une liste optionnelle.

Liste déroulante simple avec valeurs présélectionnées
Cet exemple montre comment créer une liste déroulante simple avec des valeurs présélectionnées.

Zone de texte (Textarea)
Cet exemple montre comment créer une zone de texte (contrôle de saisie multiligne). Les utilisateurs peuvent écrire du texte dans la zone de texte. Le nombre de caractères pouvant être écrits n'est pas limité.

Créer un bouton
Cet exemple montre comment créer un bouton. Vous pouvez personnaliser le texte sur le bouton.

Try itExemple de formulaire

Formulaire avec bordures
Cet exemple montre comment dessiner un formulaire autour des données avec un titre.

Formulaire avec champs de saisie et bouton de confirmation
Cet exemple montre comment ajouter un formulaire à la page. Ce formulaire contient deux champs de saisie et un bouton de confirmation.

Formulaire avec cases à cocher
Ce formulaire contient deux cases à cocher et un bouton de confirmation.

Formulaire avec boutons radio
Ce formulaire contient deux boutons radio et un bouton de confirmation.

Envoyer un e-mail à partir d'un formulaire
Cet exemple montre comment envoyer un e-mail à partir d'un formulaire.

Étiquette de formulaire HTML

Nouveau: nouvelles balises HTML5

Balise Description
<form> Définit le formulaire où les utilisateurs peuvent saisir des données
<input> Définit le champ de saisie
<textarea> Définit le champ de texte (un contrôle de saisie multiligne)
<label> Définit la balise de l'élément <input>, généralement le titre de la saisie
<fieldset> Définit un groupe d'éléments de formulaire liés et les entoure d'un cadre extérieur
<legend> Définit le titre de l'élément <fieldset>
<select> Définit les options de la liste déroulante
<optgroup> Définit le groupe d'options
<option> Définit les options de la liste déroulante
<button> Définit un bouton cliquable
<datalist>Nouveau Spécifie une liste d'options prédéfinies pour un contrôle de saisie
<keygen>Nouveau Définit le champ du générateur de clé pour le formulaire
<output>Nouveau Définit un résultat de calcul
Autres extensions