Université Abdelmalek Essaâdi

Ecole Nationale des Sciences Appliquées

Al Hoceima

Chapitre 2 : langage HTML

Plan
I. Introduction

II. HTML5: Eléments de base

III.Liens hypertextes et multimédias

IV.Formulaires

ENSAH langage HTML E.W. DADI – page : 2

I. Introduction
1. HTML: définition
HTML (HyperText Markup Language) est un langage de
balisage(Markup) utilisé pour créer des pages web.
Il permet de structurer et d'organiser le contenu de la page en
utilisant des balises pour définir différents éléments tels que les
titres, les paragraphes, les images, les liens, etc. Les navigateurs web
interprètent le code HTML pour afficher le contenu et la mise en
page de la page web.
HTML est un langage universel et standardisé qui est
incontournable pour créer des sites web. Il est souvent utilisé en
combinaison avec d'autres technologies telles que CSS (Cascading
Style Sheets) pour définir la présentation visuelle de la page, et
JavaScript pour ajouter des fonctionnalités interactives à la page.
La dernière version d'HTML est HTML5, qui apporte de nouvelles
fonctionnalités et améliorations par rapport aux versions
précédentes.

ENSAH langage HTML E.W. DADI – page : 3

2. HTML: un langage de balisage
Une balise est un mot clé, une commande du langage HTML insérée dans
le corps du document pour introduire un effet particulier (Exemples : début
de mise en gras, fin de mise en gras, début de tableau…).
Une balise commence toujours par un signe "<" et se finit toujours par un
signe ">". La plupart des balises doivent être ouvertes et fermées (les
balises en paires) pour délimiter leur zone d'influence. La balise fermante
contient la même commande que la balise ouvrante, mais précédée d'un
caractère /.
Exemple : pour mettre un texte en gras en HTML, on utilise la commande
b. Cette balise a une balise ouvrante <b> et une balise fermante </b>. Par
exemple, pour mettre le mot "ENSAH" en gras dans la phrase "Je suis
étudiant à l'ENSAH.", on peut utiliser la balise <b> comme ceci: "Je suis
étudiant à l'<b>ENSAH</b>." Ce code HTML fera que le mot "ENSAH"
sera affiché en gras à l'écran.

ENSAH langage HTML E.W. DADI – page : 4

…. la suite
Pour décrire un hypertexte, le langage HTML insère des balises dans le
texte du document; un fichier portant l'extension « .html »

Code HTML Son interprétation par le navigateur

NB: L'édition du code HTML peut être réalisée en utilisant un éditeur de texte
simple tel que Bloc-notes. Cependant, il est recommandé d'utiliser un éditeur
dédié qui connaît déjà le code HTML, tel que Sublime Text, qui offre des
fonctionnalités supplémentaires pour faciliter l'édition du code HTML.

ENSAH langage HTML E.W. DADI – page : 5

3. Eléments et attributs
HTML contient un ensemble d’éléments délimités par des balises.
Ces éléments permettent de définir des liens hypertextes, des titres, des
paragraphes, des listes, des tableaux, des images, etc….Exemple : l’élément
<img> permet d’insérer une image dans le document.
Un élément peut comporter zéro ou plusieurs attributs, choisis parmi un
ensemble spécifique à cet élément ou un ensemble commun à tous les
éléments HTML.
Les attributs modifient les propriétés des balises html. Ils permettent en
quelque sorte de spécifier l'action de l’élément. Ils se placent après le nom
de la balise ouvrante et le plus souvent une valeur, comme ceci : Syntaxe :
<element attribut="valeur">
Dans certains cas, ils sont essentiels, tels que l'attribut src pour <img> ,
précisant le nom du fichier image à afficher dans la page. Exemple : <img
src="photo.jpg"/>
Dans d'autres cas, ils peuvent être facultatifs, tels que class ou id, qui
permettent de nommer les éléments pour interagir avec ceux-ci, ou pour
leur affecter des propriétés de style. Exemple : <p id="introduction">.

