Institut Supérieur Des études Technologiques De Kairouan
Support de Cours
Programmation Web 1
Mr Allani Abderrahim
Année Universitaire 2022-2023 0
LE LANGAGE HTML
HyperText Markup Language
1
Objectifs
Apprendre les balises HTML5
Apprendre à insérer différents objets dans
une page HTML5
Paramétrer les différents objets
2
Les listes
1.Présentation des listes
2.Les listes <ol> </ol>
3.Les listes <ul> </ul>
4.Imbrication de listes
5.Listes de définitions
3
Présentation des listes
Les listes nous permettent de mieux structurer le texte et d'ordonner nos
informations.
Les listes non ordonnées ou listes à puces <ul></ul>
Les listes ordonnées ou listes numérotées <ol></ol>
Chacun des éléments de la liste doit figurer entre <li></li>
Exemple: <ul> <ol>
<li>Fraises</li> <li>Fraises</li>
<li>Framboises</li> <li>Framboises</li>
<li>Cerises</li> <li>Cerises</li>
</ul> </ol>
Résultat
4
Les listes <ol> </ol>
Attributs spécifiques à <ol>
Exemple: Résultat
<ol start="2" type="A">
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ol>
Exemple: Résultat
<ol start="3" type="i" reversed>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ol> 5
Les listes <ul> </ul>
Elle ne dispose pas d’attributs spécifiques contrairement à <ol>,
mais l’apparence par défaut de ces deux types de listes peut être
modifiée grâce à la propriété CSS list-style-type, qui adopte entre
autres les valeurs disc (défaut), square, circle pour les puces.
Code CSS
ul.carre{
list-style-type: square;
} Résultat
Code HTML
<ul class="carre">
<li>Fraises</li>
<li>Framboises</li>
<li>Cerises</li>
</ul>
6
Imbrication de listes
Nous pouvons créer des listes imbriquées
Une liste de deuxième niveau devra forcément être placée dans
un <li>.
Exemple: Résultat
7
Les listes de définitions
La liste de définitions fait intervenir les balises <dl> (description list), <dt> (pour
délimiter un terme) et <dd> (pour délimiter la définition de ce terme).
Exemple:
<dl>
<dt>html</dt>
<dd>» langage utilisé pour affiché du contenu sur le web</dd>
<dt>balise</dt>
<dd>» élément présentant certaines fonctionnalités</dd>
<dt>attribut</dt>
<dd>» élément spécifique à une balise pouvant prendre certaines valeurs</dd>
<dd>» propriété d'une balise</dd>
</dl>
Résultat
8
Les images
1.Format d’images
2.Insertion d’une image
3.Les figures
9
Format d’images
Le JPEG
Les images au format JPEG (Joint Photographic Expert Group) sont
très répandues sur le Web. Ce format est conçu pour réduire la taille
du fichier. Elles peuvent comporter plus de 16 millions de couleurs.
Extension .jpg ou .jpeg.
Le PNG
Le format PNG (Portable Network Graphics) est adapté à la plupart
des graphiques. Le PNG a été inventé pour concurrencer le GIF. Le
PNG peut aller jusqu'à plusieurs millions de couleurs.
Le GIF
Le format GIF est limité à 256 couleurs. Le GIF peut être animé.
10
Insertion d’une image
Choisissez bien le nom de votre image: fichiers avec des noms en
minuscules, sans espace ni accent, par exemple : mon_image.png.
La balise <img /> doit être accompagnée de deux attributs
obligatoires:
src : il permet d'indiquer l’adresse de l'image que l'on veut insérer.
alt : cela signifie « texte alternatif », un court texte qui décrit ce
que contient l'image. Ce texte sera affiché à la place de l'image
si celle-ci ne peut pas être téléchargée, ou dans les navigateurs
de personnes handicapées (non-voyants) qui ne peuvent pas «
voir » l'image. Cela aide aussi les robots des moteurs de recherche
pour les recherches d'images.
Les attributes: align, border, hspace, longdesc, et vspace ne sont
plus acceptés en HTML5.
11
Insertion d’une image
Ajouter une infobulle
L'attribut title permet d'afficher une bulle (facultatif, contrairement
à alt).
Résultat
Exemple
<p>
Voici le logo de HTML5:<br />
<img
src="../../images/HTML5_sticker.png"
alt="logo de HTML5"
title="I've seen the Future. It's in my
Browser" />
</p>
12
Les figures
Les figures peuvent être de différents types :images, codes
source, citations ;
En HTML5, on dispose de la balise <figure> </figure>
Une figure est le plus souvent accompagnée d'une légende
ajoutée avec la balise <figcaption> </figcaption > à
l'intérieur de la balise <figure>
Une figure peut comporter plusieurs images
Exemple
<figure>
<img src="../../images/HTML5_sticker.png"
alt="logo de HTML5"
title="I've seen the Future. It's in my Browser" />
<figcaption>Fig1. Logo de HTML5:</figcaption>
</figure>
13
Les liens hypertexte
1.Un lien vers un autre site
2.Un lien vers une page de votre site
3.Un lien vers une ancre
4.Un lien qui affiche une infobulle au survol
5.Un lien qui ouvre une nouvelle fenêtre
6.Un lien de type mailto
14
Un lien vers un autre site
La balise <a> </a> sera utilisée avec l’attribut, href, pour
indiquer vers quelle page le lien doit conduire.
Il s’agit d’un lien absolu qui doit commencer avec le nom
du protocole
Exemple:
<p>Souhaitez-vous visiter
<a href="http://ent.uvt.rnu.tn">ENT</a> pour accéder à
votre espace de cours de développement web?</p>
Résultat
15
Un lien vers une page de votre site
La balise <a> </a>
sera utilisée avec
l’attribut, href, pour
indiquer vers quelle
page de votre site le
lien doit conduire.
Exemple:
<p>Souhaitez-vous visiter
la
<a href="page2.html">
page 2</a>?</p>
Les différents liens relatifs 16
Un lien vers une ancre
La balise <a> </a> sera utilisée avec l’attribut, href, pour indiquer vers
quelle ancre (emplacement nommé unique) le lien doit conduire.
Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui
va alors servir de repère: donner un nom à l'ancre. (Évitez de créer
des id avec des espaces ou des caractères spéciaux).
Cela nous servira ensuite pour faire un lien vers cette ancre.
Exemple :
Ancre nommée mon_ancre
<h1 id="mon_ancre">Titre</h1>
Lien: L'attribut href contiendra un dièse (#) suivi du nom de l'ancre
<p><a href="#mon_ancre">Aller vers l'ancre</a></p>
17
Un lien qui affiche une infobulle au survol
Utile pour informer le visiteur avant même qu'il n'ait cliqué sur le lien.
Exemple :
<p>Souhaitez-vous visiter <a href="http://ent.uvt.rnu.tn"
title="Environnement numérique de travail">ENT</a> pour accéder à
votre espace de cours de développement web?</p>
Résultat
18
Un lien qui ouvre une nouvelle fenêtre
Il est possible de « forcer » l'ouverture d'un lien dans une nouvelle
fenêtre ou un nouvel onglet (Selon la configuration du navigateur.
Vous ne pouvez pas choisir entre l'ouverture d'une nouvelle fenêtre
ou d'un nouvel onglet).
Pour cela, on rajoutera target="_blank" à la balise <a>
Exemple :
<p>Souhaitez-vous visiter <a href="http://ent.uvt.rnu.tn"
target="_blank">ENT</a> pour accéder à votre espace de cours de
développement web?</p>
19
Un lien de type mailto
Un lien pour envoyer un email
Un lien de messagerie (e-mail) permet d’ouvrir le logiciel de messagerie
associé au navigateur
Exemple :
<p><a href="mailto:[email protected]">Ecrivez-moi</a></p>
Un lien pour télécharger un fichier
Même principe que pour un lien vers une page web, mais en indiquant cette
fois le nom du fichier à télécharger.
Exemple:
<p><a href="monfichier.zip">Télécharger le fichier</a></p>
Le navigateur, voyant qu'il ne s'agit pas d'une page web à afficher, va lancer
la procédure de téléchargement lorsqu'on cliquera sur le lien.
20
Les tableaux
1.Construire un tableau
2.En-tête de colonne
3.Titre d’un tableau
4.Présentation des gros tableaux
5.Fusion des colonnes et des lignes
21
Construire un tableau
La balise <table> </ table > définit le tableau, elle contient deux
autres balises :
<tr></tr> : décrit une ligne du tableau (tr = table row).
<td></td> : définit une cellule du tableau (td = table data)
Ces trois balises sont toujours imbriquées les unes dans les autres
<td> est contenue dans <tr> qui est imbriquée dans <table>.
En HTML, un tableau se construit ligne par ligne. Dans chaque ligne
(<tr>), on indique le contenu des différentes cellules (<td>).
Attention à la fermeture des balises
22
Construire un tableau
Construire un tableau revient à décrire chacune des lignes de haut en
bas, puis chaque cellule de la ligne de gauche à droite.
Exemple: Résultat:
<table>
<tr>
<td>Nom</td>
<td>Prénom</td>
</tr>
<tr> Pas de bordures!!!
<td>Ben Ahmed</td>
<td>Walid</td>
</tr>
<tr>
<td>Amri</td>
<td>Ahlem</td>
</tr>
</table>
23
Construire un tableau
Afin d’afficher les bordures, il faudra ajouter un code CSS
Code CSS
table
{
border-collapse: collapse; /* Les bordures du tableau seront collées */
}
td,th
{
border: 1px blue solid;
}
Résultat:
24
En-tête de colonne
En-tête de colonne <th> </th> (th = table header)
Identique à <td> mais est considérée comme en-tête, donc
automatiquement centrée et gras
Exemple: Résultat:
<table>
<tr>
<th>Nom</th>
<th>Prénom</th>
</tr>
<tr>
<td>Ben Ahmed</td>
<td>Walid</td>
</tr>
<tr>
<td>Amri</td>
<td>Ahlem</td>
</tr>
</table>
25
Titre d’un tableau
<caption> Titre du tableau Exemple:
<table>
</caption> <caption>Liste des étudiants</caption>
Il est possible de <tr>
<th>Nom</th>
changer la position du <th>Prénom</th>
titre avec la propriété </tr>
CSS caption-side qui <tr>
<td>Ben Ahmed</td>
peut prendre deux <td>Walid</td>
valeurs : </tr>
<tr>
top : le titre sera <td>Amri</td>
placé au-dessus du <td>Ahlem</td>
</tr>
tableau (par défaut) ; </table>
bottom : le titre sera
Résultat:
placé en dessous du
tableau.
26
Titre d’un tableau- en bas
Code CSS Exemple:
<table>
.captionbas <caption class="captionbas" >Liste des
étudiants</caption>
{ <tr>
<th>Nom</th>
caption-side:bottom; <th>Prénom</th>
} </tr>
<tr>
<td>Ben Ahmed</td>
<td>Walid</td>
</tr>
<tr>
<td>Amri</td>
<td>Ahlem</td>
</tr>
</table>
Résultat:
27
Présentation des gros Exemple:
<table>
tableaux
<caption>Liste des étudiants</caption>
<thead> <!-- En-tête du tableau -->
<tr>
Si votre tableau est assez gros, vous <th>Nom</th>
aurez tout intérêt à le découper en <th>Prénom</th>
plusieurs parties. Pour cela, il existe des </tr>
balises HTML qui permettent de définir </thead>
<tfoot> <!-- Pied du tableau -->
les trois « zones » du tableau : <tr>
l'en-tête (en haut) : il se définit avec <th>Nom</th>
<th>Prénom</th>
les balises <thead></thead> ; </tr>
le corps (au centre) : il se définit avec </tfoot>
<tbody>
les balises <tbody></tbody> ; <tr>
<td>Ben Ahmed</td>
le pied du tableau (en bas) : il se
<td>Walid</td>
définit avec les balises <tfoot></tfoot>. </tr>
<tr>
<td>Amri</td>
<td>Ahlem</td>
</tr>
</tbody>
</table>
28
Fusion des colonnes et des lignes
L'attribut colspan=“n” indique que la cellule • L'attribut rowspan=“n” indique que
s’étend sur n colonnes : la cellule s’étend sur n lignes :
<table> <table>
<tr> <tr>
<td colspan="2">Cellule 1</td> <td rowspan="2">Cellule 1</td>
</tr> <td>Cellule 2</td>
<tr> </tr>
<td>Cellule 2 </td> <tr>
<td>Cellule 3</td> <td>Cellule 3</td>
</tr> </tr>
</table> </table>
Résultat:
Résultat:
29
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. Zones de saisie enrichies- Nouveautés HTML5
http://www.w3.org/html/wg/drafts/html/master/forms.html#forms
30
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. 31
Exemple de formulaires
32
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 :[email protected]"
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).
33
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, …
34
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é.
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:
35
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 36
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:
37
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:
38
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
Si l'attribut value n‘est pas renseigné, la valeur par défaut sera on 39
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
40
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
41
•Les valeurs de id doivent être uniques
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"/>
42
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 :
43
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>
Résultat :
Pour plus de détails, consulter :
https://www.w3.org/TR/html5/forms.html#the-button-element 44
Zones de saisie enrichies- Nouveautés HTML5
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" />
45
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 46
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 <p>Faites un souhait :
nom ?</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 <input type="radio" name="souhait"
prénom ?</label> value="celebre" id="celebre" /> <label
<input type="text" name="prenom" for="celebre">Etre célèbre</label>
id="prenom" /> <input type="radio" name="souhait" value="sante"
<label for="email">Quel est votre e- id="sante" /> <label for="sante">Etre en bonne
mail ?</label> santé</label>
<input type="email" name="email" </p>
id="email" /> </fieldset>
</p>
</fieldset>
47
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>
48
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>
49
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>
50
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> 51
