Etkkkkkkkkkkk

Chapitre 2
Le langage HTML5
Enseignante : Imen DAOUD

Année universitaire : 2019 – 2020
1
Introduction à HTML 5
Le langage HTML 5:
• HTML (HyperText Markup Language) est un langage de balisage qui
permet de structurer le contenu des pages web dans différents
éléments.
• C'est le langage de base pour la création d'un site web. En effet, c'est
le seul qui est interprété par un navigateur Web standard pour
produire de l’affichage.
2
• Le HTML décrit le document et ses constituants.
• HTML5 est une évolution de la norme HTML regroupant un ensemble
de technologies : SVG, CSS3, WebGL, File API, MathML…
• Le but de cette nouvelle version de HTML est de faciliter le
développement d'interfaces utilisateur riches.
• HTML5 est beaucoup plus orienté applicatif que ses prédécesseurs et
veut permettre de s'affranchir de plugins pour utiliser au maximum
les technologies Web natives pour construire une application riche.
3
HTML est un
langage de
balisage!!
Qu’est ce qu’une
balise?
4
Les balises:
• Les balises HTML sont les éléments de base du codage HTML d’une page web.
• Exemple de balise : <p>
• Les balises de la forme </balise> sont des balises de fermeture.
• Exemple de balise : <p> Ceci est un paragraphe</p>
Les attributs:
• Les attributs permettent d'apporter certaines précisions à des balises.
• La syntaxe utilisée est la
suivante:<balise attribut1="valeur1" attribut2="valeur2" attribut3="valeur3">bla
bla</balise>
• Exemple: <link rel="stylesheet" href="code.css"/>
5
Structure de base d’une page HTML:
La structure la plus simple d’une page web en HTML5 sera composée
d’au minimum 4 balises :
• La balise indiquant le doctype
• La balise <html> en tout début et fin de document
• Les balises <head> et </head> renfermant des informations utiles au
navigateur mais non affichées
• Les balises <body> et </body> qui comme leur nom l’indique
comporte le corps de votre page
6
Les commentaires :
• Lorsque vous codez une page, il est important d’utiliser des
commentaires.
• Ces commentaires ne seront ni visibles sur le navigateur ni interprétés
par celui-ci. Ils vous serviront uniquement à vous repérer sur votre
code.
• Les commentaires se situent entre les signes <!- - et - ->
7
Exemple de document :
8
Validation d’un document :
• Malgré toutes les vérifications auxquelles vous pouvez procéder
personnellement, il peut rester des erreurs de conformité dans votre
code.
• Comme peut le faire un compilateur qui signale les éventuelles
erreurs de syntaxe, les validateurs du W3C et du WHATWG
permettent de vérifier si le code est bien formé et conforme.
• Pour lancer cette validation automatique, vous devez soumettre l’URL
ou le code de vos documents HTML au validateur du W3C accessible à
l’adresse suivante : http://validator.w3.org, ou à celui du WHATWG à
l’adresse : http://html5.validator.nu/.
9
Les Balises HTML 5
La déclaration DOCTYPE :
• La déclaration DOCTYPE, obligatoire dans tout document, Spécifie le
langage ou les règles que la page utilise
• Dans HTML 5, cette déclaration est désormais réduite à sa plus simple
expression par rapport à XHTML : <!DOCTYPE html>
L’élément racine <html>:
• L’élément <html> est l’élément racine du document.
• En HTML 5, son contenu est constitué de
 l’en-tête du document, introduit par la balise <head> et terminé par la balise
</head>
 le corps du document introduit par <body> et terminé par </body>.
10
Les Balises HTML 5
L’élément racine possède les attributs communs dont les plus utiles sont:
 l’attribut lang dont la valeur est un code de langue normalisée qui
indique la langue utilisée par défaut dans la page. Cette valeur sera
reconnue par les moteurs de recherche pour leur permettre
d’indexer les pages du site.
 l’attribut dir qui indique le sens de lecture du texte de la page. Il peut
