20/09/2023

Programmation Web
HTML/CSS

Pr. OULAD SAYAD Younes

[Link]@[Link]
20/09/2023 1

Comment fonctionne le Web?

• C'est un mécanisme client-serveur.
• Le client demande un fichier, le serveur lui donne ce dernier tel qu'il
est stocké.
• Lorsque le client lance une requête pour accéder à cette page (en
cliquant sur un lien ou en tapant l’URL correspondant). Le serveur,
quelque part sur le réseau, renvoie la réponse en format HTML.

20/09/2023 2

1
 20/09/2023

La communication entre le client et serveur

web s'effectue de la manière suivante :
• le client envoie un message de requête au serveur web. Ce dernier y
répond par un message de réponse.
• Le protocole HTTP organise la structure de ces messages.
• Si celui-ci peut fournir la page demandée, le document est retourné,
en format HTML, par la même connexion, qui est ensuite refermée.

20/09/2023 3

Résultat visible à l’écran

20/09/2023 4

2
 20/09/2023

20/09/2023 5

Langages HTML/CSS

20/09/2023 6

3
 20/09/2023

20/09/2023 7

• Les pages web statiques sont des documents en HTML invariables

préparées à l’avance. Le serveur renvoie ces pages à l’utilisateur mais
n’effectue aucune action particulière.
• Le code source de la page affichée par le navigateur sur le poste client
est identique au code source de la page web installée sur le serveur.

20/09/2023 8

4
 20/09/2023

POURQUOI APPRENDRE LE HTML & LE CSS ?

• Les langages HTML et CSS sont incontournables car n’ont pas de
concurrent et sont à la base de tout projet de développement web;
• Une base pour comprendre son site, le modifier et résoudre les
problèmes au besoin;
• Indispensable pour optimiser son référencement;
• Vous pouvez très bien créer un site web uniquement en HTML, mais
celui-ci ne sera pas très beau : l'information apparaîtra « brute ».
C'est pour cela que le langage CSS vient toujours le compléter.

20/09/2023 10

5
 20/09/2023

HTML & CSS : DEFINITION

• HTML = HyperText Markup Language.
• Créé en 1991
• Fonction : donner du sens et structurer le contenu

• CSS = Cascading Style Sheets

• Créé en 1996
• Fonction : mettre en forme le contenu en lui ajoutant des styles

20/09/2023 11

20/09/2023 12

6
 20/09/2023

LES VERSIONS HTML & CSS

• Versions actuelles :
• HTML5 & CSS3
• Toutes les deux non finalisées (encore en développement) mais
totalement stables et déjà très largement utilisées.
• Introduisent de nouvelles fonctionnalités très attendues : insérer des
vidéos, bordures arrondies, etc.

20/09/2023 13

L’EDITEUR DE TEXTE
• Pour coder en HTML ou en CSS, nous n’avons besoin que d’un éditeur
de texte gratuit :

• Pc = Sublime Text, NotePad++, Komodo, etc.

• Mac = Sublime Text, Komodo, TextWrangler, etc.
• Linux = Sublime Text, Komodo, gEdit, etc.

• Première chose à faire : changer la couleur du fond !

20/09/2023 14

7
 20/09/2023

Partie 1: HTML

20/09/2023 15

ELEMENTS, BALISES & ATTRIBUTS

• Les pages HTML sont remplies de ce qu'on appelle des balises. Celles-ci
sont invisibles à l'écran pour vos visiteurs, mais elles permettent à
l'ordinateur de comprendre ce qu'il doit afficher.
Les balises se repèrent facilement. Elles sont entourées de « chevrons »,
c'est-à-dire des symboles < et >, comme ceci : <balise>
• Exemples:
• L’élément p définit un paragraphe <p>,
• Les éléments h1, h2, … , h6 définissent des titres <h1> <h2> ..,
• Généralement constitués d’une paire de balises :
• Balise ouvrante : <p>
• Balise fermante : </p>
20/09/2023
• Exception : balises orphelines comme <br/> 16

8
 20/09/2023

ELEMENTS, BALISES ET ATTRIBUTS

