Cours 2 Partie 2

86 Intérêt d'un formulaire
 Les formulaires occupent une place prépondérante dans la conception et l'exploitation

d'une application ou un site Web. C'est en effet la seule façon de recevoir en retour des
informations provenant directement de l'utilisateur final.
ISGB
87
Les formulaires
 La balise <form> ... </form> a comme unique fonction de déclarer au navigateur

qu'il doit mettre en place un formulaire. Elle englobera les éléments ou champs de
formulaires comme une ligne de texte, des cases à cocher, des listes déroulantes,
etc.
 Exemple
 <body>
 <form>
 < ! - - Éléments de formulaire - - >
 </form>
 </body>
ISGB
88 Les formulaires
ISGB
89 Les formulaires
ISGB
90 Les formulaires
ISGB
91 Les formulaires
 La balise<fieldset>
 La balise <fieldset> permet un regroupement de champs de saisie en catégories

logiques (thématiques). Ce regroupement rend les contrôles plus compréhensibles.
 La balise<legend>
 La balise <legend> représente un titre ou une légende explicative pour le reste du

contenu de son élément <fieldset> parent.
ISGB
92 Les formulaires
 Un <label> associe une légende texte à un élément de formulaire.

Son contenu est une aide à la compréhension du formulaire, ce qui
est fortement recommandé en termes d'accessibilité. Une activation
– un clic – de cet élément donne immédiatement le focus sur
l'élément de formulaire auquel on le lie. Cette liaison est effectuée
avec l'identifiant (attribut id) de ce dernier, auquel on fait référence
grâce à (l'attribut for) de <label>.
ISGB
93 Les formulaires
<body>
<form method="post" action="">
<fieldset>
<legend>Informationspersonnelles</leg
end>
<label for="nom">Entrervotre nom
</label>
<input id="nom" name="nom"
type="text">
<label
for="prenom">Entrervotreprénom</labe
l>
<input id="prenom" name="prenom"
type="text" ISGB
Les formulaires
94
La balise <input> des formulaires et ses variantes
 L'élément <input> est particulier, car il revêt de multiples apparences et fonctionnalités,

uniquement caractérisées par l'attribut type. Son but est de recueillir les informations d'une
entrée effectuée par l'utilisateur, éventuellement en lui fournissant toutes les indications
nécessaires pour structurer son entrée ou son choix.
ISGB
Les formulaires
95
Le type text
 C'est le type le plus classique, il permet

la saisie d'un texte.

<input type="text" name="prenom">
ISGB
Les formulaires
96
Le type password
 Confrère du type text, un champ

d'entrée de mot de passe password
est un équivalent dont les
caractères sont remplacés
visuellement par des astérisques ou
des points.

Mot de passe : <input
type="password" name="psw">
ISGB
Les formulaires
97
Le type tel

 Est un champ de texte destiné à recevoir un numéro de téléphone.
 Téléphone : <input type="tel" name="telephone">
Le type url
 Est un champ de texte destiné à recevoir unURL.
URL : <input type="url“ name="adresseweb">
Le type email
 Est un champ de texte destiné à recevoir une adresse mail.
 E-mail : <input type="email" name="adressemail">
ISGB
Les formulaires
98
Le type radio
 Un bouton radio est un contrôle de <p>
formulaire, faisant partie d'un groupe
d'autres boutons radio. Ils possèdent <input type="radio" name="genre"
tous le même attribut name en tant que value=" masculine" id="m">
lien : un seul bouton radio peut être <label for="m"> je suis un homme
coché parmi leur ensemble, à un </label>
moment donné.
<input type="radio" name="genre"
value=" feminin" id="f">
<label for="f"> je suis une femme
</label>
</P>
ISGB
Les formulaires
99
Le type radio
ISGB
Les formulaires
100 Le type checkbox
 Ce sont des boutons assez similaires aux boutons radio (bouton à choix unique)
mais, dans le cas présent, plusieurs choix simultanés peuvent être réalisés.
<p>
<h5> Choisir votre matière préférée </h5>
<input type="checkbox" name="m1" value=" algo" id="al">
<label for="al">Algorithmique</label>
<input type="checkbox" name="m2" value=" HTML" id="ht">
<label for="ht"> HTML 5 </label>
</p>
ISGB
Les formulaires
101
Le type checkbox
ISGB
Les formulaires
102
Le type button
 Un bouton classique peut être créé avec un élément <input> de type

button. Ce type de bouton ne valide pas un formulaire.
 <input type="button"value="Annuler">
ISGB
Les formulaires
103
Le type reset
 Un contrôle de type reset est un simple bouton réinitialisant tous les
champs du formulaire à leur état initial.
<p>
<label for="prenom">Prénom : </label>
<input type="text" name="prenom" id="prenom">
<input type="reset" value=" Remettre à Zero" >
</p>
ISGB
Les formulaires
104
Le type submit
 La variante de bouton de type submit est la plus utile, car elle permet de valider le
formulaire. Il déclenche la validation complète du formulaire qui le contient, et
son envoi à l'adresse spécifiée dans l'attribut action de ce formulaire.
<form method="post" action="authentification.php">
<label for="login">Identifiant : </label>
<input type="email" id="login">
<input type="submit" value=" valider" >
</form>
ISGB
Les formulaires
105
Le type image
 C'est un bouton graphique pour
soumettre le formulaire.
 <input type="image" src="b.png"
name="bouton">
ISGB
Les formulaires
106
Le type file
 Le type file prend en charge le
transfère des fichiers (file) du
poste de l'utilisateur vers un
ordinateur de type serveur. Il est
la plupart du temps représenté
par un champ texte listant ces
fichiers, associé à un bouton
Parcourir... ou Choisissez un
fichier.
 <input type="file"
name="monfichier">
ISGB
Les formulaires
107
Le type date
 Le type date permet de saisir une

date (jour, mois, année).
 <input type="date"
name="datedenaissanc>
ISGB
Les formulaires
108
Le type time
 Le type time de saisir une heure .


<input type="time"
name="heurecontact">
ISGB
Les formulaires
109
Le type datetime
 Le type datetime permet saisir une date

et une heure, basée sur l'heure UTC
(heure, minute, seconde et fraction de
seconde.
 <input type="datetime"
name="evenement">
ISGB
Les formulaires
110
Le type month
 Le type month permet de saisir un mois et
une année
 <input type="month“ name="mois">
ISGB
Les formulaires
111
Le type week
 Le type week est très semblable à month, à la

différence que l'objet de ce champ – comme son
nom l'indique – est une semaine.
 <input type="week" name="semaine">
ISGB
Les formulaires
112
Le type number
 Un champ de type number consacre

son existence aux valeurs
numériques, éventuellement situées
dans un intervalle spécifié par les
attributs min et max.
 <input type="number" name="age">
ISGB
Les formulaires
113
Le type color
 Le type color permet de spécifier une couleur.
Il offre une interface de sélection de cour ne
nécessitant pas des fonctionnalités autre
qu'accepter des couleurs en tant que texte.
<input type="color" name="palettedecouleurs"

value=”#FF0000">
ISGB
Les formulaires
114
La balise<datalist>
 La balise <datalist> ajoutée à une ligne de
texte ouvre une liste de suggestions
d'encodage au focus de celle-ci. L'utilisateur
peut retenir une suggestion ou encoder une
valeur de son choix.
 Exemple
 <form action=""> Choisir un fruit :
 <input type="text" list="fruits">
 <datalist id="fruits">
 <option value="Orange"></option>
 <optionvalue="Pomme"></option>
 <optionvalue="Poire"></option>
 <optionvalue="Prune"></option>
 </datalist>
ISGB
 </form>
Les formulaires
115
La balise<textarea>
 La balise <textarea>
représente un champ de
saisie à plusieurs lignes,
permettant l'édition d'un
texte simple.
 La balise <textarea>
possède la liste des
attributs suivants :
ISGB
Les formulaires
116
La balise<textarea>
 Exemple
 <body>
 <form action="">
 <p>Commentaires : </p>
 <textarea rows="4"
cols="30"></textarea>
 </form>
 </body>
ISGB
Les formulaires
117 La balise Select
 Il s'agit d'une liste de choix, le plus

souvent déroulante, parmi plusieurs
éléments<option> dont la valeur est
définie individuellement par l'attribut
value.
ISGB
Les formulaires
118 La balise Select
 <p>votre navigateur préféré :
 <select>
 <option value="1">Internet Explorer</option>
 <option value="2">Firefox</option>
 <option value="3">Safari</option>
 <option value="4">Opera</option>
 <option value="5">Google Chrome</option>
 </select>
 </p>
 </form>
ISGB
Les formulaires
119
La balise<option>
 La balise <option> représente une option
individuelle d'une liste de choix
<select>.
ISGB
Les formulaires
120
La balise<option>
 <select size="4" multiple>
 <option>Moins de 20 ans</option>
 <option>De 20 à 40ans</option>
 <option>De 40 à 60ans</option>
 <option>Plus de 60ans</option>
 </select>
 </form>
ISGB
Les formulaires
121
La balise<optgroup>
 La balise <optgroup> permet de
regrouper des options d'un formulaire
web au sein d'un élément <select>.
ISGB
Les formulaires
122 La balise< optgroup >
 <select>
 <optgroup label="Groupe1">
 <option>Option1.1</option>
 </optgroup>
 </optgroup>
 </optgroup>
 </select>
 </form
ISGB
Les formulaires
123
La balise<button>
 La balise <button> est utilisée pour créer

un contrôle interactif ayant la forme d'un
bouton.
ISGB
Les formulaires
124
La balise<progress>
 La balise <progress> est utilisée pour
visualiser l'avancement d'une tâche. Les
spécificités de l'affichage sont gérées par le
navigateur. Dans la majeure partie des cas,
le navigateur affiche une barre de
progression.
 Exemple
 <p> Barre de progression :
 <progress value="70" max="100"> 70%
</progress></p>
 La figure suivante montre le résultat
obtenu.
ISGB
125 Quelques nouveaux attributs ajoutés
avec HTML5
 L'attribut placeholder permet l'affichage d'un

texte indicatif dans un champ, qui s'efface
lorsque l'utilisateur obtient le focus (en cliquant
ou naviguant au clavier). Le texte a pour vocation
de présenter des exemples de ce que l'utilisateur
peut entrer dans le champ.
ISGB
126 L'attribut autofocus
 L'attribut autofocus donne le focus directement au

champ au chargement de la page. La page ne doit
évidemment comporter qu'un seul élément portant cet
attribut.
 Exemple
 <input type="search" name="recherche" autofocus>
 La figure suivante montre le résultat obtenu.
ISGB
127 L'attribut autocomplete
 L'attribut autocomplete définit la façon dont l'autocomplétion du navigateur doit agir sur le
champ. Les valeurs possibles sont on (activée) ou off(désactivée).
 Exemple
 <input type="search" name="recherche" autocomplete ="off">
ISGB
128 L'attribut required
 L'attribut required rend la complétion d'un

champ obligatoire, signifiant que le navigateur
ne doit pas permettre la validation du formulaire
si ce dernier reste vide.
 Exemple
 <input type="tel" name="telephone" required>
 <input type="submit" value="Valider">
 </form>
ISGB
129 L'attribut multiple
 L'attribut multiple est un booléen signifiant que la saisie de plusieurs valeurs est possible.
Dans le cas d'un champ de type file, le navigateur autorise la sélection de plusieurs fichiers
simultanément pour le même élément HTML.
 Exemple
 <input type="email" name="adresses" multiple>
ISGB
130 L'attribut pattern
 L'attribut pattern est associé aux champs de texte pour

tester leur valeur grâce à une expression régulière. Les
valeurs incorrectes bloquent la validation du formulaire.
 Exemple
 <form action="" >
 
 <input type="text" name="login" pattern="[a-z0-9]">
 <input type="submit" value="Valider">
 </form>
ISGB

Cours 2 Partie 2

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours 2 Partie 2

Transféré par

Droits d'auteur :

Formats disponibles

86 Intérêt d'un formulaire

 Les formulaires occupent une place prépondérante dans la conception et l'exploitation

 La balise <form> ... </form> a comme unique fonction de déclarer au navigateur

 La balise <fieldset> permet un regroupement de champs de saisie en catégories

 La balise <legend> représente un titre ou une légende explicative pour le reste du

 Un <label> associe une légende texte à un élément de formulaire.

 L'élément <input> est particulier, car il revêt de multiples apparences et fonctionnalités,

 C'est le type le plus classique, il permet

 Confrère du type text, un champ

Le type tel

 Un bouton classique peut être créé avec un élément <input> de type

 Le type date permet de saisir une

 Le type time de saisir une heure .

 Le type datetime permet saisir une date

 Le type week est très semblable à month, à la

 Un champ de type number consacre

<input type="color" name="palettedecouleurs"

 Il s'agit d'une liste de choix, le plus

 La balise <button> est utilisée pour créer

 L'attribut placeholder permet l'affichage d'un

 L'attribut autofocus donne le focus directement au

 L'attribut required rend la complétion d'un

 L'attribut pattern est associé aux champs de texte pour

Vous aimerez peut-être aussi