prendre les valeurs ltr pour le texte qui se lit de gauche à droite
(langues européennes) ou rtl pour le texte qui se lit de droite à
gauche (langues orientales : hébreu, arabe).
Un élément <html> complet tel que nous pouvons l’utiliser s’écrira
donc :
11
Les Balises HTML 5
L’en-tête d’un document : l’élément <head>
• L’élément <head> englobe un certain nombre d’informations utiles au bon
affichage de la page web.
• Ces informations dites métadonnées sont contenues dans six éléments
différents qui ont chacun un rôle bien déterminé.
• Il s’agit des éléments <base>, <link>,<meta>, <script>, <style> et <title>.
• Aucun d’eux n’a de répercussion directement visible dans la page et seul le
contenu de l’élément <title> sera visible, non dans la page mais dans la
zone de titre du navigateur.
• Le bloc d’en-tête a donc la structure suivante, dans laquelle seuls les
éléments <title> et<base> ne doivent figurer qu’une seule et unique fois,
les autres n’ayant pas de limites.
12
Les Balises HTML 5
• Exemple :
13
Les Balises HTML 5
L’adresse de base : l’élément <base />
• Le contenu de cet attribut est une URL qui fournit l’adresse de base
de tous les fichiers utilisés dans la page quand leur adresse est
transmise de manière relative.
• Si nous écrivons le code suivant :<base
href="http://www.funhtml.com/" />Le navigateur ira chercher une
image dont l’URL est indiquée sur le serveur par
/html/images/monimage.gif à l’adresse
:http://www.funhtml.com/html/images/monimage.gif
14
Les Balises HTML 5
Les documents liés : l’élément <link />
• Il définit la relation entre le document courant et une ressource
externe.
• Cette relation est déterminée par les attributs rel, type, href,
hreflang, media et sizes.
• L’attribut rel indique le nom de la relation à établir avec le fichier
externe. Il peut prendre les valeurs suivantes :
• rel="stylesheet" si le fichier externe est une feuille de style.
• rel="alternate" si le fichier est une page alternative (de rechange, proposée aux
visiteurs dans les navigateurs).
• rel="shortcut icon" ou "icon" pour faire référence à une icône
• rel="previous" ou rel="prev" si le fichier désigné est la page précédente dans l’ordre
normal de consultation du site.
• rel="next" si le fichier est la page suivante dans l’ordre normal de consultation du
site.
• rel="help" si le fichier est la page d’aide.
15
Les Balises HTML 5
• L’attribut href contient l’adresse relative ou absolue de la ressource externe
associée.
• A titre d’exemple, nous pouvons écrire les codes suivants pour l’élément
<link> :
• Pour lier une feuille de style : <link rel="stylesheet" href="code.css"/>
• Pour lier un script JavaScript : <link rel="script" href="code.js"/>
• Pour créer une icône dans la barre d’adresse : <link rel="icon" href="/fashion.ico"/>
• Pour créer un lien de dépendance vers un document : <link rel="next"
href="page3.html" /> <link rev="prev" href="page1.html" />
• Pour créer un lien vers la page d’accueil : <link rel= "help" href= "help.html" />
16
Les Balises HTML 5
Les méta-informations : l’élément <meta>
• Les informations contenues dans l’élément <meta> sont destinées au serveur web, aux
navigateurs et aux moteurs de recherche.
• Chaque information est identifiée par un nom (attribut name) et un contenu (attribut
content).
 name="author" désigne le nom de l’auteur de la page sans pour autant créer un
copyright.
Exemple: <meta name= "author" content="Jean Engels" />
 name="keywords" : sert à l’indexation des pages web par les moteurs de recherche
et les annuaires. L’attribut content associé à name contient la liste des mots clé que
vous allez choisir comme les plus représentatifs du contenu du site. Chaque mot ou
expression est séparé des autres par une virgule
Exemple de code :<meta name="keywords" content="HTML 4, XHTML, HTML 5, CSS 2,
CSS 3, design web/>
 name="description". Indique une brève description de l’information contenue dans