• Attributs =
• Propriétés utilisées pour donner des indications supplémentaires aux
éléments.
• Ex: Indiquer la cible d’un lien.

Balise ouvrante Balise fermante

<a href=“[Link] Le site YouTube </a>

attribut élément a

20/09/2023 17

STRUCTURE D’UNE PAGE EN HTML5

20/09/2023 18

9
 20/09/2023

BONNES PRATIQUES, REGLES & COMMENTAIRES

• Vous pouvez imbriquer des balises l’une dans l’autre mais vous devez
les refermer dans le bon ordre : <a> <b> </b> </a>.
• Indentez votre code et commentez le pour le rendre plus lisible, plus
professionnel et plus simple à comprendre.
• <!-- Voici un commentaire en HTML -->

! Tout le monde peut voir votre code HTML ! N’écrivez donc pas
d’infos sensibles en commentaires comme des mots de passe !

20/09/2023 19

Éléments de base
• L’élément p définit un paragraphe.
• L’élément br crée un retour à la ligne.
• Les éléments h1, h2,… jusqu’à h6 définissent des titres (par ordre d’importance).
• L’élément strong est utilisé pour définir un contenu comme important.
• L’élément em est utilisé pour définir un contenu comme assez important.
• L’élément mark est utilisé pour faire ressortir du contenu.

20/09/2023 20

10
 20/09/2023

Tout document Html contiendra en majorité du texte.

Voyons comment l'agrémenter par quelques balises
élémentaires.

Voici les codes de quelques couleurs basiques.

Bleu #0000FF Vert #00FF00

Blanc #FFFFFF Violet #8000FF
Rouge #FF0000 Jaune #FFFF00
20/09/2023 21

Exercice d’application (1)

20/09/2023 22

11
 20/09/2023

Correction Exercice d’application (1)

<html>
<head>
<title> les textes </title>
</head>
<body>
Texte simple <br>
<b>Texte en gras </b> <br>
<i>Texte en italique</i> <br>
<center>Texte centrer</center> <br>
<strong><em>texte en gras et en italique</em></strong><br>
<font color="#0000FF"> Texte en bleu </font><br>
<font size=50> Texte de taille 50 pixel</font><br>
</body>
</html>

20/09/2023 23

Les paragraphes
<p>Bonjour et bienvenue sur mon site !</p>

• <p> signifie « Début du paragraphe » ;

• </p> signifie « Fin du paragraphe ».

On écrit le contenu du site web entre les balises <body></body>

20/09/2023 24

12
 20/09/2023

Exercice d’application (2)

20/09/2023 25

Correction Exercice d’application (2)

<html>
<head>
<title> les paragraphes </title>
</head>
<body>
<p> Mon premier paragraphe </p>
<p> Mon deuxieme paragraphe </p>
</body>
</html>

20/09/2023 26

13
 20/09/2023

Les Titres
En HTML, on est verni, on a le droit d'utiliser six niveaux de titres différents.
• <h1> </h1> : signifie « titre très important ». En général, on s'en sert pour
afficher le titre de la page au début de celle-ci.
• <h2> </h2> : signifie « titre important ».
• <h3> </h3> : pareil, c'est un titre un peu moins important (on peut dire un
« sous-titre » si vous voulez).
• <h4> </h4> : titre encore moins important.
• <h5> </h5> : titre pas important.
• <h6> </h6> : titre vraiment, mais alors là vraiment pas important du tout.

20/09/2023 27

Exercice d’application (3)

20/09/2023 28

14
 20/09/2023

Correction Exercice d’application (3)

<html>
<head>
<title> les titres</title>
</head>
<body>
<h1> titre très important </h1>
<h2> titre important </h2>
<h3> sous-titre </h3>
<h4> titre moins important </h4>
<h5> titre pas important </h5>
<h6> le plus petit titre <h6>
</body>
</html>
20/09/2023 29

LISTES ORDONNEES / NON-ORDONNEES /

IMBRIQUEES
• Les listes nous permettent souvent de mieux structurer notre texte et
d'ordonner nos informations.

Nous allons découvrir ici deux types de listes :

• les listes non ordonnées ou listes à puces ;
• les listes ordonnées ou listes numérotées ou encore énumérations.

