Université Hassan 1ER_ SETTAT

Ecole supérieur de l’éducation et de formation

Berrechid

Rapport du TP

Développement Web

Préparée par :
EDDEBBARHI Khadija Encadrée par :

TAALI Ikram Mme DAGHOURI Ansar

Année Universitaire : 2023/2024 1

 Sommaire
TP N°2: EXERCICE1..............................................................................................................3
I. But du TP.........................................................................................................................
II. Énoncé..............................................................................................................................
III. Résolution.........................................................................................................................
IV. Conclusion.......................................................................................................................

TP N°2 : EXERCICE 2..............................................................................................................8

1. Énoncé.............................................................................................................................
2. Résolution........................................................................................................................
3. Conclusion.......................................................................................................................

TP N°2: EXERCICE 3 ............................................................................................................12

V. Énoncé..............................................................................................................................
VI. Résolution ........................................................................................................................
VII. Conclusion........................................................................................................................

2
 Université Hassan 1ER_ SETTAT
Ecole supérieur de l’éducation et de formation
Berrechid

TP N°2 : Exercice 1

I. BUT du TP :

Savoir créer un formulaire en HTML..

Savoir insérer n'importe quel élément HTML de base dans une balise
FORM (textes,boutons,tableaux,liens,...)

II. Enoncé du Ex1 :

Figure N°1 : Enoncée du Ex 1

2

3
 Université Hassan 1ER_ SETTAT
Ecole supérieur de l’éducation et de formation
Berrechid

*Intérêt de formulaires :
Les formulaires interactifs permettent aux auteurs de pages Web de doter leur
page web d'éléments interactifs permettant par exemple un dialogue avec les
internaute, à la manière des coupons-réponse présents dans certains magazines.
Le lecteur saisit des informations en remplissant des champs ou en cliquant sur
des boutons, puis appuie sur un bouton de soumission (submit) pour l'envoyer
soit à un URL, c'est-à-dire de façon générale à une adresse e-mail ou à un script
de page web dynamique tel que PHP, ASP ou un script CGI.

Pour la résolution de cette énoncée , il faut tout d’abord savoir que :