le site.
Exemple de code : <meta name="Description" content="Le site du livre HTML 5 et CSS
3de Jean Engels Editions Eyrolles" />
17
Les Balises HTML 5
Le titre de la page : l’élément <title>
• La balise <title> permet de définir le titre qui apparaît dans la barre
de titre située en haut de la fenêtre du navigateur.
Le corps du document : l’élément <body>
• Tout le contenu placé dans cet élément contient les parties visibles du
document, et ceci n’a pas changé avec l’arrivée de l’HTML5.
• La principale modification sur l’élément body c’est l’ajout d’un certain
nombre de nouveaux éléments structurels, et une division des pages
en sections.
Les règles d’or :
• Imbrication : la première balise ouverte doit être la dernière balise
fermée.
• Casse : Toujours utiliser toujours la même casse.
18
Structure complexe et utilisation des
nouvelles balises HTML5
• Pendant des années, la structuration des documents HTML se basait

sur l’élément div
• De nouvelles balises HTML5 rendent le développement de pages web
et d’applications plus facile.
• Parmi les nouvelles fonctionnalités très pratiques de HTML5, nous
citons l’utilisation de balisage sémantique
19
Balisage sémantique
• Les noms des balises sont intuitifs
• Facilite la création et la modification de documents HTML
• Facilite l'interprétation pour les navigateurs Web et d'autres programmes
20
• Ci-dessous, le schéma d’un site classique ainsi que son squelette en
HTML5.
21
22
DOCTYPE
• Le fichier HTML5 doit démarrer avec cette instruction :<!DOCTYPE
html> montrant qu’il n’y a qu’un seul doctype.
• Un DOCTYPE (Document Type Declaration) informe le validateur de la
version HTML que vous utilisez, et doit apparaître en première
position dans chaque page web
Header
• L'élément header définit l'en-tête d'un document, d'une section ou
d'un article.
• Un élément header contient de façon générale les headings (les
éléments h1 à h6 ou l’élément hgroup)
• Il peut aussi contenir d’autres éléments, comme une table de
matières, un formulaire de recherche, ou des logos
23
section
• Définit une section d'un document, tel qu'un chapitre, des parties
d'une thèse ou d'une page Web dont le contenu est distinct
article
• Représente une section indépendante d'un document, d'une page ou
d'un site
• Convient pour du contenu comme des nouvelles ou des articles de
blog, des messages de forum ou des commentaires individuels
24
nav
• Définit un bloc de liens de navigation et est très utile pour créer les
éléments suivants :
• Ensemble de liens de navigation pour la navigation principale d'un
document
• Table des matières
• Fil d'Ariane dans un pied de page
• Liens Précédent-Accueil-Suivant
25
aside
• représente une note, une astuce, un encadré, un extrait, une
remarque incidente, ou quelque chose qui est juste en dehors du
courant principal du récit .
footer
• L'élément footer définit un pied de page dans un document ou une
section, et contient généralement des informations sur le document
ou la section, par exemple le nom de l'auteur, les données de
Copyright, des liens renvoyant à des documents connexes, etc.
26
Balises HTML 5 contenues dans le Body
Les listes :
Le langage HTML définit trois types de listes :

La liste non ordonnée
La liste ordonnée
La liste de définition
27
• les listes non ordonnées ou listes à puces
 <ul></ul> délimite toute la liste
 <li></li> délimite un élément de la liste (une puce).
Exemple: <ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
• Le symbole de la balle ronde est le marqueur par défaut des éléments
de la liste
• Pour modifier le type de liste on utilise la propriété css list-style-type
• Exemple: <ul style="list-style-type:square;">
28
• les listes ordonnées
 <ol></ol> délimite toute la liste
 <li></li> délimite un élément de la liste.
Exemple: <ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
29
• les listes ordonnées : attributs
 L’attribut type définit le type de liste:
 Exemple: <ol type= "A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
30
• les listes ordonnées : attributs
 L’attribut start : la valeur de cet attribut, un nombre entier, définit l'indice à
partir duquel les objets de la liste sont numérotés.
 L’attribut reversed : Cet attribut booléen précise que les objets listés par