20/09/2023 30

15
 20/09/2023

LISTES ORDONNEES / NON-ORDONNEES /

IMBRIQUEES
Liste non ordonnée

Une liste non ordonnée ressemble à ceci : <ul>

<li>Fraises</li>
• Fraises
<li>Framboises</li>
• Framboises <li>Cerises</li>
• Cerises </ul>
• il faut utiliser la balise <ul> </ul> pour les listes non ordonnée
• chaque élément doit être entre deux balises <li></li>.

20/09/2023 31

LISTES ORDONNEES / NON-ORDONNEES /

IMBRIQUEES
Liste ordonnée

Une liste ordonnée fonctionne de la même façon, seule une balise change : il faut
remplacer <ul></ul>par <ol></ol>.
À l'intérieur de la liste, on ne change rien : on utilise toujours des
balises <li></li> pour délimiter les éléments.

L'ordre dans lequel vous placez les éléments de la liste est important. Le
premier <li></li> sera l'élément n° 1, le second sera le n°2 etc…

20/09/2023 32

16
 20/09/2023

LISTES ORDONNEES / NON-ORDONNEES /

IMBRIQUEES
Liste ordonnée

20/09/2023 33

TYPES DES LISTES ORDONNEES

L’attribut «type» définit comment les nombres ordinaux doivent être
affichés.
Il peut valoir les caractères suivants:

20/09/2023 34

17
 20/09/2023

TYPES DES LISTES NON ORDONNEES

L’attribut «type» définit comment les nombres ordinaux doivent être
affichés. Il peut valoir les caractères suivants:

20/09/2023 35

EXERCICE D’APPLICATION (4)

• Les mois de l’hiver
i. Décembre
ii. Janvier
iii. Février
• Les mois du printemps
I. Mars
II. Avril
III. Mai
• Les mois de l’été
A. Juin
B. Juillet
C. Août
20/09/2023 36

18
 20/09/2023

LES LIENS
Un lien vers un site web externe
• Les liens vers un site sont écrits d'une façon différente (par défaut, en bleu et
soulignés) et un curseur en forme de main apparaît lorsqu'on pointe dessus.

• Exemple : lien qui amène vers le Site Wikipedia :

Bonjour. Souhaitez-vous visiter le Site Wikipedia?

• Pour faire un lien, la balise que nous allons utiliser : <a>. Il faut cependant lui
ajouter un attribut, href, pour indiquer vers quelle page le lien doit conduire.

<p>Bonjour. Souhaitez-vous visiter le

<a href="[Link] ">Site wikipedia</a></p>
20/09/2023 37

LES LIENS
Un lien vers une page interne de notre site
• Nous avons deux fichiers HTML différents ([Link] et [Link]) dans
le même dossier

20/09/2023 38

19
 20/09/2023

LES LIENS
Un lien vers une page interne de notre site
• Comment faire un lien de la page 1 vers la page 2 ?

• si les deux fichiers sont situés dans le même dossier, il suffit d'écrire comme
cible du lien le nom du fichier vers lequel on veut amener. Par exemple : <a
href="[Link]">. On dit que c'est un lien relatif.
• [Link] : <p>Bonjour. Souhaitez
vous consulter <a href="[Link]">la page 2</a> ?</p>

• [Link] : <p>Retourner vers <a href="[Link]">la page 1</a> ?</p>

20/09/2023 39

LES LIENS
Un lien vers une page interne de notre site
• Deux pages situées dans des dossiers différents

Dans ce cas de figure, le lien doit être rédigé

comme ceci :
<a href="contenu/[Link]">
S'il y avait plusieurs sous-dossiers, on écrirait ceci :
<a href="contenu/autredossier/[Link]">

Si votre fichier cible est placé dans un dossier qui se trouve « plus haut » dans
l'arborescence, il faut écrire deux points comme ceci : <a href="../[Link]">

20/09/2023 40

20
 20/09/2023

LES LIENS
Un lien vers un ancre
Une ancre est une sorte de point de repère à l’interieur d’une page HTML
qui mène vers un paragraphe.

20/09/2023 41