ENSAH langage HTML E.W. DADI – page : 6

4. Bien éditer son document
Lors de l’écriture des balises en HTML, voici quelques règles simples qu’il
vaut mieux respecter :
HTML5 permet le mélange des lettres majuscules et minuscules dans les noms
d'éléments et leurs attributs, mais il est recommandé d'utiliser le minuscule.
Fermeture des balises: en HTML5 il possible de ne pas fermer tous les
éléments (par exemple l'élément <p>), mais même si, il est recommandé de les
fermer pour délimiter la zone d influence,
Pour les éléments vide comme <meta charset="UTF-8">, leur fermeture est
optionnelle.
Les balises doivent être correctement imbriquées.
correct : <a><b><c>contenu</c></b></a>.
incorrect : <a><b><c>contenu</a></c></b>.
Il est de préférence de mettre les valeurs des attributs entre des guillemets.
Ajout des commentaires : il vaut mieux commenter le code html; cela se fait en
utilisant la syntaxe suivante: <!– commentaire – >

ENSAH langage HTML E.W. DADI – page : 7

II. HTML5: Eléments de base
1. Une version récente : HTML5
HTML5 est la dernière évolution des standards qui définissent HTML. Il s'agit de
la nouvelle version du langage HTML présentant des révisions majeures par
rapport aux versions antérieures et qui se focalisaient juste sur le contenu des pages
Web.
De nouveaux éléments, attributs et comportements ont été rajoutés pour de
nouveaux usages, afin de répondre aux besoins grandissants des internautes.
HTML5 a introduit de nouvelles balises et attributs pour améliorer la sémantique
du code HTML et permettre une meilleure compréhension de la structure de la page
Web. Ces balises incluent <header>, <nav>, <section>, <article>, <footer>,
<aside>, etc.
Egalement, l’HTML 5 offre la possibilité de l’ajout de média riches (vidéo, audio,
SVG) à une page Web, sans avoir besoin de plugins tiers tels que Flash. Les balises
<audio> et <video> permettent d'intégrer facilement des fichiers audio et vidéo à
une page.
HTML5 apporte aussi des fonctionnalités permettant le développement
d'applications web interactives, à savoir :
une API de drag and drop en combinaison avec l'attribut draggable
une API d'édition en combinaison avec le nouvel attribut contenteditable.
une API de dessin 2D utilisé avec la nouvelle balise canvas

ENSAH langage HTML E.W. DADI – page : 8

2. Document html5: la structure générale
<!DOCTYPE html>
<!-- spécifier qu’il s’agit d’un document html5. Il faut la préciser au début de tout document en
HTML car cela permet au navigateur ne supportant pas encore le HTML5 de passer en mode standard
et ainsi d'ignorer les balises inconnues -->
<html>
<!-- C'est la balise principale du code. Elle englobe tout le contenu de la page-->
<head>
<title> titre de la page </title>
<meta charset="type_encodage" />
<!-- c’est l'en-tête du document. Cette section donne quelques informations générales sur la page
comme: Le titre du document (balise <title> … </title>), l'encodage pour la gestion des caractères
spéciaux, des déclarations ou des appels de feuilles de style CSS, des fonctions ou des liens vers des
fichiers JavaScript -->
</head>
<body>
<!--C’est le corps du document. Elle contient la partie principale de la page. C’est cette partie du
document HTML qui sera affichée dans la fenêtre du navigateur et donc visible par l’internaute -->
</body>
</html>

ENSAH langage HTML E.W. DADI – page : 9

3. L’entête <head>
La section <head> d'une page HTML est utilisée pour inclure des
informations sur la page elle-même, telles que le titre de la page, les
feuilles de style CSS, les scripts JavaScript, les balises meta et les
icônes de site. Voici quelques éléments couramment placés dans la
section <head> :
La balise <title> : définit le titre de la page qui est affiché dans l'onglet
du navigateur et dans les résultats de recherche.
Les balises <meta > : sont utilisées pour fournir des informations sur la
page aux navigateurs et aux moteurs de recherche, telles que l'encodage
des caractères, la description et les mots-clés. Elles aident à mieux
comprendre le contenu de la page.
Les balises <link> : sont utilisées pour lier la page web avec le CSS et
avec une icône de site (une image représentative de la page dans les
onglets de navigateur et les signets).
La balise <script >: est utilisée pour lier la page web avec un fichier
JavaScript.

ENSAH langage HTML E.W. DADI – page : 10

4. L’encodage des caractères:<meta charset="valeur"/>
Il est très important de définir l'encodage des caractères pour une page web.
Si l'encodage n'est pas spécifié, les navigateurs peuvent interpréter les
caractères de manière incorrecte, ce qui peut entraîner des problèmes
d'affichage ou de compréhension du contenu pour les utilisateurs.
C'est lui qui détermine comment les caractères spéciaux vont s'afficher
comme: les caractères accentués, caractères arabes, caractères Tifinagh,
Idéogrammes chinois et japonais, etc…
HTML5 propose d’utiliser l’élément <meta> d’une façon plus simple :
<meta charset=valeur/>
Différentes techniques d'encodage sont utilisées pour représenter les
caractères de différentes langues. L'attribut "charset" peut prendre plusieurs
valeurs, telles que UTF-8, ISO-8859-1, OEM 775 et Windows-1253.
Cependant, parmi ces options, UTF-8 est la méthode d'encodage la plus
couramment utilisée aujourd'hui, car elle permet de représenter
pratiquement tous les symboles de toutes les langues.

ENSAH langage HTML E.W. DADI – page : 11

5. Structuration de la page
La structure d'une page Web, à savoir la structure sémantique de ce qui est
entre <body> et </body>, est fondamentale pour la présentation de la page à
l'utilisateur.
HTML 5 propose un ensemble d’éléments pour cette structuration à savoir
: <article>, <header>, <section>, <footer>, <nav>, <aside>.
Voici un exemple d’un schéma de structuration : un entête, un pied de page
et le contenu principal.

ENSAH langage HTML E.W. DADI – page : 12

…. la suite
D’autres exemples:

ENSAH langage HTML E.W. DADI – page : 13

…. la suite
Ces balises décrivent la nature de certains éléments du contenu d’une page.
Elles n’ont aucune influence sur la structure du contenu et bien souvent
aucune influence sur la présentation et l’affichage de la page.
Elles permet seulement d’expliquer à l'ordinateur « Ceci est l'en-tête », «
Ceci est le pied de page », etc. Elles n'indiquent pas, contrairement à ce
qu'on pourrait penser, où doit être placé le contenu. C'est le rôle du CSS.
Ce sont des balises dites sémantiques, leur but c’est de permettre à des
programmes automates(Exemple: robots d’indexation) de mieux
comprendre la structure d’une page web et par conséquent de faciliter son
indexation.
Le Web sémantique est encore à ses débuts et l'impact d'un bon contenu
structuré dans des balises sémantiques adaptées n'est pas encore bien senti
auprès des moteurs de recherche, mais il est préférable d'adopter cette
bonne pratique dès maintenant.
Aujourd'hui, les balises HTML5 sont largement utilisées par les
développeurs pour structurer leurs pages Web, mais certains continuent
d'utiliser des balises génériques telles que <div>. En effet, avant l'arrivée de
ces nouvelles balises HTML5, la balise <div> était souvent utilisée pour
diviser une page en sections.

ENSAH langage HTML E.W. DADI – page : 14

…. la suite
Organisation par des <div> :
<div id="navbar"> ...navbar content... </div>
<div id="main">
<div id="column_left">
...column left content...
</div>
<div id="column_right">
...column right content...
</div>
<div class="spacer"> </div>
</div> <!-- close #main content -->
</div> <!-- close #container -->

ENSAH langage HTML E.W. DADI – page : 15

6. Balises de forme et de structure
De nombreuses balises HTML sont dédiées à "la mise en forme" et
l’organisation du texte du document. Certaines existent depuis la toute
première version de HTML, d'autres ont été introduites plus récemment
dans HTML5. Voici une liste non exhaustive :
<p> : définit un paragraphe contenant une ou plusieurs phrases.
<ul> et <ol> : sont utilisés pour spécifier une liste d’éléments ( <li> ). <ul> pour une liste à
puces, <ol> pour une liste numérotés.
<br> : permet de créer un saut de ligne.
<h1> à <h6> : utilisées pour la hiérarchisation des titres.
<strong> : utilisée dans un paragraphe pour mettre une partie de texte en gras.
<u> : pour souligner un texte.
<del> : définit un texte qui a été supprimé (exemple: texte )
<mark> : utilisée pour marquer une partie du texte en jaune.
<hr/> : utilisée pour la mise en place d’une ligne de séparation horizontale
<cite> : utilisée pour le titre d'une œuvre, d'un document ou d'un évènement.
<i> : utilisée dans un paragraphe pour indiquer qu'une partie du texte est différent du reste. Il ne
faut pas utiliser cette balise lorsque <strong>, <b>, <cite>,<dfn>,<em>,<q> ou <small>
<strong> peuvent être utilisées.
<div> : balise sans valeur sémantique réelle, elle sert de conteneur pour une mise en forme en
CSS. Cette balise doit être utilisée en dernier recours, lorsqu'aucune autre balise ne peut
convenir.

ENSAH langage HTML E.W. DADI – page : 16

…. la suite
Exemples :

ENSAH langage HTML E.W. DADI – page : 17

6. Balise <table> : définir des tableaux
Un tableau HTML est défini avec la balise <table>.
Chaque ligne de la table est définie avec la balise <tr>. Un en-tête de table
est défini avec la balise <th> . Par défaut, les titres des tableaux sont en
gras et centré. Les cellules sont définies avec la balise <td>.
<td> (Cellules)

<th> (entête)
<tr> (Lignes)

Il est possible de fusionner des cellules horizontalement avec

l'attribut colspan ou verticalement avec rowspan. Il faut indiquer combien
de cellules doivent être fusionnées.
A noter que la balise <table> ne comporte plus d’attributs en HTML5
comme c’était le cas avec l’ancienne version.

ENSAH langage HTML E.W. DADI – page : 18

…. la suite
Exemples :

ENSAH langage HTML E.W. DADI – page : 19

III. Liens hypertextes et multimédias
1. Manipulation des liens
Dans le cas général, un site web est composé de plusieurs pages.
L'utilisateur peut passer en un clic d'une page à une autre grâce à des
liens hypertextes.
Ces liens sont utilisés généralement pour aller vers :
Une autre page du site.
Un endroit de la page en cours.
Un endroit dans une autre page du site.
Une page d’un autre site situé sur le Web.
Une adresse électronique.
Un fichier à télécharger.
En HTML, les liens sont définis avec l’élément <a> et son attribut
href dont la syntaxe est : <a href="url" targert=" " type=" " > link
text </a>
href est l'attribut permettant de spécifier l'adresse de destination (du lien.
link text : le texte du lien, c’est la partie visible (la partie cliquable). En
cliquant sur pour aller à l'adresse indiquée.

ENSAH langage HTML E.W. DADI – page : 20

…. la suite
D’autres attributs de l’élément <a> :
L'attribut target : spécifie l’endroit où peut s’ouvrir le document lié. Sa
syntaxe est: <a target="_blank|_self|_parent|_top|framename">. On
n'utilise plus que _blank(nouvel onglet/fenêtre). Les autres valeurs sont
presque obsolètes. Elles étaient utilisés avec les "frameset", un élément
abandonné en HTML5.
L’attribut type: indique au navigateur le type de la cible si celui-ci n’est
pas un document HTML, par exemple un fichier son ou une image.
Les ancres : sont utilisées pour permettre aux lecteurs de sauter à
des parties spécifiques d'une page Web. Elles peuvent être utiles si la
page Web est très longue. Deux étapes pour faire une ancre :
Création d’une ancre : <h2 id="mon_ancre">Titre </h2>
Ajout d’un lien vers : il suffit de créer un lien, 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>

ENSAH langage HTML E.W. DADI – page : 21

2. Insertion des images et des figures
En HTML, les images sont définies avec la balise <img>.
La balise <img> est vide, il contient des attributs uniquement, et ne
dispose pas d'une balise de fermeture.
Sa syntaxe :
<img src="url" alt="some_text" style="width:width;height:height;“/>
L'attribut src spécifie l'URL (adresse web) de l'image.
L'attribut alt fournit un texte alternatif pour une image, si l‘image n’est pas
affichée pour une raison quelconque.
L’attribut style est utilisé pour spécifier les propriétés de style comme : hauteur
et largeur, emplacement de l’image dans la page(gauche ou droite), et le
bordeur.
Un exemple :
<img src= "ensah.jpg" alt= "Photo de ENSAH" style="float:right;width:42px;height:42px;border:0;“/>

ENSAH langage HTML E.W. DADI – page : 22

…. la suite
La mise en forme d’une figure est réalisée grâce à l’élément <figure>.
Cet élément est utilisé pour regrouper un ou plusieurs médias ( illustrations,
diagrammes, exemples de code, photos...)
Pour ajouter une légende (un titre) à une figure, on utilise
l’élément <figcaption>.
Exemple :

ENSAH langage HTML E.W. DADI – page : 23

3. Insertion de l’Audio et de la vidéo
En plus de la possibilité de l’insertion des images dans un document html,
HTML5 donne la possibilité d’insérer de l’audio et la vidéo.
Avant l'arrivée de HTML5, les fichiers audio/vidéo ne pouvaient être lus dans
un navigateur qu'en utilisant un plugin, tel que Flash.
Pour l’Audio, HTML5 propose l’élément <audio>. Exemple d’utilisation :
<audio controls>
<source src="test.mp3" type="audio/mpeg">
Ce navigateur ne supporte pas ce type de fichier.
</audio>
Pour la vidéo, HTML5 propose l’élément <video>. Exemple d’utilisation :
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Ce navigateur ne supporte pas ce type de fichier.
</video>

ENSAH langage HTML E.W. DADI – page : 24

…. la suite
L’attribut ‘controls’ ajoute des éléments de contrôle tels que : lecture,
pause et le volume.
L'élément <source> permet de spécifier des fichiers audio alternatives
que le navigateur peut choisir. Par défaut, il sélectionne le premier
format reconnu.
Le texte entre les balises <audio> et </ audio> ou <video> et </ video> ne
sera affiché que lorsque le navigateur ne prend pas en charge l’un
des éléments.
A noter que sauf trois formats sont supportés pour chacun des deux
éléments :
Pour <audio> : MP3, Wav et Ogg.
Pour <video> : MP4, WebM et Ogg.

ENSAH langage HTML E.W. DADI – page : 25

IV. Formulaires
1. Présentation
Les formulaires occupent une place prépondérante dans la conception et
l’exploitation d’une application ou un site Web. Il suffit de penser à tous les sites à
vocation commerciale pour lesquels ces formulaires sont indispensables.
C’est en effet la seule façon de recevoir des informations provenant directement de
l’utilisateur final, et en outre, structurées selon les besoins du concepteur.

ENSAH langage HTML E.W. DADI – page : 26

2. Déclaration de formulaire
L’élément permettant de définir un formulaire est <form>. Il est
utilisé pour collecter les entrées utilisateur.
Les attributs usuels de la balise <form> sont :
action: il sert à indiquer l’action avec laquelle les données seront
récupérées et traitées. On distingue deux types d’action :
Externe: les données de formulaire seront traitées par une machine serveur.
Dans ce cas, il faut indiquer dans l’action, l’adresse d’une page, d’un
programme (PHP, Perl, ASP…) ou d’un courrier électronique, situant sur
la machine serveur. Par exemple :
action = "traitement.php".
action="mailto:mon_email@serveur".
Interne: c’est lorsque les données d’un formulaire sont traitées en interne
(côté client) par du JavaScript, l’attribut action reste vide action="".

ENSAH langage HTML E.W. DADI – page : 27

…. la suite
method: cet attribut indique par quel moyen les données vont être
envoyées. Il existe deux méthodes :
method="get" : les informations seront envoyées en clair dans l'adresse de la
page (http://…). C'est une méthode en général assez peu adaptée car elle est
limitée à 255 caractères.
method="post" : c'est la méthode la plus utilisée pour les formulaires car elle
permet d'envoyer un grand nombre d'informations. Les données saisies dans le
formulaire ne transitent pas par la barre d'adresse.
enctype: l’attribut enctype spécifie sous quel format informatique seront
transmises les données du formulaire. Il est utilisé dans le cas de la
méthode post.
application/x-www-form-urlencoded : c’est le choix par défaut. Tous les
caractères sont codés avant d'être envoyés (les espaces sont convertis en
symboles "+" et les caractères spéciaux sont convertis en valeurs ASCII HEX)
multipart/form-data: ce type d'encodage est utilisé lorsque le formulaire
contient des fichiers à envoyer au serveur. Les données sont alors encodées
sous forme de plusieurs parties séparées, chaque partie contenant une partie
différente des données du formulaire.
text/plain: les espaces sont convertis en symboles "+", mais aucun caractère
spécial n'est codé.

ENSAH langage HTML E.W. DADI – page : 28

3. Les éléments du formulaire
Un formulaire HTML peut contenir des éléments pour
différents types d'entrée, comme les champs de texte, des cases
à cocher, des listes déroulantes, boutons radio, et plus encore.
Exemple :

ENSAH langage HTML E.W. DADI – page : 29

…. la suite
L’élément <input type =" " name=" "> : grâce à l’attribut ‘type’, cet
élément permet de différencier plusieurs types d’entrées :
<input type = "text"> : Définit un champ de saisie de texte d'une ligne
<input type = "radio">: Définit un bouton radio (pour sélectionner un des nombreux
choix)
<input type = "checkbox" >: Définit des cases à cocher
<input type = "submit">: Définit un bouton de soumission (pour soumettre le
formulaire)
<input type = "reset">: Définit un bouton d’actualisation des champs remplis.
<input type="password"> : Définit un champ de texte sur une seule ligne dont la
valeur sera masquée.
<input type="button" value="Click Me!"> : Définit un bouton.
Des nouveaux type input ont été ajoutés en html5 : date, email, search, color,
datetime, datetime-local, month, number, range, tel, time, url, week.
L'élément <textarea> : permet de définir un champ de saisie multi-
ligne (une zone de texte). Un exemple :
<textarea name="message" rows="10" cols="30">
Ceci c’est un texte
</textarea>

ENSAH langage HTML E.W. DADI – page : 30

…. la suite
L'élément <select> : permet de définir une liste déroulante.
Les options de la liste sont définit grâce à la balise <option>. Un exemple :
Choisissez votre ville : <select name="ville">
<option value="Al Hoceima"> Al Hoceima</option>
<option value="Nador">Nador</option>
<option value="Oujda">Oujda</option>
</select>

Par défaut, le premier élément dans la liste déroulante est sélectionnée. Sinon,
il est possible d’utiliser l’attribut selected.
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.
Il possible de grouper des options grâce à l’élément <optgroup>. Par exemple
grouper les villes par région :
Choisissez votre ville : <select name="ville">
<optgroup label= "Région Tanger ">.
<option value="Al Hoceima"> Al Hoceima</option>
<option value="Tanger "> Tanger </option>
</optgroup>
<optgroup label= "Région Oriental">.
<option value="Nador">Nador</option>
<option value="Oujda">Oujda</option>
</optgroup>
</select>

ENSAH langage HTML E.W. DADI – page : 31

…. la suite
L’élément <datalist> : spécifie une liste d'options prédéfinies pour un
élément <input list=" ">. C’est un nouveau élément introduit par html5.
Les utilisateurs verront une liste déroulante des options prédéfinies
comme des données d'entrée pour <input list=" ">.
L'attribut list de l'élément <input>, doit se référer à l'attribut id de
l'élément <datalist id=" ">.Voici un exemple :
<form action=" ">
<input list="ville">
<datalist id="ville">
<option value="Al hoceima">
<option value="Nador">
<option value="Oujda" >
<option value="Tanger">
<option value="Tétouan">
</datalist>
</form>

ENSAH langage HTML E.W. DADI – page : 32

4. Regroupement des champs
HTML donne la possibilité de regrouper des champs de formulaire
grâce à la balise <fieldset>.
Chaque <fieldset> peut contenir une légende avec la
balise <legend>.

ENSAH langage HTML E.W. DADI – page : 33

5. Les attributs des champs
Les différents éléments de formulaire admettent des attribues
comme : name, size, maxlength, value, readonly , placeholder (pour
texte), checked (pour boutton), required, pattern, height, width. Il y
ceux qui sont communs entre les éléments mais il y a d’autres bien
spécifique.
L’attribut ‘name’ permet de définir un nom (name) unique pour
l’élément. Il est utilisé pour collecter le contenu de la ligne de texte
lors de la soumission du formulaire, c’est-à-dire qu’il est obligatoire
de l’utiliser.
L’attribut size permet de définir le nombre de caractères visibles de
la ligne de texte et, par conséquent, la largeur de la zone de texte.
L’utilisateur peut néanmoins encoder autant de caractères qu’il souhaite
même s’ils débordent du champ de la zone visible.
La valeur par défaut de size est de 20.

ENSAH langage HTML E.W. DADI – page : 34

…. la suite
Les différents attributs
L'attribut Éléments qu’il l’utilise Description
<form>, <input>,<button>,<select>,<text
Nom de l'élément. Utilisé par exemple par le serveur pour
name area>,<fieldset>,<object>,<meta>,<map>,
récupérer les données envoyées par l’utilisateur.
<output>, <param>
<button>, <option>, <input>, Définit une valeur par défaut qui sera affichée dans l'élément
value
<meter>, <progress>,<param>, <li>, au chargement de la page.
required <input>, <select>, <textarea> Indique si l'élément doit être obligatoirement rempli ou non.
Indique un texte informatif à afficher pour l'utilisateur dans
placeholder <input>, <textarea>
l'élément.
readonly <input>, <textarea> Indique si l'élément peut être modifié.
Définit une valeur qui sera sélectionnée au chargement de la
selected <option>
page.
checked <command>, <input> Indique si l'élément doit être coché au chargement de la page.
<button>, <command>,<select>,<option>,
disabled Indique si l'utilisateur peut interagir avec l'élément.
<optgroup>, <textarea> <fieldset>
Définit si plusieurs valeurs peuvent être saisies dans un
multiple <input>, <select>
champ de type email ou file.
<button>, <input>, <keygen>,<select>, L'élément doit être automatiquement sélectionné après le
autofocus
<textarea> chargement de la page.
rows/cols <textarea> Définit le nombre de lignes/colonnes dans un textarea.
Définit la largeur de l'élément (en pixels). Si l'attributtype de
size <input>, <select> l'élément est text ou password, il s'agit alors du nombre de
caractères.
wrap <textarea> Indique comment la césure doit être gérée.
for <label>, <output> Décrit l'élément qui lui est associé
max <input>, <meter>, <progress> Définit la valeur maximum autorisée.

ENSAH langage HTML E.W. DADI – page : 35