032.4 Leçon 1
Certification : |
Web Development Essentials |
---|---|
Version : |
1.0 |
Thème : |
032 Balisage de documents HTML |
Objectif : |
032.4 Formulaires HTML |
Leçon : |
1 sur 1 |
Introduction
Les formulaires web constituent un moyen simple et efficace pour demander des informations aux visiteurs d’une page HTML. Le développeur web frontal (front end) peut utiliser divers composants tels que des champs de texte, des cases à cocher, des boutons et bien d’autres pour construire des interfaces qui enverront des données au serveur de manière structurée.
Formulaires HTML simples
Avant d’aborder le code de balisage spécifique aux formulaires, commençons par un simple document HTML vierge, sans aucun contenu :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Working with HTML Forms</title>
</head>
<body>
<!-- The body content goes here -->
</body>
</html>
Enregistrez cet exemple de code comme un fichier texte brut avec une extension .html
(comme dans form.html
) et utilisez votre navigateur préféré pour l’ouvrir. Après l’avoir modifié, appuyez sur le bouton de réactualisation du navigateur pour afficher les modifications.
La structure de base du formulaire est donnée par la balise <form>
elle-même et ses éléments internes :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Working with HTML Forms</title>
</head>
<body>
<!-- Form to collect personal information -->
<form>
<h2>Personal Information</h2>
<p>Full name:</p>
<p><input type="text" name="fullname" id="fullname"></p>
<p><input type="reset" value="Clear form"></p>
<p><input type="submit" value="Submit form"></p>
</form>
</body>
</html>
Les doubles guillemets ne sont pas nécessaires pour les attributs à un seul mot comme type
, donc type=text
fonctionne aussi bien que type="text"
. Le développeur peut choisir la convention à utiliser.
Enregistrez le nouveau contenu et rechargez la page dans le navigateur. Vous devriez voir le résultat présenté dans la Figure 1.
La balise <form>
en elle-même ne produit aucun résultat notable sur la page. Les éléments contenus entre les balises <form>…</form>
vont définir les champs et les autres éléments visuels présentés au visiteur.
Le code de l’exemple contient à la fois des balises HTML génériques (<h2>
et <p>
) et la balise <input>
, qui est une balise spécifique au formulaire. Alors que les balises génériques peuvent apparaître n’importe où dans le document, les balises spécifiques au formulaire ne doivent être utilisées qu’à l’intérieur de l’élément <form>
, c’est-à-dire entre les balises ouvrantes <form>
et fermantes </form>
.
Note
|
HTML ne fournit que des balises et des propriétés basiques pour modifier l’apparence standard des formulaires. CSS fournit des mécanismes avancés pour modifier l’apparence du formulaire. Il est donc recommandé d’écrire un code HTML qui ne traite que des aspects fonctionnels du formulaire et de modifier son apparence avec CSS. |
Comme le montre l’exemple, la balise de paragraphe <p>
peut être utilisée pour décrire le champ au visiteur. Cependant, il n’y a pas de moyen évident pour le navigateur de faire le lien entre la description dans la balise <p>
et l’élément d’entrée correspondant. La balise étiquette <label>
est plus appropriée dans ces cas (à partir de maintenant, considérez que tous les exemples de code se trouvent dans le corps du document HTML) :
<form>
<h2>Personal Information</h2>
<label for="fullname">Full name:</label>
<p><input type="text" name="fullname" id="fullname"></p>
<p><input type="reset" value="Clear form"></p>
<p><input type="submit" value="Submit form"></p>
</form>
L’attribut for
de la balise <label>
contient l’identifiant id
de l’élément d’entrée correspondant. Cela rend la page plus accessible, car les lecteurs d’écran pourront lire le contenu de l’élément <label>
lorsque l’élément d’entrée est au premier plan. En outre, les visiteurs peuvent cliquer sur l’étiquette pour mettre l’accent sur le champ d’entrée correspondant.
L’attribut id
fonctionne pour les éléments de formulaire comme pour tout autre élément du document. Il fournit un identifiant pour l’élément qui est unique dans tout le document. L’attribut name
a un but similaire, mais il est utilisé pour identifier l’élément d’entrée dans le contexte du formulaire. Le navigateur utilise l’attribut name
pour identifier le champ de saisie lors de l’envoi des données du formulaire au serveur. Il est donc important d’utiliser des attributs name
significatifs et uniques dans le formulaire.
L’attribut type
est le principal attribut de l’élément d’entrée, car il contrôle le type de données que l’élément accepte et sa présentation visuelle au visiteur. Si l’attribut type
n’est pas fourni, l’entrée présente par défaut un champ de texte. Les types d’entrée suivants sont pris en charge par les navigateurs modernes :
type valeurs |
Type de données | Comment il est affiché |
---|---|---|
|
Une chaîne arbitraire |
N/A |
|
Texte sans retour à la ligne |
Un champ de texte |
|
Texte sans retour à la ligne |
Un champ de recherche |
|
Texte sans retour à la ligne |
Un champ de texte |
|
Une URL absolue |
Un champ de texte |
|
Une adresse e-mail ou une liste d’adresses e-mail |
Un champ de texte |
|
Un texte sans retour à la ligne (informations sensibles) |
Un champ de texte qui masque la saisie des données |
|
Une date (année, mois, jour) sans fuseau horaire |
Un champ de contrôle de date |
|
Une date composée d’une année et d’un mois sans fuseau horaire |
Un champ de contrôle du mois |
|
Une date composée d’un numéro de semaine et d’un numéro d’année sans fuseau horaire |
Un champ de contrôle de semaine |
|
Un temps (heure, minute, seconde, fraction de seconde) sans fuseau horaire |
Un champ de contrôle de l’heure |
|
Une date et un temps (année, mois, jour, heure, minute, seconde, fraction de seconde) sans fuseau horaire |
Un champ de contrôle de date et d’heure |
|
Une valeur numérique |
Un champ de texte ou un champ avec bouton fléché |
|
Une valeur numérique, avec la particularité sémantique que la valeur exacte n’est pas importante |
Une glissière ou similaire |
|
Une couleur sRGB avec des composantes rouge, verte et bleue de 8 bits |
Un sélecteur de couleur |
|
Un ensemble de zéro ou de plusieurs valeurs provenant d’une liste prédéfinie |
Une case à cocher (offre des choix et permet de sélectionner plusieurs choix) |
|
Une valeur énumérée |
Un bouton radio (offre des choix et ne permet de sélectionner qu’un seul choix) |
|
Zéro ou plusieurs fichiers, chacun avec un type MIME et un nom de fichier facultatif |
Une étiquette et un bouton |
|
Une valeur énumérée, qui met fin au processus de saisie et entraîne la soumission du formulaire |
Un bouton |
|
Une coordonnée, relative à la taille d’une image particulière, qui met fin au processus de saisie et provoque l’envoi du formulaire |
Soit une image cliquable, soit un bouton |
|
N/A |
Un bouton générique |
|
N/A |
Un bouton dont la fonction est de réinitialiser tous les autres champs à leur valeur initiale |
L’apparence des types d’entrée password
, search
, tel
, url
, et email
ne diffère pas du type standard text
. Leur but est d’offrir des indications au navigateur sur le contenu prévu pour ce champ d’entrée, afin que le navigateur ou le script s’exécutant du côté client puisse prendre des mesures personnalisées pour un type d’entrée spécifique. La seule différence entre le type d’entrée de texte et le type de champ de mot de passe, par exemple, est que le contenu du champ de mot de passe n’est pas affiché lorsque le visiteur le saisit. Sur les appareils à écran tactile, où le texte est tapé à l’aide d’un clavier à l’écran, le navigateur peut faire apparaître uniquement le clavier numérique lorsqu’une entrée de type tel
est sélectionnée. Une autre action possible consiste à proposer une liste d’adresses électroniques connues lorsqu’une entrée de type email
est sélectionnée.
Le type number
apparaît également comme une simple entrée de texte, mais avec des flèches d’incrémentation/décrémentation sur le côté. Son utilisation fera en sorte que le clavier numérique s’affiche sur les écrans tactiles lorsqu’il a le focus.
Les autres éléments d’entrée ont leur propre apparence et leur propre comportement. Le type date
, par exemple, est affiché selon les paramètres du format de date local et un calendrier s’affiche lorsque le champ devient actif :
<form>
<p>
<label for="date">Date:</label>
<input type="date" name="date" id="date">
</p>
</form>
La Figure 2 montre comment la version de bureau de Firefox affiche actuellement ce champ.
date
.
Note
|
Certains éléments peuvent apparaître légèrement différents dans les différents navigateurs ou systèmes d’exploitation, mais leur fonctionnement et leur utilisation sont toujours les mêmes. |
Il s’agit d’une fonctionnalité standard de tous les navigateurs modernes, qui ne nécessite aucune option ou programmation supplémentaire.
Quel que soit le type d’entrée, le contenu d’un champ de saisie est appelé sa valeur. Toutes les valeurs de champ sont vides par défaut, mais l’attribut value
peut être utilisé pour définir une valeur par défaut pour le champ. La valeur du type date doit utiliser le format AAAA-MM-JJ. La valeur par défaut du champ date suivant est le 6 août 2020 :
<form>
<p>
<label for="date">Date:</label>
<input type="date" name="date" id="date" value="2020-08-06">
</p>
</form>
Les types d’entrée spécifiques aident le visiteur à remplir les champs, mais n’empêchent pas le visiteur de contourner les restrictions et de saisir des valeurs arbitraires dans n’importe quel champ. C’est pourquoi il est important que les valeurs des champs soient validées lorsqu’elles arrivent sur le serveur.
Les éléments de formulaire dont les valeurs doivent être saisies par le visiteur peuvent avoir des attributs spéciaux qui aident à les remplir. L’attribut placeholder
insère une valeur d’exemple dans l’élément de saisie :
<p>Address: <input type="text" name="address" id="address" placeholder="e.g. 41 John St., Upper Suite 1"></p>
La valeur d’exemple apparaît à l’intérieur de l’élément de saisie, comme le montre la Figure 3.
placeholder
.Dès que le visiteur commence à taper dans le champ, le texte d’exemple disparaît. Le texte d’exemple n’est pas envoyé comme valeur du champ si le visiteur laisse le champ vide.
L’attribut required
oblige le visiteur à saisir une valeur dans le champ correspondant avant de soumettre le formulaire :
<p>Address: <input type="text" name="address" id="address" required placeholder="e.g. 41 John St., Upper Suite 1"></p>
L’attribut required
est un attribut booléen, il peut donc être placé seul (sans le signe égal). Il est important de marquer les champs qui sont obligatoires, sinon le visiteur ne sera pas en mesure de dire quels champs manquent et empêchent la soumission du formulaire.
L’attribut autocomplete
indique si la valeur de l’élément d’entrée peut être complétée automatiquement par le navigateur. S’il a pour valeur autocomplete="off"
, le navigateur ne suggère pas de valeurs antérieures pour remplir l’entrée. Les éléments d’entrée d’informations sensibles, comme les numéros de carte de crédit, doivent avoir l’attribut auto-complete
défini sur off
.
Saisie de textes volumineux : textarea
Contrairement au champ de texte, dans lequel on ne peut insérer qu’une seule ligne de texte, l’élément textarea
permet au visiteur d’entrer plus d’une ligne de texte. L’élément textarea
est un élément distinct, il n’est pas basé sur l’élément input
:
<p> <label for="comment">Type your comment here:</label> <br>
<textarea id="comment" name="comment" rows="10" cols="50">
My multi-line, plain-text comment.
</textarea>
</p>
La Figure 4 montre l’apparence typique d’une zone de texte textarea
.
textarea
.Une autre différence avec l’élément input
est que l’élément textarea
a une balise de fermeture (</textarea>
), donc son contenu (c’est-à-dire sa valeur) se place entre les deux balises. Les attributs rows
et cols
ne limitent pas la quantité de texte ; ils servent uniquement à définir la disposition. La zone de texte possède également une poignée dans le coin inférieur droit, qui permet au visiteur de la redimensionner.
Listes d’options
Plusieurs types de champs de formulaire peuvent être utilisés pour présenter une liste d’options au visiteur : l’élément <select>
et les types d’entrée radio
et checkbox
.
L’élément <select>
est un champ de contrôle de liste déroulante avec des entrées prédéfinies :
<p><label for="browser">Favorite Browser:</label>
<select name="browser" id="browser">
<option value="firefox">Mozilla Firefox</option>
<option value="chrome">Google Chrome</option>
<option value="opera">Opera</option>
<option value="edge">Microsoft Edge</option>
</select>
</p>
La balise <option>
représente une seule entrée dans l’élément <select>
correspondant. La liste entière apparaît lorsque le visiteur tape ou clique sur le champ, comme le montre la Figure 5.
select
.La première entrée de la liste est sélectionnée par défaut. Pour modifier ce comportement, vous pouvez ajouter l’attribut selected
à une autre entrée afin qu’elle soit sélectionnée au chargement de la page.
Le type d’entrée radio
est similaire à l’élément <select>
, mais au lieu d’afficher une liste déroulante, il affiche toutes les entrées afin que le visiteur puisse en sélectionner une. Les résultats du code suivant sont présentés dans la Figure 6.
<p>Favorite Browser:</p>
<p>
<input type="radio" id="browser-firefox" name="browser" value="firefox" checked>
<label for="browser-firefox">Mozilla Firefox</label>
</p>
<p>
<input type="radio" id="browser-chrome" name="browser" value="chrome">
<label for="browser-chrome">Google Chrome</label>
</p>
<p>
<input type="radio" id="browser-opera" name="browser" value="opera">
<label for="browser-opera">Opera</label>
</p>
<p>
<input type="radio" id="browser-edge" name="browser" value="edge">
<label for="browser-edge">Microsoft Edge</label>
</p>
radio
.Notez que tous les types d’entrée radio
du même groupe ont le même attribut name
. Chacun d’eux est exclusif, donc l’attribut value
correspondant à l’entrée choisie sera celui associé à l’attribut name
partagé. L’attribut checked
fonctionne comme l’attribut selected
de l’élément <select>
. Il marque l’entrée correspondante lorsque la page se charge pour la première fois. La balise <label>
est particulièrement utile pour les entrées radio, car elle permet au visiteur de vérifier une entrée en cliquant ou en tapant sur le texte correspondant en plus du champ lui-même.
Alors que les champs de contrôle radio
sont destinés à ne sélectionner qu’une seule entrée d’une liste, le type d’entrée checkbox
permet au visiteur de sélectionner plusieurs entrées :
<p>Favorite Browser:</p>
<p>
<input type="checkbox" id="browser-firefox" name="browser" value="firefox" checked>
<label for="browser-firefox">Mozilla Firefox</label>
</p>
<p>
<input type="checkbox" id="browser-chrome" name="browser" value="chrome" checked>
<label for="browser-chrome">Google Chrome</label>
</p>
<p>
<input type="checkbox" id="browser-opera" name="browser" value="opera">
<label for="browser-opera">Opera</label>
</p>
<p>
<input type="checkbox" id="browser-edge" name="browser" value="edge">
<label for="browser-edge">Microsoft Edge</label>
</p>
Les cases à cocher peuvent également utiliser l’attribut checked
pour que les entrées soient sélectionnées par défaut. Au lieu des champs ronds de l’entrée radio, les cases à cocher sont affichées comme des champs carrés, comme le montre la Figure 7.
checkbox
.Si plusieurs entrées sont sélectionnées, le navigateur les soumettra avec le même nom, ce qui oblige le développeur back-end à écrire un code spécifique pour lire correctement les données de formulaires contenant des cases à cocher.
Pour une meilleure utilisation, les champs d’entrée peuvent être regroupés à l’intérieur d’une balise <fieldset>
:
<fieldset>
<legend>Favorite Browser</legend>
<p>
<input type="checkbox" id="browser-firefox" name="browser" value="firefox" checked>
<label for="browser-firefox">Mozilla Firefox</label>
</p>
<p>
<input type="checkbox" id="browser-chrome" name="browser" value="chrome" checked>
<label for="browser-chrome">Google Chrome</label>
</p>
<p>
<input type="checkbox" id="browser-opera" name="browser" value="opera">
<label for="browser-opera">Opera</label>
</p>
<p>
<input type="checkbox" id="browser-edge" name="browser" value="edge">
<label for="browser-edge">Microsoft Edge</label>
</p>
</fieldset>
La balise <legend>
contient le texte qui est placé en haut du cadre que la balise <fieldset>
dessine autour des champs (Figure 8).
fieldset
.La balise <fieldset>
ne change pas la façon dont les valeurs des champs sont soumises au serveur, mais elle permet au développeur web frontal (frontend) de contrôler plus facilement les champs imbriqués. Par exemple, en définissant l’attribut disabled
dans un attribut <fieldset>
, tous ses éléments internes seront rendus indisponibles pour le visiteur.
Type d’élément hidden
Il existe des situations où le développeur souhaite inclure dans le formulaire des informations qui ne peuvent pas être manipulées par le visiteur, c’est-à-dire soumettre une valeur choisie par le développeur sans présenter un champ de formulaire où le visiteur peut taper ou modifier la valeur. Le développeur peut vouloir, par exemple, inclure un jeton d’identification pour ce formulaire particulier qui ne doit pas être vu par le visiteur. Un élément de formulaire hidden
(caché) est codé comme dans l’exemple suivant :
<input type="hidden" id="form-token" name="form-token" value="e730a375-b953-4393-847d-2dab065bbc92">
La valeur d’un champ d’entrée caché est généralement ajoutée au document côté serveur, lors de l’affichage du document. Les entrées cachées sont traitées comme des champs ordinaires lorsque le navigateur les envoie au serveur, qui les lit également comme des champs d’entrée ordinaires.
Type d’entrée file
En plus des données textuelles, saisies ou sélectionnées dans une liste, les formulaires HTML peuvent également soumettre des fichiers arbitraires au serveur. Le type d’entrée file
permet au visiteur de choisir un fichier dans le système de fichiers local et de l’envoyer directement depuis la page web :
<p>
<label for="attachment">Attachment:</label><br>
<input type="file" id="attachment" name="attachment">
</p>
Au lieu d’un champ de formulaire pour écrire ou sélectionner une valeur, le type d’entrée file
montre un bouton browse
(parcourir) qui ouvrira une boîte de dialogue de fichier. Tout type de fichier est accepté par le type d’entrée file
, mais le développeur backend limitera probablement les types de fichiers autorisés et leur taille maximale. La vérification du type de fichier peut également être effectuée dans le front-end en ajoutant l’attribut accept
. Par exemple, pour accepter uniquement les images JPEG et PNG l’attribut accept
doit être accept="image/jpeg, image/png"
.
Boutons d’action
Par défaut, le formulaire est soumis lorsque le visiteur appuie sur la touche Entrée dans n’importe quel champ de saisie. Pour rendre les choses plus intuitives, il faut ajouter un bouton d’envoi avec le type d’entrée submit
:
<input type="submit" value="Submit form">
Le texte contenu dans l’attribut value
s’affiche sur le bouton, comme indiqué dans la Figure 9.
Un autre bouton utile à inclure dans les formulaires complexes est le bouton reset
, qui efface le formulaire et le remet dans son état initial :
<input type="reset" value="Clear form">
Comme pour le bouton submit, le texte de l’attribut value
est utilisé pour étiqueter le bouton. Alternativement la balise <button>
peut être utilisée pour ajouter des boutons aux formulaires ou à tout autre endroit de la page. Contrairement aux boutons réalisés avec la balise <input>
, l’élément bouton possède une balise de fermeture et l’étiquette du bouton est son contenu interne :
<button>Submit form</button>
À l’intérieur d’un formulaire, l’action par défaut de l’élément button
est de soumettre le formulaire. Comme pour les boutons d’entrée, l’attribut type du bouton peut être changé à reset
.
Action et méthodes de formulaire
La dernière étape de l’écriture d’un formulaire HTML consiste à définir comment et où les données doivent être envoyées. Ces aspects dépendent des détails du client et du serveur.
Côté serveur, l’approche la plus courante consiste à disposer d’un fichier script qui analysera, validera et traitera les données du formulaire en fonction de l’objectif de l’application. Par exemple, le développeur backend pourrait écrire un script appelé receive_form.php
pour recevoir les données envoyées par le formulaire. Du côté client, le script est indiqué dans l’attribut action
de la balise de formulaire :
<form action="receive_form.php">
L’attribut action
suit les mêmes conventions que toutes les adresses HTTP. Si le script se trouve au même niveau hiérarchique que la page contenant le formulaire, il peut être écrit sans son chemin. Sinon, le chemin absolu ou relatif doit être fourni. Le script doit également générer la réponse qui servira de page de destination, chargée par le navigateur après que le visiteur a soumis le formulaire.
HTTP fournit des méthodes distinctes pour envoyer les données d’un formulaire via une connexion avec le serveur. Les méthodes les plus courantes sont get
et post
, qui doivent être indiquées dans l’attribut method
de la balise form
:
<form action="receive_form.php" method="get">
Ou :
<form action="receive_form.php" method="post">
Dans la méthode get
, les données du formulaire sont encodées directement dans l’URL de la requête. Lorsque le visiteur soumet le formulaire, le navigateur charge l’URL définie dans l’attribut action
avec les champs du formulaire ajoutés.
La méthode get
est préférable pour les petites quantités de données, comme les simples formulaires de contact. Cependant, l’URL ne peut pas dépasser quelques milliers de caractères. La méthode post
doit donc être utilisée lorsque les formulaires contiennent des champs importants ou non textuels, comme des images.
La méthode post
permet au navigateur d’envoyer les données du formulaire dans la section corps de la requête HTTP. Bien qu’elle soit nécessaire pour les données binaires qui dépassent la limite de taille d’une URL, la méthode post
ajoute une surcharge inutile à la connexion lorsqu’elle est utilisée pour des formulaires textuels plus simples ; la méthode get
est donc préférable dans ces cas.
La méthode choisie n’affecte pas la manière dont le visiteur interagit avec le formulaire. Les méthodes get
et post
sont traitées différemment par le script côté serveur qui reçoit le formulaire.
Lorsque vous utilisez la méthode post
, il est également possible de modifier le type MIME du contenu du formulaire avec l’attribut de formulaire enctype
. Cela affecte la façon dont les champs et les valeurs du formulaire seront empilés ensemble dans la communication HTTP avec le serveur. La valeur par défaut de enctype
est application/x-www-form-urlencoded
, ce qui est similaire au format utilisé par la méthode get
. Si le formulaire contient des champs de saisie de type file
, l’enctype multipart/form-data
doit être utilisé à la place.
Exercices guidés
-
Quelle est la bonne approche pour associer une balise
<label>
à une balise<input>
? -
Quel type d’élément d’entrée fournit une glissière pour choisir une valeur numérique ?
-
Quel est l’objectif de l’attribut de formulaire
placeholder
? -
Comment pouvez-vous faire en sorte que la deuxième option d’un élément
<select>
soit sélectionnée par défaut ?
Exercices d’exploration
-
Comment pouvez-vous modifier une entrée
file
pour qu’elle n’accepte que les fichiers PDF ? -
Comment pouvez-vous informer le visiteur des champs obligatoires d’un formulaire ?
-
Réunissez trois extraits de code de cette leçon dans un seul formulaire. Veillez à ne pas utiliser le même attribut
name
ouid
dans plusieurs champs de formulaire.
Résumé
Cette leçon explique comment créer des formulaires HTML simples pour renvoyer des données au serveur. Du côté client, les formulaires HTML sont constitués d’éléments HTML standard qui sont combinés pour construire des interfaces personnalisées. De plus, les formulaires doivent être configurés pour communiquer correctement avec le serveur. La leçon aborde les concepts et procédures suivants :
-
La balise
<form>
et la structure de base du formulaire. -
Les éléments d’entrée de base et spéciaux.
-
Le rôle des balises spéciales comme
<label>
,<fieldset>
et<legend>
. -
Les boutons et les actions du formulaire.
Réponses aux exercices guidés
-
Quelle est la bonne approche pour associer une balise
<label>
à une balise<input>
?L’attribut
for
de la balise<label>
doit contenir l’id de la balise<input>
correspondante. -
Quel type d’élément d’entrée fournit une glissière pour choisir une valeur numérique ?
Le type d’entrée
range
. -
Quel est l’objectif de l’attribut de formulaire
placeholder
?L’attribut
placeholder
contient un exemple de saisie qui est visible lorsque le champ d’entrée correspondant est vide. -
Comment pouvez-vous faire en sorte que la deuxième option d’un élément
<select>
soit sélectionnée par défaut ?Le deuxième élément
option
doit avoir l’attributselected
.
Réponses aux exercices d’exploration
-
Comment pouvez-vous modifier une entrée
file
pour qu’elle n’accepte que les fichiers PDF ?L’attribut
accept
de l’élément d’entrée doit prendre la valeurapplication/pdf
. -
Comment pouvez-vous informer le visiteur des champs obligatoires d’un formulaire ?
En général, les champs obligatoires sont marqués d’un astérisque (
*
), et une brève note du type “Les champs marqués d’un * sont obligatoires” est placée à proximité du formulaire. -
Réunissez trois extraits de code de cette leçon dans un seul formulaire. Veillez à ne pas utiliser le même attribut
name
ouid
dans plusieurs champs de formulaire.<form action="receive_form.php" method="get"> <h2>Personal Information</h2> <label for="fullname">Full name:</label> <p><input type="text" name="fullname" id="fullname"></p> <p> <label for="date">Date:</label> <input type="date" name="date" id="date"> </p> <p>Favorite Browser:</p> <p> <input type="checkbox" id="browser-firefox" name="browser" value="firefox" checked> <label for="browser-firefox">Mozilla Firefox</label> </p> <p> <input type="checkbox" id="browser-chrome" name="browser" value="chrome" checked> <label for="browser-chrome">Google Chrome</label> </p> <p> <input type="checkbox" id="browser-opera" name="browser" value="opera"> <label for="browser-opera">Opera</label> </p> <p> <input type="checkbox" id="browser-edge" name="browser" value="edge"> <label for="browser-edge">Microsoft Edge</label> </p> <p><input type="reset" value="Clear form"></p> <p><input type="submit" value="Submit form"></p> </form>