LES LIENS
Un lien vers un 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.
Exemple
<a href="#mon_ancre">Aller vers l'ancre</a>
Normalement, si vous cliquez sur le lien, cela vous amènera plus bas dans la
même page (à condition que la page comporte suffisamment de texte pour que
les barres de défilement se déplacent automatiquement).
20/09/2023 42

21
 20/09/2023

LES LIENS
Un lien vers un ancre
<h1>Ma grande page</h1>
<p>
Aller directement à la partie traitant de :<br />
<a href="#cuisine">La cuisine</a><br />
<a href="#rollers">Les rollers</a><br />
<a href="#arc">Le tir à l'arc</a><br />
</p>
<h2 id="cuisine">La cuisine</h2>
<p>... (beaucoup de texte) ...</p>
<h2 id="rollers">Les rollers</h2>
<p>... (beaucoup de texte) ...</p>
<h2 id="arc">Le tir à l'arc</h2>
<p>... (beaucoup de texte) ...</p>
20/09/2023 43

LES LIENS
Un lien qui affiche une infobulle au survol
• Vous pouvez utiliser l'attribut title qui affiche une information
lorsqu'on pointe sur le lien. Cet attribut est facultatif.

<p>Bonjour. Souhaitez-vous visiter le <a

href="[Link] title="Réservé aux
débutants">Site Wikipedia</a> ?</p>

20/09/2023 44

22
 20/09/2023

LES LIENS
Un lien qui ouvre une nouvelle fenêtre

• Il est possible de « forcer » l'ouverture d'un lien dans une nouvelle

fenêtre. Pour cela, on rajoutera target="_blank" à la balise <a> :

• <p>Bonjour. Souhaitez-vous visiter le <a

href="[Link] target="_blank" >Site
Wikipedia</a> ?</p>

20/09/2023 45

LES LIENS
Un lien pour envoyer un e-mail
• Si vous voulez que vos visiteurs puissent vous envoyer un e-mail, vous
pouvez utiliser des liens de typemailto.
• vous devez simplement modifier la valeur de l'attribut href comme ceci :

<p><a href="[Link] un e-
mail !</a></p>

• Il suffit donc de faire commencer le lien par mailto: et d'écrire l'adresse e-

mail où on peut vous contacter.

20/09/2023 46

23
 20/09/2023

LES LIENS

Un lien pour télécharger un fichier

• Par exemple, supposez que vous vouliez faire télécharger [Link].
• Placez simplement ce fichier dans le même dossier que votre page web (ou
dans un sous-dossier) et faites un lien vers ce fichier :

<p><a href="[Link]">Télécharger le fichier</a></p>

• Le navigateur va lancer la procédure de téléchargement lorsqu'on cliquera

sur le lien.

20/09/2023 47

EXERCICE D’APPLICATION (5)

Créer deux pages html:

1. Créer [Link] contenant :

1. Créer un titre sport et un paragraphe du sport
2. Créer un titre éducation et un paragraphe éducation
3. Créer un ancre vers sport et un ancre vers éducation
4. Ajouter une info bulle dans les deux liens
5. Créer un lien qui ouvre [Link] dans un nouvelle onglet
2. Créer [Link] contenant :
1. un lien vers [Link]
2. Créer un lien qui envoie un email a contact@[Link]
3. Créer un lien qui télécharge un fichier pdf

20/09/2023 48

24
 20/09/2023

Les Images
• <IMG SRC="Adresse de l'image" /> Afficher l'image qui se trouve à
l'adresse.
• La balise image possède de nombreux attributs.
1. Texte alternatif alt="****" Pour les browser n'ayant pas l'option
"image" activée
2. Dimensions width=? height=? Hauteur et largeur (en pixels)
3. border=? (en pixels) Bordure
4. align= (top, middle, left, right …)
• Lien sur Image : <a HREF="[Link]"><img SRC="[Link]"></a>

20/09/2023 49

Les arrière-plans
• Le langage HTML permet d'agrémenter la présentation du document d'un arrière-
plan [background] coloré ou à l’utilisation d’une image ce qui apporte un élément
"artistique" à votre page.
• La balise à utiliser ne pose pas de problème :
• Avec Couleur: <BODY BGCOLOR="#ff9955ss">
• Avec Image: <BODY BACKGROUND="[Link]">