l'élément sont affichés avec un ordre inversé
31
• les listes de définition
Exemple: <dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
32
Exercice
33
Les images : notions de base
• Une image raster est composée de pixels.
• Exemple : une photographie
• Formats : JPG, PNG, GIF, BMP
• Une image vectorielle est une image composée de lignes et de
courbes calculées à partir d'expressions mathématiques.
• Exemple : fichier AI Adobe Illustrator
• Formats : PNG ou GIF pour un affichage
sur le Web
34
Les images
• En HTML les images sont définies par la balise <img> .
• La balise <img> est vide, elle contient uniquement des attributs, et
n’admet pas de balise fermante
• Les attributs src et alt sont tous deux nécessaires pour que le code
soit pleinement valide.
• L’attribut src specifie l’URL (web address) de l’image:
Exemple: <img src="images/redball.jpg" alt="graphique de boule
rouge" />
35
Les images
• L’attribut alt offre un texte alternatif pour l’image et ceci dans le cas
ou l’utilisateur pour une raison ou une autre n’arrive pas à voir
l’image (en raison de faible connexion, une erreur dans l’attribut src,
ou si l’utilisateur utilise un lecteur d’écran ).
• Le groupe W3C exige l'attribut alt pour faciliter l'accessibilité des

personnes présentant un handicap.
36
Les éléments figure et figcaption:
• L'élément figure spécifie le type de figure à ajouter
• L'élément figcaption ajoute une légende à une image sur une
page Web
• Cette légende peut s'afficher avant ou après l'image
37
Les éléments figure et figcaption:
38
Canvas:
• Pour tracer des formes composées de pixels dans la zone de

dessin, nous devons utiliser JavaScript
• Comprend des couleurs, des dégradés et des motifs de
remplissage
• Syntaxe de base de l'élément canvas : <canvas id="smlRectangle"
height="100" width="200"></canvas>
39
Canvas:
40
Les liens
• Html est un langage hypertexte (et hyper graphique) qui vous permet
en cliquant sur un mot , généralement souligné (ou une image) de
vous transporter
 Vers un autre site
 vers un autre fichier Html.
 vers un autre endroit du document = Un ancre
