Contrôle d'entrée HTML

Introduction

En HTML, la balise <input> est utilisée pour créer différents types de champs de saisie. Dans ce laboratoire, on montrera comment créer différents types de champs de saisie dans un formulaire HTML en utilisant la balise <input> avec l'attribut type approprié.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Skills Graph

Créer un champ de saisie de texte

Créez un nouveau fichier HTML nommé index.html. Ce fichier contiendra le code HTML pour le formulaire de saisie.

Pour créer un champ de saisie de texte, utilisez le code HTML suivant :

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

Dans le code, nous avons créé une étiquette pour le champ de saisie, défini l'attribut type sur "text" et assigné un attribut id et un attribut name. Ce code créera un champ de saisie de texte pour que l'utilisateur puisse entrer son nom d'utilisateur.

Créer un champ de saisie de mot de passe

Pour créer un champ de saisie de mot de passe, utilisez le code suivant :

<label for="password">Mot de passe :</label><br />
<input type="password" id="password" name="password" /><br />

Dans le code, nous avons défini l'attribut type sur "password", ce qui masquera les caractères du mot de passe que l'utilisateur entre.

Créer un champ de saisie à case à cocher

Pour créer un champ de saisie à case à cocher, utilisez le code suivant :

<label for="vehicle1">J'ai une voiture</label>
<input type="checkbox" id="vehicle1" name="vehicle1" value="car" />
<br />
<label for="vehicle2">J'ai un vélo</label>
<input type="checkbox" id="vehicle2" name="vehicle2" value="bike" />
<br />
<label for="vehicle3">J'ai un bateau</label>
<input type="checkbox" id="vehicle3" name="vehicle3" value="boat" />

Dans le code, nous avons créé trois cases à cocher pour que l'utilisateur puisse choisir. Notez que chaque case à cocher a un id, un name et un attribut value différents.

Créer un champ de saisie à sélection unique

Pour créer un champ de saisie à sélection unique, utilisez le code suivant :

<label for="male">Homme</label>
<input type="radio" id="male" name="gender" value="male" />
<br />
<label for="female">Femme</label>
<input type="radio" id="female" name="gender" value="female" />
<br />
<label for="other">Autre</label>
<input type="radio" id="other" name="gender" value="other" />

Dans le code, nous avons créé trois boutons de sélection unique pour que l'utilisateur puisse choisir son genre. Notez que chaque bouton de sélection unique a un id, un name et un attribut value différents.

Créer un bouton de soumission

Pour créer un bouton de soumission, utilisez le code suivant :

<input type="submit" value="Soumettre" />

Dans le code, nous avons créé un bouton que l'utilisateur cliquera pour soumettre le formulaire.

Récapitulatif

Dans ce laboratoire, nous avons appris à créer différents types de champs de saisie dans un formulaire HTML en utilisant la balise <input> avec l'attribut type approprié. Nous avons créé des champs de saisie de texte, de mot de passe, à case à cocher, à sélection unique et un bouton de soumission. Vous pouvez utiliser ces exemples comme point de départ pour créer des formulaires HTML plus complexes qui collectent les entrées de l'utilisateur.