20/09/2023 50

25
 20/09/2023

Les tableaux
• Un tableau est composé de lignes et de colonnes qui forment les
cellules du tableau.
• Les balises de base sont donc :
• Définition du tableau [Table] <TABLE></TABLE> Début et fin de tableau
• Définition de l’en-tête du tableau [Table Header] <TH></TH>
• Définition d'une ligne [Table Row] <TR></TR> Début et fin de ligne
• Définition d'une cellule [Table Data] <TD></TD> Début et fin de cellule

20/09/2023 51

Les tableaux
• <tbody> permet de regrouper un ou plusieurs éléments <tr> afin de
former le corps d'un tableau <table>.
• <thead> définit un ensemble de lignes qui définit l'en-tête des
colonnes d'un tableau.
• <tfoot> permet de définir un ensemble de lignes qui résument les
colonnes d'un tableau.
• L'élément <tbody>, ainsi que les éléments <thead> et <tfoot>, fournit
des informations sémantiques qui sont utilisées pour l'affichage à
l'écran, l'impression et l'accessibilité.

20/09/2023 52

26
 20/09/2023

Les tableaux
<tbody> - <thead> - <tfoot> :

20/09/2023 53

Les tableaux
• Bordure de cadre [Border] <TABLE border=?> </TABLE>
• L'espace entre les cellules ou l'épaisseur des lignes du quadrillage:
<TABLE cellspacing=?>
• L'enrobage des cellules ou l'espace entre le bord et le contenu:
<TABLE cellpadding=?>
• La largeur de la table <TABLE width=?>

20/09/2023 54

27
 20/09/2023

Les tableaux

20/09/2023 55

Les tableaux
• <TABLE border=2>
• <TR><TD>1</TD><TD>2</TD></TR>
• <TR><TD>3</TD><TD>4</TD></TR>
• </TABLE>

• <TABLE border=2 cellspacing=10>

• <TR><TD>1</TD><TD>2</TD></TR>
• <TR><TD>3</TD><TD>4</TD></TR>
• </TABLE>

• <TABLE border=2 cellpadding=10>

• <TR><TD>1</TD><TD>2</TD></TR>
• <TR><TD>3</TD><TD>4</TD></TR>
• </TABLE>
20/09/2023 56

28
 20/09/2023

Les cellules des tableaux

• les cellules peuvent contenir tous les éléments Html :
• du texte
• des images
• des liens
• et même des tableaux

• Largeur d'une cellule <TD width=?> en pixels ou <TD width=%> en

pourcentage
• Fusion de lignes <TD rowspan=?>
• Fusion de colonnes <TD colspan=?>
20/09/2023 57

Les cellules des tableaux

EXEMPLE :
• Je veux un tableau centré qui occupe 60% de la fenêtre avec sur une
ligne, trois colonnes égales.

• <CENTER><TABLE width=60% border=1>

• <TR>
• <TD width=33%>cellule1</TD>
• <TD width=33%>cel. 2</TD>
• <TD width=34%>3</TD>
• </TR>
• </TABLE></CENTER>
20/09/2023 58

29
 20/09/2023

Les cellules des tableaux

Exemple 1 :

Exemple 2 :

20/09/2023 59

Les cellules des tableaux

Exemple 1 :
<TABLE width=60% border=1>
<TR>
<TD colspan=3>cellule 1</TD>
</TR>
<TR>
<TD width=33%>cellule 1</TD>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
</TR>
</TABLE>
20/09/2023 60

30
 20/09/2023

Les cellules des tableaux

Exemple 2 :
<TABLE width=60% border=1>
<TR>
<TD width=33% rowspan=2>cellule 1</TD>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
</TR>
<TR>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
</TR>
</TABLE>
20/09/2023 61

Exemple 1 :