• Exemple : <a href="URL ou adresse"> Lien par défaut en bleu et
souligné </a>
• L’attribut href permet d’indiquer vers quelle page le lien doit
conduire.
41
Les liens
• Les principaux attributs de la balise a :
42
Un lien vers un autre site:
• <a href="https://www.google.tn">Google</a>
Un lien vers une autre page de son site:
Cas 1 : Les deux pages sont situées dans le même dossier: il suffit
d'écrire le nom du fichier cible comme valeur de l’attribut href.
• Exemple:
<p> Souhaitez-vous consulter <a href="page2.html">la page 2</a> </p>
• On dit que c'est un lien relatif.
43
Cas 2 : Les deux pages sont situées dans des dossiers différents:
44
Un lien vers un ancre:
• Un ancre est une sorte de point de repère que vous pouvez
mettre dans vos pages HTML lorsqu'elles sont très longues.
• Pour créer une ancre, il suffit de rajouter l'attribut id à une balise
qui va servir de repère et utiliser l'attribut id pour donner un
nom à l'ancre. Cela nous servira ensuite pour faire un lien vers
cette ancre.
• Exemple :
<h2 id="mon-ancre">Titre</h2>
Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois
l'attribut href contiendra un dièse (#) suivi du nom de l'ancre.
<a href="#mon-ancre">Aller vers l'ancre</a>
45
Balises de structuration de texte
46
L’élément vidéo
• Permet d'incorporer des vidéos dans des documents HTML en
utilisant un minimum de code
• Exemple de balisage :
<video src="intro.mp4" width="400" height="300">
</video>
47
L’élément vidéo : les attributs
• poster : Affiche un fichier image statique avant le chargement de la
vidéo
• autoplay : Démarre automatiquement la lecture de la vidéo après le
chargement de la page
• controls : Affiche un ensemble de contrôles utilisés pour lire, mettre
en pause ou arrêter la vidéo et régler le volume
• loop : Répète la vidéo
48
L’élément audio
• Permet d'incorporer du contenu audio, comme de la musique et
d'autres sons,
dans des documents HTML en utilisant
un minimum de code
• Exemple de balisage :<audio src="sample.mp3"
controls="controls"> </audio>
49
Balises génériques
50
Les tableaux
Création d’un tableau:
• <table> </table> : C'est cette balise qui permet d'indiquer le début et la fin
d'un tableau.
• <tr> </tr> : indique le début et la fin d'une ligne du tableau
• <td> </td> : indique le début et la fin du contenu d'une cellule.
• En HTML, un tableau se construit ligne par ligne. Dans chaque ligne (<tr>),
on indique le contenu des différentes cellules (<td>).
51
Les tableaux
Attribut summary
• L’attribut summary de la balise <table> permet de fournir un résumé
du tableau.
• Ce résumé n’apparaîtra en aucune façon dans la présentation visuelle
de la page.
• Celui-ci n’est pris en charge que par les synthèses vocales avant
l’exploration des données par les personnes visuellement déficientes.
• Notons qu’en Html5, l’attribut summary est le seul et unique attribut
de la balise <table> et qu'il n’a aucune action visuelle.
52
Les tableaux
• La balise <table>doit obligatoirement être fermée.
• En cas d’oubli de la balise de fermeture </table>, le tableau risque de
ne pas s’afficher ou ne pas s’afficher correctement.
• Le Html 4.0 proposait les attributs width, border, cellpadding,
cellspacing, frame et rules. Tous ces attributs ont disparu en Html5 et
doivent être pris en charge par des feuilles de style CSS.
• Les balises <tr>et <td>suivent le mouvement avec la disparition des
attributs align et valign.
53
Les tableaux
Par exemple, si je veux faire un tableau à deux lignes, avec trois cellules par
ligne (donc trois colonnes), je devrai taper ceci :
54
Les tableaux
Les cellules d’en-tête:
• La ligne d'en-tête se crée avec un <tr> comme on l'a fait jusqu'ici, mais les
cellules qu'elle contient sont, cette fois, encadrées par des balises <th> et non
pas <td> !
Remarque :Dans les navigateurs

