Université de la Manouba

Ecole Supérieure d’Economie Numérique

Programmation Web 1

Chapitre II : LE LANGAGE HTML

HyperText Markup Language
Partie 2
Année Universitaire 2018-2019

Responsable du cours: Dr. Yamna Ettarres

78
Les formulaires
1. Intérêt des formulaires
2. Exemple de formulaires
3. La balise de base <form> </form>
4. La balise <input />
5. La balise <input type=« text » />
6. La balise <label></label>
7. La balise <input type=« password » />
8. La balise <textarea> </textarea>
9. La balise <input type=« checkbox » />
10. La balise <input type=« radio » />
11. La balise <select> </select>
12. La balise <fieldset> </fieldset>
13.Nouveaux attributs HTML5
14. La balise <input /> , les boutons
15. Autres Nouveautés HTML5

https://www.w3.org/TR/html52/sec-forms.html 79
Intérêt des formulaires
 Les formulaires permettent aux auteurs des pages Web d’instaurer une
communication avec les utilisateurs. Un formulaire peut servir à recueillir les
avis des visiteurs, leurs e-mails en vue d'une newsletter. Mais ça peut être
aussi un bon de commande, un sondage, un jeu, etc...
 Un formulaire définit en HTML peut contenir :
 Des zones de saisie de texte
 Des cases à cocher
 Des boutons radio
 Des listes déroulantes
 Des boutons
 …

 L’utilisateur saisit des informations en remplissant des champs ou en cliquant

sur des boutons, puis appuie sur un bouton de soumission (submit) pour
l'envoyer à un script stocké sur un serveur et écrit dans un langage de
programmation comme PHP, JSP, ASP, etc. 80
Exemple de formulaires

81
La balise <form> </form>
Les formulaires sont délimités par la balise <form> ... </form>, une balise qui permet
de regrouper plusieurs éléments du formulaire (boutons, champs de saisie,...).
Syntaxe : <form name="…" method="…" action="…" > … </form>
NAME : Nom du formulaire. Il est nécessaire en cas d'utilisation de JavaScript pour le
contrôle de saisie, par exemple.
: Adresse (URL ou e-mail) vers laquelle les données saisies vont être envoyées.
ACTION
Exemples :
1. action = "http://monserveur.com/php/monCode.php"
2. action = "mailto :webmaster@nomserveur.com"
METHOD : Il existe deux types de méthodes d’envoi du contenu du formulaire :
 GET : Elle correspond à un envoi des données codées dans l'URL, et séparées de
l'adresse du script par un point d'interrogation.
 POST : Le contenu du formulaire est envoyé au serveur en tant que bloc de
données pour y être traité par le CGI qui le recevra. Elle correspond à un envoi
de données stockées dans le corps de la requête (Recommandée).

82
La balise <input />
La balise input permet de créer plusieurs éléments "interactifs".
Syntaxe :
<input type="Type du champ" value="Valeur par défaut" name="Nom de l'élément" />
 L'attribut NAME est essentiel car il permettra au script CGI de connaître le
champ associé à la paire nom/valeur, c'est-à-dire que le nom du champ
sera suivi du caractère "=" puis de la valeur entrée par l'utilisateur ou dans le
cas contraire de la valeur par défaut repérée par l'attribut VALUE.
 L'attribut TYPE permet de préciser le type d'élément que représente la balise
INPUT, les valeurs que ce champ peut prendre sont : TEXT, CHECKBOX,
HIDDEN, RADIO, PASSWORD, FILE, RESET, SUBMIT, BUTTON, …

83
La balise <input type=« text » />
Il s'agit d'un champ de saisie de texte (Zone de texte monoligne). La taille du
champ peut être définie à l'aide de l'attribut SIZE et la taille maximale du texte saisi
grâce à l'attribut MAXLENGTH.
Attribut READONLY : le champ se trouve alors en mode lecture seule c'est-à-dire
que le texte par défaut qui s'y trouve ne peut en être effacé/modifié.
 Syntaxe :