Exercice
<TABLE width=60% border=1>
<TR>
<TD colspan=3>cellule 1</TD>
</TR>
<TR>
<TD width=33%>cellule 1</TD>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
</TR>
Exemple 2 :
</TABLE> <TABLE width=60% border=1>
<TR>
<TD width=33% rowspan=2>cellule 1</TD>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
</TR>
1. Reproduisez ce tableau en le centrant horizontalement
<TR>
2. Donner la valeur 6 à cellpading et cellspacing. <TD width=33%>cel 2</TD>
3. Modifier la dimension des cellules. <TD width=34%>3</TD>
</TR>
Remarque : Utilisez les attributs: ‘bgcolor’, ‘align’, ‘valign’
</TABLE>
20/09/2023 62

31
 20/09/2023

EXERCICE D’APPLICATION (6)

1. Reproduisez ce tableau en le centrant horizontalement
2. Donner la valeur 6 à cellpading et cellspacing.
3. Modifier la dimension des cellules.
Remarque : Utilisez les attributs: ‘bgcolor’, ‘align’, ‘valign’

20/09/2023 63

Corrigé

20/09/2023 64

32
 20/09/2023

Les formulaires
Les formulaires sont utilisés pour échanger des données
entre le poste client et le serveur. Cet échange de données
fait appel à des programmes spéciaux s’exécutant sur le
serveur.

1. L’utilisateur remplit le formulaire et le valide ce qui

a pour effet d’envoyer des données vers le serveur
2. Le script s’exécute sur le serveur qui effectue un
traitement en produisant éventuellement des
résultats

3. Les résultats sont transmis en code HTML au poste

client. Ils sont affichés par le navigateur

20/09/2023 65

Les formulaires (envoi de paramètres)

• Un formulaire est délimité par les balises <FORM> et </FORM>.
• <FORM METHOD="POST" ou "GET" ACTION="url">
• ...
• </FORM>
• champs de saisie se trouvent entre ces deux balises. Les données saisies sont
transmises selon deux méthodes indiquées par l’attribut METHOD au script (sur le
serveur)

20/09/2023 66

33
 20/09/2023

Les formulaires (envoi de paramètres)

• METHOD = GET : 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
• METHOD = POST : permet l’envoi de listes de données plus longues (les
paramètres sont envoyés indépendamment de l’adresse URL du script).
• Action : indique l'adresse d'envoi (script , [Link] email, …)
• Enctype : (facultatif) spécifie le codage des données dans l'URL

20/09/2023 67

Les formulaires (Composantes)

20/09/2023 68

34
 20/09/2023

Les formulaires (Zone de Saisie)

Les zones de saisie sont définies par la balise <INPUT> qui possède les
attributs suivants :

• NAME : nom du champ de saisie ;

• TYPE : type de champ ;
• text : texte ;
• password : mot de passe
• checkbox : boite à cocher
• radio : boite d’option
• Email : champ email
• Datetime-local : champ date
• SIZE : taille du champ
20/09/2023 • MAXLENGHT : nombre maximum de caractères à saisir 69

Les formulaires (Zone de Saisie)

• Champ de saisie sur une ligne
<INPUT NAME="nom_champ" TYPE="text" value="qqs mots" />

• Saisie d’un mot de passe

<INPUT NAME="password" TYPE= "Password" / >

20/09/2023 70

35
 20/09/2023

Les formulaires (Zone de Saisie)

• Cases à cocher (sélection de plusieurs éléments)

• <INPUT NAME="pain" TYPE=CHECKBOX value=1> 1
• <INPUT NAME="vin" TYPE=CHECKBOX value=2 CHECKED>2
• <INPUT NAME="potage" TYPE=CHECKBOX value=3> 3

• cases à option ou boutons radio (sélection d’un seul élément)

• <INPUT NAME="X" TYPE=RADIO VALUE="2">tiède
• <INPUT NAME="X" TYPE=RADIO CHECKED VALUE="1">froid

20/09/2023 71

Les formulaires (Les Boutons)

•Le déclenchement de l’envoi des paramètres peut s’effectuer avec
un bouton «Envoi» :
<INPUT TYPE=SUBMIT VALUE="Envoyer">

• La remise à leur valeur initiale des paramètres peut également

s’effectuer ave un bouton «Reset»
<INPUT TYPE=RESET VALUE="Rétablir">

20/09/2023 72

