Cours IT Bases HTML 013_Formulaires et saisie utilisateur

Formulaires

Les formulaires HTML (Form) sont une partie très importante de HTML. Ils permettent aux utilisateurs de saisir des informations sur une page web et de soumettre ces informations au serveur.

Exemple :

1
<form action="/submit" method="post">
2
  <!-- Les éléments du formulaire vont ici -->
3
</form>

L’élément <form> définit la zone où les utilisateurs saisissent des données et peut contenir différents types d’éléments de saisie, tels que des zones de texte <textarea>, des listes déroulantes <select>, des boutons radio <radio>, des cases à cocher <checkbox> et des boutons <button>, etc.

Attributs du formulaire :

• action : Définit l’URL du fichier de traitement sur le serveur auquel les données du formulaire sont soumises.
• method : Définit la méthode HTTP utilisée pour envoyer les données au serveur. Les valeurs couramment utilisées sont “get” et “post”.
• name : Utilisé pour spécifier le nom du formulaire. Le nom du formulaire est utilisé pour identifier le formulaire et est utilisé lors du traitement des données du formulaire côté serveur.
• enctype : Utilisé pour spécifier la méthode de codage des données du formulaire. Les données du formulaire peuvent être codées en utilisant application/x-www-form-urlencoded ou multipart/form-data.
• autocomplete : Utilisé pour spécifier si la fonction de saisie automatique du formulaire est activée. Si défini sur on, le navigateur remplira automatiquement les données précédemment saisies dans le formulaire.
• novalidate : Utilisé pour spécifier si les données du formulaire doivent être validées. Si défini sur on, les données du formulaire ne seront pas validées avant la soumission.

[!Résumé]

• L’élément form lui-même n’est pas visible.

Champs de texte

Dans les formulaires, nous avons souvent besoin que les utilisateurs saisissent du contenu textuel comme des lettres et des chiffres. Cela peut être réalisé avec l’élément <input>, dont l’attribut type est défini sur “text”.

Exemple :

1
<form>
2
Nom : <input type="text" name="name"><br>
3
Âge : <input type="text" name="age">
4
</form>

Effet :

[!Résumé]

• Dans la plupart des navigateurs, la largeur par défaut des champs de texte est de 20 caractères.

Champs de mot de passe

Si vous avez besoin que les utilisateurs saisissent un mot de passe, vous pouvez définir l’attribut type de l’élément <input> sur “password”, et le contenu saisi sera masqué.

Exemple :

1
<form>
2
Mot de passe : <input type="password" name="pwd">
3
</form>

Effet :

[!Résumé]

• Les caractères du champ de mot de passe ne sont pas affichés en texte clair, mais sont remplacés par des astérisques * ou des points .

Boutons radio (Radio Buttons)

Les boutons radio et les cases à cocher permettent aux utilisateurs de sélectionner une ou plusieurs options parmi plusieurs options. La valeur de l’attribut type des boutons radio est “radio”.

Exemple :

1
<form action="">
2
Genre :
3
<input type="radio" name="sex" value="male" checked>Masculin
4
<input type="radio" name="sex" value="female">Féminin
5
</form>

Effet :

[!Résumé]

• La valeur de l’attribut name des boutons radio doit être la même, sinon ils n’appartiendront pas au même groupe.
• L’attribut checked est utilisé pour spécifier si le bouton radio est sélectionné par défaut.

Cases à cocher (Checkboxes)

Les cases à cocher peuvent sélectionner une ou plusieurs options, définies avec <input type="checkbox">

Exemple :

1
<form>
2
  Apps que vous avez utilisées :
3
  <input type="checkbox" name="app" value="jd">JD
4
  <input type="checkbox" name="app" value="wechat">WeChat
5
  <input type="checkbox" name="app" value="qq">QQ
6
  <input type="checkbox" name="app" value="douyin">Douyin
7
</form>

Effet :

[!Résumé]

• L’attribut checked est utilisé pour spécifier si la case à cocher est sélectionnée par défaut.

Listes déroulantes (select)

Les listes déroulantes permettent aux utilisateurs de sélectionner une option parmi plusieurs options. Elles sont créées avec l’élément <select> et utilisent des éléments <option> pour définir les options.

Exemple :

1
<form action="">
2
  Veuillez sélectionner votre pays :
3
  <select name="country">
4
    <option value="china">Chine</option>
5
    <option value="us">États-Unis</option>
6
    <option value="japan">Japon</option>
7
  </select>
8
</form>

Effet :

[!Résumé]

• L’attribut selected est utilisé pour spécifier l’option par défaut de la liste déroulante.
• L’attribut disabled est utilisé pour spécifier si la liste déroulante est disponible.
• Vous pouvez utiliser l’attribut size pour spécifier le nombre d’options visibles dans la liste déroulante.

Boutons de soumission (Submit, Reset, Button)

Les formulaires ont généralement besoin d’un bouton pour soumettre ou confirmer la saisie de l’utilisateur. submit, reset et button sont tous des éléments de bouton de formulaire en HTML.

Exemple :

1
<form action="/submit" method="post">
2
  <input type="submit" value="Bouton de soumission">
3
  <input type="reset" value="Bouton de réinitialisation">
4
  <button type="button" value="Bouton de confirmation">Bouton de confirmation</button>
5
  <input type="image" src="[zhaojian-avatar.png (1332×1332)](https://www.zhaojian.net/images/zhaojian-avatar.png)" alt="Bouton image" width="50" height="50">
6
</form>

Effet :

[!Résumé]

• post : Fait référence à la méthode HTTP POST. Les données du formulaire seront incluses dans le corps du formulaire puis envoyées au serveur, utilisée pour soumettre des données sensibles telles que le nom d’utilisateur et le mot de passe.
• get : Valeur par défaut, fait référence à la méthode HTTP GET. Les données du formulaire seront attachées à l’URL de l’attribut action, avec ? comme séparateur, généralement utilisée pour des informations non sensibles comme la pagination. Par exemple : https://www.zhaojian.net/?page=1, ici page=1 sont les données soumises par la méthode get.

Éléments et attributs du formulaire