Balises liées aux formulaires

Cet article explique les balises liées aux formulaires.

Cela explique divers champs de formulaire tels que les entrées de texte et les menus déroulants.

YouTube Video

Balises liées aux formulaires

Balise <form>

1<form action="/submit" method="post">...</form>

• La balise <form> est utilisée pour définir l'ensemble du formulaire.
• L'attribut action spécifie la destination, et l'attribut method spécifie la méthode (GET ou POST).
• Vous pouvez également spécifier l'attribut target, similaire à la balise <a>.

Balise <input> (champ de saisie de texte)

1<input type="text" name="username" placeholder="Enter your username">

• <input type="text"> crée un champ de saisie de texte sur une seule ligne. Les utilisateurs peuvent entrer n'importe quel texte.

• L'attribut placeholder spécifie un texte descriptif qui apparaît lorsque le champ de saisie est vide. Cela aide les utilisateurs à comprendre facilement la saisie attendue. Ce texte disparaît automatiquement lorsque la saisie commence.

  • placeholder convient pour fournir des informations complémentaires et n'est pas adapté pour des instructions importantes comme les saisies obligatoires. Dans de tels cas, vous devez utiliser une étiquette.

Balise <input> (champ de saisie de mot de passe)

1<input type="password" name="password" placeholder="Type your password here">

• <input type="password"> crée un champ pour la saisie de mot de passe. Les caractères saisis sont cachés et masqués pour garantir la sécurité.