<input type="text" name="nom_du_champ" size="taille"
maxlength="taille_maximum" value= valeur du texte_par_défaut" />
Exemple :
<form method="post" action="traitement.php" name= " formNom" >
<p>Votre Nom: <input type="text" name="nom" size="30"
maxlength="20" value="Nom?"/></p>
</form>
Résultat:

84
La balise <label></label>
 Les libellés: Pour créer des zones de texte liées avec le texte
d’indication, il faudra utiliser la balise <label> </label>
 En cliquant sur le texte d’indication, le curseur se place
automatiquement dans la zone de texte correspondante.
 Pour faire cela:
 Donner un nom à la zone de texte, non pas uniquement avec
l'attribut name mais avec l'attribut id (même valeur dans le cas général).
 Pour lier le label au champ, il faut lui donner un attribut for qui a la même
valeur que l'id du champ
 Exemple
<label for="pseudo">Votre pseudo</label> :
<input type="text" name="pseudo" id="pseudo" />
 Résultat:
En cliquant sur l’indication « Votre pseudo » , le curseur se place
automatiquement dans la zone de texte 85
La balise <input type=« text » />
 L’attribut placeholder (HTML5) permet de donner une indication sur le contenu du
champ. Cette indication disparaîtra dès qu’on clique à l'intérieur du champ de
texte.
Exemple :
<p> <label for="prenom">Votre prénom :</label>
<input type="text" name="prenom" id="prenom"
placeholder="votre prénom" /></p>

Résultat:

86
Exemple de test- A refaire
<!DOCTYPE html>
<html lang="fr">
<head> <meta charset="utf-8" /> <title>HTMLPLUS</title> </head>
<body>

<form name= "formNom" method="get"

action="traitement.php">
<label for="nom">Votre Nom: </label>
<input type="text" name="nom" id="nom" size="30"
maxlength="20" value="Nom?" placeholder="votre nom"/>
<button type="submit">Envoi</button>
</form>
</body>
</html> 87
La balise <input type=« password » />
 L’attribut type="password" permet de créer des zones de saisie pour des
mots de passe. Il s'agit d'un champ de saisie, dans lequel les caractères
saisis seront masqués par des astérisques ou des points afin de cacher la
saisie.
Attention: Un envoi avec la méthode get affichera le mot de passe dans
l’URL

Exemple :
<label for="pass">Votre mot de passe :</label>
<input type="password" name="pass" id="pass" />

Résultat:

88
La balise <textarea> </textarea>
On utilise le conteneur <textarea> </textarea> pour avoir un espace multi-lignes.

 Attributs :
 NAME : le nom du champ,
 ROWS : le nombres de lignes,
 COLS : le nombres de colonnes,
 READONLY : lecture seule
Si dans votre code vous insérez du texte entre <textarea> </textarea> , alors il se trouvera
par défaut dans le champ. Si le texte est plus grand que la zone de texte, des barres de
défilement apparaissent.

Syntaxe : <TEXTAREA NAME="nom_du_champ"

ROWS="nombre_de_lignes"
COLS="nombre_de_colonnes">
texte par défaut
</TEXTAREA>
89
La balise <textarea> </textarea>

Exemple Résultat
<p>
<label for="ameliorer">
Comment pensez-vous que je puisse
améliorer mon site ?
</label>

<br />

<textarea name="ameliorer"
id="ameliorer" rows="4" cols="50"
readonly>Améliorer ton site ?!Mais enfin
! Il est tellement génialissime qu'il n'est
pas nécessaire de l'améliorer !
</textarea>
</p>

90
La balise <input type=« checkbox » />
Les cases à cocher

Il s'agit de cases à cocher pouvant admettre un état: checked (coché).

Par défaut, la case est non cochée.