36
 20/09/2023

Les formulaires (Exemples)

• Exemple 1 :

20/09/2023 73

Les formulaires (Exemples)

• Exemple 1 :

<FORM METHOD=GET
ACTION="[Link]

Merci de bien vouloir indiquer votre nom :

<INPUT NAME="Nom" TYPE=Text SIZE=32 MAXLENGTH=32>
<p><INPUT TYPE=SUBMIT VALUE="Envoyer">
<INPUT TYPE=RESET VALUE="Rétablir"></p>
</FORM>

20/09/2023 74

37
 20/09/2023

Les formulaires (Exemples)

• Exemple 2 :

20/09/2023 75

Les formulaires (Exemples)

• Exemple 2 :
<form action="[Link] method="post">
Entrez votre prénom: <input type="text" name="prenom">
<br>
Entrez votre nom : <input type="text" name="nom" size="25">
<br>
Entrez un mot de passe : <input type="password" name="pass"
size=10 maxlenght=10>
<br><br>
<input type="submit" value="Envoyer" name="submit">
<input type="reset" value="Effacer les données" name="reset">
</form>

20/09/2023 76

38
 20/09/2023

Les formulaires (Exemples)

• Exemple 3 :

20/09/2023 77

Les formulaires (Exemples)

• Exemple 3 :
<FORM METHOD=GET ACTION="[Link]
nom : <INPUT NAME="Nom" TYPE=Text MAXLENGTH=32>
<br>
prenom : <INPUT NAME="prenom" TYPE=Text MAXLENGTH=32>
<br>
Sexe:
<INPUT NAME="X" TYPE=RADIO VALUE="2">Homme
<INPUT NAME="X" TYPE=RADIO CHECKED VALUE="1">Femme
<br>
<P><INPUT TYPE=SUBMIT VALUE="Envoyer">
<INPUT TYPE=RESET VALUE="Rétablir"></p>
</FORM>

20/09/2023 78

39
 20/09/2023

Les formulaires (Exemples)

• Exemple 4 :

20/09/2023 79

Les formulaires (Exemples)

• Exemple 4 :
<FORM METHOD=GET ACTION="[Link]
nom : <INPUT NAME="Nom" TYPE=Text MAXLENGTH=32>
<br>
prenom : <INPUT NAME="prenom" TYPE=Text MAXLENGTH=32>
<br>
Loisirs :
<INPUT NAME="foot" TYPE=CHECKBOX value=1> foot
<INPUT NAME="lecture" TYPE=CHECKBOX value=2 CHECKED>lecture
<INPUT NAME="voyage" TYPE=CHECKBOX value=3> voyage
<br>
<P><INPUT TYPE=SUBMIT VALUE="Envoyer">
<INPUT TYPE=RESET VALUE="Rétablir"></p>
</FORM>
20/09/2023 80

40
 20/09/2023

Liste Déroulante
• <select> et </select> : crée une liste déroulante.
• Attributs : name, size (spécifie le nombre d'éléments
visibles)…

• <option> et </option> : ajoute un élément à la liste

déroulante créée avec un select.

• On lui donne une valeur grâce à son attribut "value".

<select>
<option value=bleu> bleu </option>
<option value= rouge> rouge </option>
<option value=jaune> jaune </option>
</select>
20/09/2023 81

Zone de texte
• <textarea> et </textarea> : délimite une
zone de texte.
• On peut en spécifier la taille avec:
• "rows" (nombre de lignes)
• "cols" (nombre de colonnes).

• Exemple :
<textarea name="texte" cols=40 rows=5>
Texte de départ
</textarea>

20/09/2023 82

41
 20/09/2023

Les FieldSet
• L'élément HTML <fieldset> est utilisé pour regrouper
plusieurs contrôles interactifs ainsi que des étiquettes
(<label>) dans un formulaire web.

<form action= "url" method="post"> <fieldset>

<legend>Titre</legend>
<input type="radio" name="radio">
<label for="radio">Cliquez moi</label>
</fieldset>
</form>

20/09/2023 83

placeholder
 placeholder est un attribut qui permet de renseigner un texte indicatif par défaut