Les formulaires sont délimités par la balise <FORM> ... </FORM>, une balise qui permet de
regrouper plusieurs éléments de formulaire (boutons,champs de saisie,...) et qui possède les
attributs obligatoires suivants:
• METHOD indique sous quelle forme seront envoyées les réponses
« POST » est la valeur qui correspond à un envoi de données stockées dans le corps de la
requête, tandis que « 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 (pour plus de renseignement sur
les méthodes POST et GET
• ACTION indique l'adresse d'envoi.

*Il est possible d'insérer n'importe quel élément HTML de base dans une balise FORM
(textes,boutons,tableaux,liens,...) mais il est surtout intéressant d'insérer des éléments
interactifs. Ces éléments interactifs sont:
• La balise INPUT: un ensemble de boutons et de champs de saisie
• La balise TEXTAREA: une zone de saisie
• La balise SELECT: une liste à choix multiples
Balise INPUT
La balise INPUT est la balise essentielle des formulaires, car elle permet de créer un bon
nombre d'éléments "interactifs". La syntaxe de cette balise est la suivante:
<INPUT type="Nom 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é par
l'attribut value.

4
L'attribut type permet de préciser le type d'élément que représente la balise INPUT, voici les
valeurs que ce champ peut prendre:
• checkbox: il s'agit de cases à cocher pouvant admettre deux états: checked (coché) et, unchecked
(non coché). Lorsque la case est coché la paire nom/valeur est envoyée au CGI
• image: il s'agit d'un bouton de soumission personnalisé, dont l'apparence est l'image situé à
l'emplacement précisé par son attribut SRC
• password: il s'agit d'un champ de saisie, dans lequel les caractères saisis apparaissent sous,forme
d'astérisques afin de camoufler la saisie de l'utilisateur
• radio: il s'agit d'un bouton permettant un choix parmi plusieurs proposés (l'ensemble des boutons
radios devant porter le même attribut name. La paire nom/valeur du bouton radio sélectionné sera
envoyé au CGI. Un attribut checked pour un des boutons permet de préciser le bouton sélectionné
par défaut
• 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
• submit: il s'agit du bouton de soumission permettant l'envoi du formulaire. Le texte du bouton
peut être précisé grâce à l'attribut value
• text: il s'agit d'un champ de saisie permettant la saisie d'une ligne de texte. 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

III. Résolution du Ex 1 :

5
Figure N°2 : Code HTML du Ex 1
2

6
 Figure N°3 : Résultat du Ex 1
2

III. Conclusion du Ex 1:

Dans cette exercice du TP2 ,on a vu l’objectif du formulaire qui est d’Interagir
avec l’utilisateur en permettant d'obtenir des réponses de l'utilisateur.
Afin de pouvoir enrichir les éléments de formulaire en HTML,des nouveaux
types ont été ajoutés pour <input> en HTML 5,qui permet de définir les
différents types de champ d’un formulaire :
zone de saisie,
case à cocher,
bouton radio,
bouton de confirmation,
bouton de remise à zéro des champs.

7
 TP N°2 : Exercice 2

1. Enoncé du Ex 2 :

Figure N°4 : Énoncé du Ex 2

2

8
Pour la résolution de cette énoncée , il faut tout d’abord savoir que :

Balise Textarea

La balise TEXTAREA permet de définir une zone de saisie plus vaste par rapport à la simple ligne
de saisie que propose la balise INPUT. Cette balise possède les attributs suivants:
• cols: représente le nombre de caractères que peut contenir une ligne
• rows: représente le nombre de lignes
• name: représente le nom associé au champ, c'est le nom qui permettra d'identifier le champ dans la
paire nom/valeur
• value: représente la valeur qui sera envoyée par défaut au script si le champ de saisie n'est pas
modifié par une frappe de l'utilisateur.

Balise SELECT
La balise SELECT permet de créer une liste déroulante d'éléments (précisés par des balises
OPTION à l'intérieur de celle-ci). Les attributs de cette balise sont:
• name: représente le nom associé au champ, c'est le nom qui permettra d'identifier le
champdans la paire nom/valeur .

2. Résolution du Ex 2 :

9
Figure N°5: Code HTML du Ex 2
2

10
 Figure N°6: Résultat du Ex 2
2

3. Conclusion du Ex 2:

Dans cette exercice du TP2 , on a appliqué d’autres balises conteneur dans le

formulaire .
Pour la balise TEXTAREA , qui permet de définir une zone de texte pour saisir
des données de taille plus importante que dans une case de texte.
Pour la balise SELECT , qui permet de définir une liste de choix.

11
 TP N°2 : Exercice 3

V. Enoncé du Ex 3 :

Figure N°7: Énoncé du Ex 3

2

12
Pour la résolution de cette énoncée , il faut tout d’abord savoir que :
Les formulaires peuvent être mis en page à l'aide de tableaux (cela est même
conseillé pour avoir une mise en page soignée). Voici un exemple récapitulant
les points ci-dessus et montrant comment mettre en page un formulaire à l'aide
d'un tableau:
<FORM >
Formulaire
<TABLE BORDER=0>
<TR>
<TD>Nom</TD>
<TD>
<INPUT type=text name="nom">
</TD>
</TR>
< /FORM >

VI. Résolution du Ex 3 :

13
14
Figure N°8: Code HTML du Ex 3
2

15
 Figure N°9: Résultat du Ex 3
2

VII. Conclusion du Ex 3 :

Dans cette exercice du TP2 , on a pratiqué les formulaires en général ,d’on

conclut la structure d’un formulaire de saisie se compose d’un élément FORM
contenant essentiellement une suite de contrôles (éléments input, textarea, select,
button, etc.) mais aussi des éléments de structuration de document afin d’aligner
correctement les champs d’entrée.

16