Exemple 1 Résultat
<p>
Cochez vos sports préférés :<br />
<input type="checkbox" name="Natation" id="Natation" />
<label for="Natation">Natation</label><br />
<input type="checkbox" name="cyclisme" id="cyclisme" />
<label for="cyclisme">cyclisme</label><br />
<input type="checkbox" name="Ski" id="Ski" checked />
<label for="Ski">Ski</label><br />
<input type="checkbox" name="petanque" id="petanque" />
<label for="petanque">petanque</label>
</p>

Lors de l’envoi : Ski=on

91
La balise <input type=« checkbox » />
Les cases à cocher

Exemple 2 Résultat
<p>
Cochez vos sports préférés :<br />
<input type="checkbox" name="sport" value="Natation"
id="Natation" /> <label for="Natation">Natation</label><br />
<input type="checkbox" name="sport" value="cyclisme"
id="cyclisme" /> <label for="cyclisme">cyclisme</label><br />
<input type="checkbox" name="sport" value="Ski" id="Ski"
checked /> <label for="Ski">Ski</label><br />
<input type="checkbox" name="sport" value="petanque"
id="petanque" /> <label for="petanque">petanque</label>
</p>

Lors de l’envoi : sport=Ski

92
La balise <input type=« radio » />
Les zones d'options ou boutons radio
Il s'agit d'un bouton permettant un choix parmi plusieurs. L'ensemble des boutons radios doivent porter la
même valeur pour l’attribut NAME. Un attribut checked pour un des boutons permet de préciser le bouton
sélectionné par défaut.
Exemple
<p>
Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br />
<input type="radio" name="age" value="moins15" id="moins15" />
<label for="moins15">Moins de 15 ans</label><br />
<input type="radio" name="age" value="medium15-25" id="medium15-25" checked />
<label for="medium15-25">15-25 ans</label><br />
<input type="radio" name="age" value="medium25-40" id="medium25-40" />
<label for="medium25-40">25-40 ans</label><br />
<input type="radio" name="age" value="plus40" id="plus40" />
<label for="plus40">Encore plus vieux que ça ?!</label>
</p>
Résultat

L’id choisi est différent de name:

•Les valeurs de name doivent être identiques 93
•Les valeurs de id doivent être uniques
La balise <select> </select>
Les listes déroulantes
 Quand on a un choix à faire entre plusieurs valeurs différentes, il vaut mieux utiliser les listes déroulantes avec le
conteneur <select> </select> dont les attributs sont NAME : le nom de la liste, SIZE (facultatif) dont la valeur (unité
par défaut) signifie qu‘il s’agit d’une liste déroulante sinon c'est une liste normale mais avec barre de
défilement, MULTIPLE (facultatif) qui signifie qu'il est possible de sélectionner plusieurs valeurs. Si MULTIPLE n'est pas
spécifié, il ne sera possible de faire qu'un seul et unique choix.
 Pour chaque élément, nous avons besoin d’une balise <option> </option> . Les attributs de cette dernière sont
VALUE : valeur du choix sélectionnable c'est-à-dire le texte qui sera envoyé et SELECTED (facultatif) qui signifie
que le choix correspondant sera sélectionné par défaut.

Exemple:
<p><label for="pays">Dans quel pays habitez-vous ?</label><br />
<select name="pays" id="pays">
<option value="france">France</option>
<option value="japon">Japon</option>
<option value="Tunisie" selected>Tunisie</option>
</select> </p>
94
La balise <select> </select>
Les listes déroulantes et les groupes
 Vous pouvez aussi grouper vos options avec la
balise <optgroup> </optgroup>. Les groupes ne peuvent
pas être sélectionnés. Seuls les éléments le sont.
 Exemple:
<p>
<label for="GroupePays">Dans quel pays habitez-vous
<optgroup label="Afrique">
?</label><br />
<option value="Tunisie"
<select name="pays" id="GroupePays"> selected>Tunisie</option>
<option value="Algérie">Algérie</option>
<optgroup label="Europe"> </optgroup>
<option value="france">France</option> </select>
</p>
<option value="espagne">Espagne</option>
</optgroup>
<optgroup label="Amérique">
<option value="canada">Canada</option>
<option value="etats-unis">Etats-Unis</option>
</optgroup> 95
La balise <fieldset> </fieldset>
Regrouper les champs
 Si votre formulaire comporte beaucoup de champs, il est utile de les regrouper au sein de
plusieurs balises <fieldset></fieldset>. Chaque <fieldset> peut contenir une légende avec
la balise<legend>.

<fieldset> <fieldset>
<legend>Vos coordonnées</legend> <legend>Votre souhait</legend>
<!-- Titre du fieldset --> <!-- Titre du fieldset -->
<p><label for="nom">Quel est votre nom <p>Faites un souhait :
?</label> <input type="radio" name="souhait" value="riche"
<input type="text" name="nom" id="nom" /> id="riche" /> <label for="riche">Etre riche</label>
<label for="prenom">Quel est votre prénom <input type="radio" name="souhait"
?</label> value="celebre" id="celebre" /> <label for="celebre">Etre
<input type="text" name="prenom" célèbre</label>
id="prenom" /> <input type="radio" name="souhait" value="sante"
<label for="email">Quel est votre e-mail id="sante" /> <label for="sante">Etre en bonne
?</label> santé</label>
<input type="email" name="email" id="email" </p>
/> </fieldset>
</p>
</fieldset>

96
Nouveaux attributs HTML5
 Sélectionner automatiquement un champ
 Placer automatiquement le curseur dans l'un des champs avec l'attribut autofocus.
Dès que le visiteur chargera la page, le curseur se placera dans ce champ.
 <input type="text" name="genre" id="genre" placeholder="votre genre" autofocus />

 Rendre un champ obligatoire

 Vous pouvez faire en sorte qu'un champ soit obligatoire en lui donnant
l'attribut required.
<p><label for="prenom2">Quel est votre prénom ?</label>
<input type="text" name="prenom2" id="prenom2" required /></p>

Test réalisé avec Opera 16

Test réalisé avec Google Chrome 30

Test réalisé avec Firefox 24

Test réalisé avec IE 10 97
La balise <input />
Les boutons
 type=" BUTTON " : Pour des besoins de contrôle du formulaire avec
JavaScript, vous pouvez être amené à créer un bouton. Le texte du
bouton peut être précisé grâce à l'attribut value.
Syntaxe : <input type="button" value="texte_à_afficher"
onClick="fonction_JavaScript()" />
Exemple :
<input type="button" value="Cliquez ici !" onClick="alert('Bonjour');" />
Résultat :
type=" RESET" : il
s'agit d'un bouton de remise à zéro permettant
uniquement de rétablir l'ensemble des éléments du formulaire à leurs
valeurs par défaut.
Syntaxe : <input type="reset" value ="texte_à_afficher"/>
Exemple : <input type="reset" value="Effacer"/>
98
Résultat :
La balise <input />
Les boutons
type=" SUBMIT" : il s'agit du bouton de soumission permettant l'envoi du
formulaire.
Syntaxe : <input type="submit" value ="texte_à_afficher" />
Exemple : <input type="submit" value="Envoyer" />
Résultat :
type="image" : équivalent du bouton submit, présenté cette fois sous
forme d'image. Rajoutez l'attribut src pour indiquer l'URL de l'image.
Syntaxe : <input type="image" src= " URL de l’image" alt= " Description image" />
Exemple : <input type="image" src="../../images/summary.jpg"
alt="bouton envoi"/>
Résultat :
99
La balise <button> </button>
 La balise <button> définit un bouton cliquable.
 Un texte et/ou une image peuvent être mis entre <button> et </button>
 Le type peut être submit, reset, button
 Exemples:
 <button type="button" name="bt1" onclick="alert('Bonjour à tous')" >hello</button>
 <button type="button" name="bt2" onclick="alert('Bonjour à tous!')"