visuels, le contenu de la balise
<th> apparaît en gras et en centré.
55
Les tableaux
Fusion de cellules:
• Il est possible de fusionner horizontalement ou verticalement des
cellules.
Fusion de colonnes:
• Pour fusionner des colonnes, le Html5 dispose de l’attribut de cellule
colspan="x" où x correspond au nombre de colonnes que l’on
souhaite fusionner horizontalement.
56
Les tableaux
Exemple :
• <td colspan="3" style="text-align: center;">Titre du tableau</td>
57
Les tableaux
Fusion de lignes:
• Pour fusionner des lignes, le Html5 dispose de l’attribut decellule
rowspan="x" où x correspond au nombre de lignes que l’on souhaite
fusionner verticalement.
Exemple :
• <td rowspan="2">1</td>
• Remarque : La première colonne des deux
lignes est fusionnée. Remarquez
l’alignement vertical
centré par défaut.
58
Les tableaux
La légende de tableau:
• La balise <caption>permet d’associer un titre ou une légende au
tableau.
• La balise <caption>doit être placée juste après la balise ouvrante
<table>et ne peut apparaître qu’une fois dans le tableau.
• Par défaut, la plupart des navigateurs affichent le contenu de la balise
<caption>de façon centrée au-dessus du tableau.
59
Les tableaux
Groupement de colonnes:
• La balise <colgroup>est utilisée pour grouper des colonnes en vue
d’appliquer une mise en forme à l’ensemble des balises du groupe en
utilisant une feuille de style CSS.
• L’attribut span="x" détermine le nombre de colonnes ainsi groupées.
• Par défaut, la valeur de x est 1. Cet attribut span est le seul attribut de
la balise <colgroup>.
• La balise <colgroup>se positionne juste après la balise <table>(ou
juste après la balise <caption>si celle-ci est utilisée) et avant toute
balise <tr>ou <td>.
60
Exemple 1
• Soit un tableau de trois lignes et trois
colonnes. Un arrière-plan de couleur ainsi
qu’un alignement centré sont appliqués aux
deux premières colonnes.
61
Les tableaux
La structuration d’un tableau:
• Le Html5 prévoit des balises pour structurer de façon logique le contenu
d’un tableau.
• Ces balises sont :
• <thead> pour regrouper les informations concernant l’entête du tableau
comme par exemple le titre et l’intitulé des colonnes.
• <tbody> pour le corps du tableau, soit l’ensemble des données de celui ci.
• <tfoot> pour le contenu de bas de page comme par exemple des remarques
ou une légende.
62
Les tableaux
La structuration d’un tableau:
• Ces divisions logiques n’affectent en rien la présentation par défaut du
tableau mais elles peuvent être reprises par des propriétés de style pour
agrémenter la présentation du tableau.
• On notera que la balise <tfoot> doit se situer avant la balise <tbody> de
sorte que le navigateur puisse prévoir le pied de page avant la réception des
lignes de données.
• La balise <tbody> est indispensable pour accéder au contenu d’un tableau
en JavaScript.
63
64
Les formulaires
???
65
Les formulaires
Déclaration d’un formulaire:
• 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.
• Les attributs usuels de la balise <form>sont :name, action et method
66
Les formulaires
Attribut name
• Pour attribuer un nom au formulaire
Attribut action
• Un programme de traitement des données, situé sur le serveur, en CGI,
Perl, PHP, ASP….
• Par exemple action = "http://www.serveur/traitement.php".
• Une adresse de courrier électronique pour récupérer simplement les
données. Le protocole mailto est alors utilisé.
Par exemple, action="mailto:mon_email@serveur".
• lorsque les données d’un formulaire sont traitées en interne (côtéclient)par
du JavaScript, l’attribut action reste vide. Par exemple action="". (Si vous
utilisez le validateur du W3C (http://validator.w3.org), la présence de
l’attribut action est obligatoire.)
67
Les formulaires
Attribut method
• La transmission des données d’un formulaire s’effectue selon la
méthode GET ou la méthode POST.
• GET et POST sont des méthodes d'accès définies dans le protocole
HTTP et reprises dans la spécification HTML.
• Le choix de la méthode dépend de la façon dont les données sont
reçues, de la taille et la nature des données.
• Avec cette méthode, les données du formulaire seront encodées dans
une URL et ne peuvent excéder 255 caractères.
• La méthode POST envoie un en-tête et un corps de message au
serveur. Le corps est généralement constitué des données entrées
dans le champ de formulaire par l'utilisateur.
• La méthode POST n’a pas de limite de taille.
68
Les éléments d’un formulaire
Les éléments de formulaires sont répartis en 3 classes :
• Input
Champs de saisie de texte et différents types de boutons
• Select
Listes (menus déroulants et ascenseurs)
• Textarea
Zone de saisie de texte libre
69
L’élément input
• Cet élément est utilisé pour définir des zones d'entrée de texte
simple, des boutons, des cases à cocher ou des boutons radio.
• Le type d'élément dont il s'agit sera précisé en utilisant l'attribut
TYPE:
a) Text :
Nom: <input type="text">
70
L’élément input
b) datalist :
choisir un fruit <input type="text" list="id_data_list"/>
<datalist id="id_data_list">
<option value="orange">orange</option>
<option value="pomme">pomme</option>
<option value="poire">poire</option>
<option value="prune">prune</option>
</datalist>
71
L’élément input
c) password :
Mot de passe: <input type="password">
d) radio:
Sexe:
Masculin<input type="radio" value="M" name="sexe" checked>
Féminin<input type="radio" value="F" name="sexe" >
e) Checkbox:
Votre pizza avec:<br>
<input type="checkbox" value="m" name="mozzarella" checked/>Mozzarella<br>
<input type="checkbox" value="j" name="jambon"/>Jambon<br>
<input type="checkbox" value="st" name="sauce" checked/>Sauce tomate<br>
<input type="checkbox" value="p" name="poivron"/>Poivron<br> 72
L’élément input
f) Submit:
<input type="submit" value="Valider"/>
g) Reset:
<input type="reset" value="Annuler"/>
h) Button:
<input type="button" value="OK"/>
i) Image:
<input type="image" src="submit.gif" alt="Soumettre" width="50"
height="50" />
j) Email
<input type="email" />
73
L’élément input
k) Number:
<input type="number" />
l) Date:
<input type="date" />
m) Month:
<input type="month" />
n) Week:
<input type="week" />
74
L’élément input
o) Datetime: <input type="datetime" /> ou <input
type="datetime-local" />
p) Time: <input type="time"/>
q) color: <input type="color" />
r) Range: <input name="curseur" type="range" min="1" max="5"
value="3" step="1"/>
s) File: <input type="file" />