Balise <input> (champ de saisie d'adresse e-mail)

1<input type="email" name="email" placeholder="Enter your email">

• <input type="email"> crée un champ pour entrer une adresse email et inclut une validation pour garantir le format correct de l'email.

Balise <input> (case à cocher)

1<input type="checkbox" name="subscribe"> Subscribe to newsletter

• <input type="checkbox"> crée une case à cocher. Lorsque plusieurs options sont disponibles, les utilisateurs peuvent sélectionner plusieurs éléments.

Balise <input> (bouton radio)

1<input type="radio" name="gender" value="male"> Male<br>
2<input type="radio" name="gender" value="female"> Female

• <input type="radio"> crée un bouton radio qui permet aux utilisateurs de sélectionner une seule option parmi un ensemble.

Balise <input> (bouton de soumission)

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

• <input type="submit"> crée un bouton pour soumettre les données du formulaire.
• La valeur de l'attribut value est incluse dans les données du formulaire lors de la soumission.

Balise <input> (bouton de réinitialisation)

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

• <input type="reset"> crée un bouton qui réinitialise toutes les valeurs saisies dans le formulaire.

Balise <input> (champ caché)

1<input type="hidden" name="userid" value="12345">

• <input type="hidden"> crée un champ caché qui n'est pas affiché à l'écran et est utilisé pour envoyer des données au backend lors de la soumission du formulaire.

Balise <input> (sélecteur de couleur)

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

• <input type="color"> affiche un sélecteur de couleur et crée un champ de saisie pour que les utilisateurs sélectionnent une couleur.

Balise <input> (champ de saisie de date)

1<input type="date" name="birthday">

• <input type="date"> crée un champ de saisie de date qui affiche un calendrier pour sélectionner une date.

Balise <input> (champ de saisie de l'heure)

1<input type="time" name="appointment_time">

• <input type="time"> crée un champ pour entrer l'heure, et un sélecteur d'heure est affiché.

Balise <input> (champ de fichier)

1<input type="file" name="resume">

• <input type="file"> crée un champ de saisie pour que les utilisateurs sélectionnent et téléchargent des fichiers.
• L'attribut enctype de la balise form doit être défini sur multipart/form-data.

Balise <input> (nombre)

1<input type="number" name="quantity" min="1" max="10">

• <input type="number"> crée un champ de saisie numérique qui permet de définir la valeur minimale, la valeur maximale et le pas (montant d'incrément/décrément).

Balise <input> (champ de sélection de plage pour les nombres)

1<input type="range" name="volume" min="0" max="100" value="50">

• <input type="range"> crée un champ de saisie où les utilisateurs peuvent sélectionner une valeur dans une plage à l'aide d'un curseur.

Balise <textarea>

1<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

• La balise <textarea> crée un champ de saisie de texte multi-lignes. Il convient pour saisir du texte long ou des commentaires.

Balise <select>

1<select name="animal">
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4</select>

• La balise <select> crée un menu déroulant, et les options sont définies avec la balise <option>. Les utilisateurs peuvent sélectionner un ou plusieurs éléments.

1<select name="animals" multiple>
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4    <option value="bird">Bird</option>
5</select>

• Pour activer plusieurs sélections, ajoutez l'attribut multiple. Spécifier cet attribut affiche les options sous forme de liste déroulante.

Balise <optgroup>

 1<select name="fruits">
 2    <optgroup label="Citrus">
 3        <option value="orange">Orange</option>
 4        <option value="lemon">Lemon</option>
 5    </optgroup>
 6    <optgroup label="Berries">
 7        <option value="strawberry">Strawberry</option>
 8        <option value="blueberry">Blueberry</option>
 9    </optgroup>
10</select>

• La balise <optgroup> est utilisée pour regrouper des éléments connexes ensemble. L'attribut label vous permet de définir un nom de groupe, offrant des options claires aux utilisateurs même si la liste est longue.

Balise <label>

1<label for="username">Username:</label>
2<input type="text" id="username" placeholder="Enter your username">

• La balise <label> définit des étiquettes pour les champs de saisie, les cases à cocher et les boutons radio, améliorant l'utilisabilité et l'accessibilité.
• Par exemple, cliquer sur une étiquette peut focaliser un champ de saisie ou basculer une case à cocher activée ou désactivée.

Balise <fieldset>

1<fieldset>
2    <legend>Personal Information</legend>
3    <label for="name">Name:</label>
4    <input type="text" id="name" placeholder="Enter your name">
5</fieldset>

• La balise <fieldset> regroupe des contrôles de formulaire connexes, et la balise <legend> fournit un titre pour le groupe.

Balise <button>

1<button type="button">Button</button>
2<button type="submit" name="action" value="send">Submit</button>
3<button type="reset">Reset</button>

• La balise <button> définit un bouton cliquable qui déclenche la soumission du formulaire ou d'autres actions.

  Lorsque type="button" est spécifié, il fonctionne comme un bouton classique. Le cliquer ne soumet pas le formulaire et ne déclenche aucune autre action par défaut. Il est utilisé lorsque vous souhaitez définir des actions personnalisées avec JavaScript.

  Lorsque type="submit" est spécifié, il fonctionne comme un bouton de soumission pour le formulaire. Lorsque ce bouton est cliqué, le formulaire le contenant sera soumis.

  Lorsque type="reset" est spécifié, il fonctionne comme un bouton de réinitialisation pour le formulaire. Le cliquer réinitialisera tous les champs de saisie dans le formulaire et les ramènera à leur état initial.

  Si l'attribut type n'est pas spécifié, certains navigateurs peuvent le traiter comme type="submit", il est donc recommandé de spécifier explicitement le type pour garantir le comportement souhaité.

• La balise <button> peut inclure d'autres contenus HTML entre les balises d'ouverture et de fermeture, ce qui permet de créer des boutons avec des icônes ou du texte complexe.

• Pour un bouton de soumission utilisant la balise <input>, la valeur de l'attribut value est incluse dans les données du formulaire, mais avec une balise <button>, elle n'est pas envoyée par défaut.

  En spécifiant les attributs name et value pour une balise <button>, sa valeur peut être envoyée en tant que données du formulaire.

Balise <datalist>

1<input list="browsers" name="browser">
2<datalist id="browsers">
3    <option value="Chrome">
4    <option value="Firefox">
5    <option value="Safari">
6</datalist>

• La balise <datalist> fournit une liste d'options sélectionnables pour l'élément <input>. Les utilisateurs peuvent soit sélectionner dans la liste, soit entrer leur propre valeur.

Balise <output>

1<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
2    <input type="range" id="a" value="50"> +
3    <input type="range" id="b" value="50"> =
4    <output name="result" for="a b">100</output>
5</form>

• La balise <output> affiche le résultat des calculs ou des interactions utilisateur. Elle est utilisée pour afficher dynamiquement les résultats de calculs au sein de formulaires ou de scripts.
• Pour l'attribut for, spécifiez les ID des éléments de formulaire que vous souhaitez associer, séparés par des espaces.

Balise <progress>

1<progress value="70" max="100">70%</progress>

• La balise <progress> montre aux utilisateurs l'avancement d'une tâche. Par exemple, elle peut indiquer visuellement l'avancement d'un téléchargement de fichier ou d'une installation.

Balise <meter>

1<meter value="0.6">60%</meter>

• La balise <meter> représente une mesure numérique dans une plage connue. Elle est utilisée pour afficher des mesures comme l'utilisation du disque ou une jauge de carburant dans une plage spécifique.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video