autofocus>Bouton cliquable et ayant le focus</button>
 <button type="button" name="bt3" onclick="alert('Bonjour à tous!')" >Bouton avec
image<img src="images/bouton.jpg"></button>

Pour plus de détails, consulter :

https://www.w3.org/TR/html5/forms.html#the-button-element

100
Autres Nouveautés HTML5
Attention au support des navigateurs
Zones de saisie enrichies
 E-mail  Couleur
 <input type="email" />  <input type="color" />
 Une URL  Date (type= date , time ,
 <input type="url" /> week, month, datetime,
datetime-local )
 Numéro de téléphone
 <input type="date" />
 <input type="tel" />
 Recherche
 Nombre
 <input type="search" />
 <input type="number" />
 min : valeur minimale autorisée.
 max : valeur maximale autorisée.
 step : c'est le « pas » de déplacement.
 Un curseur
 <input type="range" />

102
<datalist>, HTML5 Form Element
 Method of setting a list of options for a user to select in a text field, while leaving the
ability to enter a custom value. The <datalist> element specifies a list of pre-defined
options for an <input>element.
 Users will see a drop-down list of the pre-defined options as they input data.
 The list attribute of the <input> element, must refer to the id attribute of
the <datalist> element.
 Example:
<input type="text" list="pays" placeholder="Choisir votre pays" name="mon_pays"/>
<datalist id="pays">
<option value="Tunisie" ></option>
<option value="Algérie"></option>
<option value="Maroc"></option>
<option value="Lybie"></option>
<option value="Mauritanie"></option>
Lors de l’envoi:
</datalist> mon_pays=Tunisie 103
HTML5 <output> Element (1)
 The <output> element represents the result of a calculation
 HTML oninput Event Attribute: Execute a JavaScript when a user
writes something in an <input> field
 valueAsNumber returns double, the value of the element(null if
conversion is not possible)
Example 1:
<form oninput="o.value = ax.valueAsNumber +
by.valueAsNumber">
<input name="ax" type="number"/> +
<input name="by" type="number"/> =
<output name="o" for="ax by"></output>
</form>

104
HTML5 <output> Element (2)
Example 2 with range
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">

0<input type="range" id="a" name="a" value="5" min="0"

max="10" >10
+
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
105
HTML5 <output> Element (3)
Example 3 with range
<form oninput="x.value=parseInt(nba.value)+parseInt(b.value)">
<input type="range" name="nba" id="nba" min="0" max="5" step="1" value="0"
onChange="showValue(this.value)" />
<span id="range2">0</span>+ <input type="number" id="nbb" name="nbb"
value="50"> = <output name="x" for="nba nbb"></output>
</form>
<script>
function showValue(newValue){
document.getElementById("range2").innerHTML=newValue;
}
</script>

106
Attribut pattern (1)
 L'attribut pattern offre un format (expression régulière) pour un champ d'entrée
qui est utilisé pour valider le contenu du champ.
 NB:
 [A-Z] [a-z]: permet de spécifier l’intervalle des lettres de l’alphabet
 [0-9] : permet de spécifier l’intervalle des nombres décimaux
 {min,max} permet de spécifier l’intervalle du nombre de valeurs
 Exemple :
<form> <input type="text" id="empID" name="EmployeeID"
required pattern="[A-Z]{2}[0-9]{4}"
title="ID d'employé commençant par deux lettres majuscules
suivies de quatre chiffres">
<input type="submit" value="Envoyer" />
</form>
Attribut pattern (2)

 Vous pouvez utiliser l'attribut pattern avec les types

<input> suivants :
text
search
url
telephone
email
password
Attribut pattern (3)

Date de consultation : 16/10/2018 109

La famille HTML5?

La famille HTML5 comprend les

composants suivants :
HTML5
Feuilles de style en cascade
version 3 (CSS3)
JavaScript

110