dans un champ de formulaire.
C'est une valeur qui s'efface dès que l'utilisateur active le champ de formulaire.

<input type="text" placeholder="Entrez votre login">

Éléments compatibles L'attribut placeholder peut être placé sur les éléments :
•<input> : de type text, , password, url, tel, email
•<textarea>

20/09/2023 84

42
 20/09/2023

required
• L'attribut required permet de rendre obligatoire le remplissage d'un champ et
bloquer la validation du formulaire si l'un des champs (concernés par cet attribut)
n'a pas été renseigné.

<form>
<input type="text" required>
<input type=submit />
</form>
20/09/2023 85

pattern
• Les expressions régulières permettent de préciser le format attendu d’une
chaine de caractères.
• Ainsi, on peut mettre un champs qui n’accepte qu’une chaine alphabétique
d’une longueur entre 4 et 10 caractères :

<input type="text" name="username" pattern="[A-Za-z]{4,10}">

Exemple : Ce champ attend une valeur numérique d'au moins 5 chiffres

précédés d'une lettre majuscule comprise entre A et F.

Si le format n'est pas respecté, le navigateur en informe l'utilisateur.

<input type="text" pattern="[A-F][0-9]{5}">

20/09/2023 86

43
 20/09/2023

L’attribut autofocus
• Encore une fois, HTML5 élimine les solutions JavaScript.

• Si un champs particulier doit être sélectionné après le

chargement de la page.
• Exemple :
<input type="text" name="someInput" autofocus>

20/09/2023 87

Champ de type email

• Toujours très proche du type text, ce champ est équivalent au type url, seul le
format attendu change.
• Ce champ attend au minium un caractère (caractère non accentué comprenant
les séparateurs tiret ou underscore) suivi d'un @ suivi à son tour d'un caractère.

Exemple d'entrée invalide : é@ç

Exemples d'entrées valides : -@_ , f@r

<input type="email" name="user_email">

20/09/2023 88

44
 20/09/2023

Champ de types date, time

• Champ de type date
<input type="date" name="anniversaire">

 Champ de type time

<input type="time" name=“wakeup">

20/09/2023 89

Champ de type number

• Le type de champ number permet de renseigner une valeur numérique.

<input type="number" name="howmuch">

• Le champ de formulaire est alors transformé en une sorte de boite permettant l'incrémentation et la
décrémentation d'une valeur numérique initiale (0 par défaut), lorsque la prise en charge par le navigateur est
complète.

• L'attribut step : Cet attribut permet de définir le pas de l'incrémentation.

<input type="number" step="8">
• Les attributs min et max : Ces deux attributs permettent de limiter le nombre dans un intervalle défini.
<input type="number" step="8" value="0" min="0" max="64">
20/09/2023 90

45
 20/09/2023

Champ de type range

Ce champ propose un contenu évalué approximatif, retourne une valeur numérique qui correspond
à la position du curseur.

Votre niveau en HTML

<input type="range" value="15" max="50" min="0" step="5">

20/09/2023 91

Champ de type color

Ce type permet de transformer le champ pour sélectionner un code couleur dans
une palette. La valeur attendue est une couleur au format héxadécimal (un dièse
suivi de 6 caractères alpha-numériques compris entre A et F, et 0 et 9).

<input type="color" value="#fad345" name="textcolor">

20/09/2023 92

46
 20/09/2023

Formulaire avec complétion automatique

<h1>Choix de prénom</h1>
<form id="send" action="#" method="get">
<fieldset>
<legend>Entrez votre prénom</legend>
<input type="text" name="le-prenom" list="prenoms" autocomplete="on" autofocus="autofocus"/>
<datalist id="prenoms">
<option>Gérard</option>
<option>Alain</option>
<option>Albert</option>
<option>Robert</option>
<option>Jean</option>
<option>Zoé</option>
</datalist>
</fieldset>
</form>

20/09/2023 93

VALIDATION & COMPATIBILITE

• Le W3C met deux outils à notre disposition :
• Validateur HTML : [Link]
• Validateur CSS : [Link]

• Vous devez vous efforcer d’avoir toujours un code valide.

20/09/2023 94

47