t) url: <input type="url" />
u) Hidden: <input type="hidden" /> 75

Les attributs possibles sont :
• name
Définit un nom (name) unique pour cet élément. Cet attribut est
utilisé pour collecter le contenu de la ligne de texte lors de la
soumission du formulaire.
• size
Définit le nombre de caractères visibles de la ligne de texte et, par
conséquent, la largeur de la zone de texte. La valeur par défaut de
size est de 20.
• maxlength
Détermine le nombre maximal de caractères que l’utilisateur peut
encoder dans la ligne de texte.
76
• value
Définit la valeur par défaut de la ligne de texte. Celle-ci apparaît dans
la ligne de texte au chargement de la page. Par exemple, <input
type="text" value="Votre nom ici !">.
• readonly
Indique que la valeur attribuée par défaut à la ligne de texte ne
pourra être modifiée par l’utilisateur.
• placeholder
Permet d’afficher une suggestion de saisie qui apparaît en grisé dans
le champ de formulaire au chargement de la page. Ce texte disparaît
dès que l’utilisateur donne le focus à l’élément concerné.
<input type="text" placeholder="votre nom de famille">
77
• autofocus
Donne le focus à l’élément lors du chargement de la page. Cet attribut
épargne quelques lignes de JavaScript qui réalisaient cette fonction.
• required
Rend l’encodage de l’élément obligatoire par l’utilisateur pour la
soumission et le traitement du formulaire.
<form action="">
Email (obligatoire) :<input type="text" name="mail" required><br>
<input type="submit" value="Soumettre">
</form>
• pattern
Définit l’expression régulière JavaScript qui est utilisée pour la validation de
l’encodage.
Exemple : <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"> 78
• height
Détermine, en pixels ou en pourcentage, la hauteur de la ligne de
texte. Peut être remplacé par la propriété CSS height.
• width
Détermine, en pixels ou en pourcentage, la largeur de la ligne de
texte. Peut être remplacé par la propriété CSS width.
79
L’élément Textarea
• Dans certaines situations, il faut prévoir plus d’espace à l’utilisateur
pour s’exprimer. C’est le cas, par exemple, pour des commentaires,
remarques ou suggestions.
• On utilise alors la balise <textarea> … </textarea> qui introduit une
zone de texte de plusieurs lignes:
<p>Commentaires: </p>
<textarea rows="5" cols="30"></textarea>
80
• name
Définit un nom pour cet élément.
• cols
Définit le nombre de caractères visibles en largeur de la zone de texte.
Peut être remplacé par la propriété CSS width.
• rows
Définit le nombre de lignes visibles en hauteur de la zone de texte.
Peut être remplacé par la propriété CSS height
81
• readonly
Indique que la valeur attribuée par défaut à la ligne de texte ne
pourra être modifiée par l’utilisateur.
• autofocus
Donne le focus à l’élément lors du chargement de la page.
• maxlength
Détermine le nombre maximal de caractères que l’utilisateur peut
encoder dans la zone de texte.
• required
Rend l’encodage de l’élément obligatoire.
82
• wrap
Spécifie la façon de gérer les retours automatiques à la ligne du texte
lors de la soumission de la zone de texte: avec wrap="hard", un
caractère de passage à la ligne est transmis avec le texte. Avec
wrap="soft" (défaut), aucun caractère de changement de ligne n’est
transmis.
• placeholder
Affiche un texte dans le champ de formulaire au chargement de la
page. Ce texte s’efface automatiquement dès que l’utilisateur donne
le focus à la zone de texte
83
L’élément select
• La liste déroulante propose différentes options à l’utilisateur.
• La balise <select>...</select>indique au navigateur l’usage d’une liste
déroulante.
• Les éléments de la liste sont introduits par les balises <option>...</option>
Exemple: <p>Votre navigateur préféré: </p>
<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> 84
• name
Définit un nom pour cet élément.
• size
L’attribut size="x", définit le nombre d’éléments du menu qui sera
visible. Par défaut, l’attribut size de la balise <select> est égal à 1
• multiple
Par défaut, l’utilisateur ne peut choisir qu’un élément du menu
déroulant. Avec l’attribut multiple de la balise <select>, plusieurs
choix peuvent être effectués. L’attribut size doit être spécifié et égal
au nombre des balises <option>.
85
• selected
Par défaut, le premier élément de la liste est sélectionné. Mais il est
possible de présélectionner un autre élément par l’attribut selected
de la balise <option>.
• value
En principe, c’est le texte de l’élément choisi placé derrière
<option>qui est transmis lors de l’envoi du formulaire. Vous pouvez
toutefois spécifier qu’une autre valeur (généralement numérique) soit
transmise avec l’attribut value="valeur".
• autofocus
Donne le focus à l’élément lors du chargement de la page.
86
Etiquetage des champs de formulaires
• La balise <label>associe explicitement l’intitulé à un champ de formulaire
particulier. Un peu comme si on collait une étiquette (label) en face d’un
élément de formulaire.
• Les balises <label>sont aussi particulièrement utiles dans le domaine de
l’accessibilité des sites Web aux personnes non voyantes. Ces
"étiquettes" sont prises en charge par les aides techniques et facilitent
grandement l’utilisation des formulaires par les personnes visuellement
déficientes.
87
Etiquetage des champs de formulaires
• Dans un premier temps, le texte assigné à un élément de formulaire doit
être placé entre les balises <label> ... </label>.
<label>Nom</label> : <input type="text"><br>
• Il faut ensuite relier cette étiquette label au contrôle de formulaire. Pour
ce faire, l’élément de formulaire sera défini par un identifiant de type id.
<label>Nom</label> :< input type="text" id="f1"><br>
• L’attribut for="…" ajouté à la balise <label>permet de raccorder
directement l’étiquette au champ de formulaire en faisant référence à cet
identifiant.
<label for="f1">Nom</label> : <input type="text" id="f1"><br>
88
Organisation des éléments du formulaire
• Dans le cas de formulaires longs et complexes, il est parfois utile de
regrouper graphiquement certains éléments pour organiser la page
de façon logique.
• Les balises <fieldset>et <legend>permettent d’améliorer
sensiblement l’ergonomie des formulaires.
• La balise <fieldset> … </fieldset>englobe les champs de formulaires
que vous déterminez. Ces champs sont alors visualisés à l’écran par
une bordure.
• La balise <legend> … </legend>, qui se place directement derrière la
balise <fieldset>, ajoute une légende qui vient s’insérer dans la
bordure dessinée par le <fieldset>.
89
90

Etkkkkkkkkkkk

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

Etkkkkkkkkkkk

Transféré par

Droits d'auteur :

Formats disponibles

Chapitre 2

Enseignante : Imen DAOUD

• Pendant des années, la structuration des documents HTML se basait

Le langage HTML définit trois types de listes :

• Le groupe W3C exige l'attribut alt pour faciliter l'accessibilité des

• Pour tracer des formes composées de pixels dans la zone de

• <tr> </tr> : indique le début et la fin d'une ligne du tableau

• <td> </td> : indique le début et la fin du contenu d'une cellule.

Remarque :Dans les navigateurs

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

s) File: <input type="file" />

u) Hidden: <input type="hidden" /> 75

Vous aimerez peut-être aussi