Formulaires HTML

Les formulaires HTML sont utilisés pour collecter différents types d'inputs utilisateur, tous les navigateurs supportent la balise <form>. Définition et utilisation La balise <form> est utilisée pour créer des formulaires HTML pour les inputs utilisateur. Les formulaires peuvent inclure des éléments input, comme des champs de texte, des cases à cocher, des cases à cocher, des boutons de soumission, etc.

Exemple en ligne

Créer un champ d'entrée de texte
Ce exemple montre comment créer une zone de texte dans une page HTML. L'utilisateur peut écrire du texte dans la zone de texte.

Créer un champ d'entrée de mot de passe
Ce exemple montre comment créer un champ de mot de passe HTML.

Formulaires HTML

Un formulaire est une zone qui contient des éléments de formulaire.

Les éléments de formulaire permettent à l'utilisateur de saisir des contenus dans le formulaire, par exemple : zones de texte (textarea), listes déroulantes, cases à cocher (radio-boutons), cases à cocher (checkboxes) etc.

Le formulaire utilise la balise <form> pour être configuré :

<form>
.
Éléments input
.
</form>

Formulaires HTML - Éléments d'entrée

Dans la plupart des cas, les balises de formulaire les plus utilisées sont les balises d'entrée (<input>).

Le type d'entrée est défini par l'attribut type. Voici les types d'entrée les plus couramment utilisés :

Zones de texte (Text Fields)

Les zones de texte sont définies par le tag <input type="text">. Elles sont utilisées lorsque l'utilisateur doit saisir des lettres, des chiffres ou d'autres contenus dans le formulaire.

<form action="/run/demo-form.php"> 　　
Prénom:<input type="text" name="firstname" size="20"/><br/>Nom:<input type="text" name="lastname" size="20"/><br/><input type="submit" value="Submit"/> </form>

L'affichage dans le navigateur est le suivant :

Attention :Le formulaire lui-même n'est pas visible. De plus, dans la plupart des navigateurs, la largeur par défaut des zones de texte est 20 caractères.

Champ mot de passe

Le champ mot de passe est défini par l'étiquette <input type="password"> :

<form action="/run/demo-form.php"> 　　
Mot de passe :<input type="password" name="pwd"/><input type="submit" value="Submit"/> </form>

L'effet de visualisation du navigateur est le suivant :

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

Boutons radio (Radio Buttons)

L'étiquette <input type="radio"> définit les options de case à cocher du formulaire.

<form action="/run/demo-form.php"> 　　
<input type="radio" name="sex" value="male"/>Homme<br/><input type="radio" name="sex" value="female"/>Femme<input type="submit" value="Submit"/> </form>

L'effet de visualisation du navigateur est le suivant :

Cases à cocher (Checkboxes)

<input type="checkbox"> Définit la case à cocher. L'utilisateur doit choisir une ou plusieurs options parmi celles proposées.

<form action="/run/demo-form.php"> 　　
<input type="checkbox" name="vehicle" value="Bike"/>I have a bike<br/><input type="checkbox" name="vehicle" value="Car"/>I have a car<input type="submit" value="Submit"/> </form>

L'effet de visualisation du navigateur est le suivant :

Bouton de soumission (Submit Button)

<input type="submit"> Définit le bouton de soumission.

Lorsque l'utilisateur clique sur le bouton Confirmer, le contenu du formulaire est envoyé à un autre fichier. L'attribut d'action du formulaire définit le nom du fichier cible. Le fichier défini par l'attribut d'action traite généralement les données d'entrée reçues. :

<form name="input" action="/run/demo-"form.php" method="get">
Nom d'utilisateur : <input type="text" name="user">
<input type="submit" value="Soumettre">
</form>

L'effet de visualisation du navigateur est le suivant :

Si vous tapez quelques lettres dans le champ de texte ci-dessus et cliquez sur le bouton de confirmation, les données d'entrée seront envoyées à la page "html_form_action.php". Cette page affichera les résultats de l'entrée.

Plus d'exemples en ligne

Bouton radio (Radio buttons)
Cet exemple montre comment créer un bouton radio dans HTML.

Case à cocher (Checkboxes)
Cet exemple montre comment créer un cadre à cocher dans une page HTML. Les utilisateurs peuvent cocher ou décocher les cases à cocher.

Liste déroulante simple
Cet exemple montre comment créer un simple cadre de liste déroulante dans une page HTML. La liste déroulante est une liste optionnelle.

Liste déroulante préselectionnée
Cet exemple montre comment créer une liste déroulante simple avec une valeur préselectionnée.

Champ de texte (Textarea)
Cet exemple montre comment créer un champ de texte (contrôle d'entrée de texte en lignes multiples). Les utilisateurs peuvent écrire du texte dans le champ de texte. Le nombre de caractères que l'utilisateur peut écrire n'est pas limité.

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

Exemple de formulaire

Formulaire avec bordure
Ce exemple montre comment dessiner un cadre avec un titre autour des données.

Formulaire avec zone de saisie et bouton de confirmation
Ce exemple montre comment ajouter un formulaire à une page. Ce formulaire contient deux zones de saisie et un bouton de confirmation.

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

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

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

Étiquettes de formulaire HTML

New : HTML5Nouvelle étiquette