Université de la Manouba
Ecole Supérieure d'Economie Numérique
Programmation Web
TD3- Formulaires
Objectifs généraux
-Utiliser un éditeur gratuit (Notepad++1) pour créer des pages Web.
- Développer des pages Web
- Visualiser les pages Web développés avec un ou plusieurs navigateurs
- Valider les pages Web HTML5
Objectifs spécifiques
-Créer des pages Web contenant des formulaires correctement structurés et valides
-Respecter les interfaces des pages Web données dans les énoncés.
-Créer des formulaires pouvant être correctement exploités avec JavaScript et PHP
ultérieurement :
Nom, action et méthode d’envoi du formulaire correctement renseignés
Tous les éléments sont correctement nommés et éventuellement bien identifiés, en
respectant les contraintes énoncées dans le cours
Tous les éléments contenus dans le formulaire figurent entre l’ouverture et la
fermeture du formulaire
Les attributs « value » sont correctement renseignés
Avant de commencer ...
La présentation avec CSS n’est pas demandée. Il s’agit de créer la structure des pages
uniquement.
La structure du site Web doit être créée.
Ce TD se base sur le TD1 et le TD2.
Consignes:
Tout fichier HTML doit contenir le code HTML de base, et doit être validé.
Le modèle de la structure d'un fichier HTML5 présenté dans le fichier [Link]
doit être respecté (niveau des titres, titre par section, titre par article...)
1
[Link]
Page 1
Exercice 1: Page de recherche- [Link]
1. Ouvrir le fichier [Link].
2. Le contenu de ce fichier doit être le suivant:
Il est à noter que :
La section a un titre de niveau 2 « Recherche de livres dans la bibliothèque »
L’article a un titre de niveau 3 «Choix des critères de recherche »
Le contenu du formulaire "Recherche" est en envoyé par "post" au fichier
[Link]
Chaque label et le champ correspondant figurent dans une division.
Les deux boutons d’envoi et annuler sont dans une seule division (Utiliser la
balise button).
La liste contient les éléments suivants:
Exercice 2: Page d'inscription/connexion- [Link]
1. Créer le fichier [Link].
2. Le contenu de ce fichier doit être le suivant:
Page 2
Il est à noter que :
Chaque formulaire figure dans un article.
Chaque label et le champ correspondant figurent dans une division.
Les deux boutons sont dans une seule division.
Le contenu du formulaire "connexion" est en envoyé par "post" au fichier
"login_check.php".
Le champ username contient l'adresse email dans le formulaire de connexion.
Il est de taille 40, la longueur maximale est de 50. Il est obligatoire et prend
automatiquement le focus.
Le champ password est de taille 30, la longueur maximale est de 30. Il est
obligatoire.
Le contenu du formulaire "creation" est en envoyé par "post" au fichier
"[Link]".
La liste "Civilité" contient M., Mme et Melle.
Le champ tel est de longueur maximale 8 et suit un pattern composé de 8
chiffres (pattern="[0-9]{8}")
Le champ date, a une valeur minimale="1990-01-01", maximale="2000-01-01" et
une valeur="1992-01-01"
TAF: Vérifier l'état d'utilisation input type="date" sur le site [Link]
Page 3
Exercice 3: Page d'évaluation- [Link]
1. Ouvrir le fichier [Link].
2. Le contenu de ce fichier doit être le suivant:
Il est à noter que :
Chaque label et le champ correspondant figurent dans une division.
Les deux boutons sont dans une seule division.
En cliquant sur le lien "Si vous êtes déjà inscrit, cliquez ici ", l'utilisateur va être
dirigé vers la page [Link] à l'endroit nommé "inscrit".
En cliquant sur le lien "Si vous êtes nouveau, cliquez ici ", l'utilisateur va être dirigé
vers la page [Link] à l'endroit nommé "nouveau".
Le contenu du formulaire est en envoyé par "post" au fichier [Link]
La liste livre contient les éléments suivants:
L'expertise est de type numérique et varie entre 0 et 5 avec un pas de 1.
L'évaluation varie entre 0 et 5 avec un pas de 1. Pour afficher la valeur choisie, il
faudra ajouter le code suivant au niveau de l'input
onChange="showValue([Link])".
Le code suivant doit être ajouté après l'input:
<span id="valeur_evaluation">0</span>
<script>
function showValue(newValue) {
[Link]("valeur_evaluation").innerHTML=newValue;
}
</script>
Page 4
Exercice 4: Page de contact- [Link]
1. Ouvrir le fichier [Link].
2. Le contenu de ce fichier doit être le suivant:
Il est à noter que :
Le contenu du formulaire est en envoyé par "post" au fichier [Link]
Le champ Commentaires contient 3 lignes et 50 colonnes.
Attention aux cases cochées initialement.
Page 5
Correction
Exercice 1: Page de recherche- [Link]
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Bibliothèque de l'ESEN- Recherche de livres</title>
<meta name="description" content="Site de la bibliothèque de l'Ecole Supérieure
d'Economie Numérique- Recherche" />
<meta name="keywords" content="Economie numérique, Informatique, marketing, e-
commerce, recherche" />
<link rel="stylesheet" href="../CSS/[Link]" />
</head>
<body>
<header>
<img src="../images/[Link]" alt="Logo de l'ESEN" class="logoESEN" />
<h1 id="titre_principal">Bibliothèque de l'ESEN</h1>
</header>
<nav>
<ul>
<li> <a href="../[Link]">Accueil</a> </li>
<li> <a href="[Link]">Liste des livres</a> </li>
<li> <a href="[Link]">Recherche</a> </li>
<li> <a href="[Link]">Evaluation</a> </li>
<li> <a href="[Link]">Contact</a> </li>
</ul>
<form name="Recherche" method="post" action="[Link]">
<input type="search" name="recherche" placeholder="Recherche">
<button type="submit" name="envoi">Chercher</button>
</form>
</nav>
<section>
<h2>Recherche de livres dans la bibliothèque </h2>
<article>
<h3>Choix des critères de recherche </h3>
<form name="Recherche" method="post" action="[Link]">
<div>
<label for="titre">Titre du livre</label>
<input type="text" name="titre" id="titre" placeholder="Titre du livre"/>
</div>
<div>
<label for="categorie">Catégorie du livre</label>
<select name="categorie" id="categorie">
<option value="Programmation Web">Programmation Web</option>
<option value="Référencement Web">Référencement Web</option>
<option value="e-commerce">Commerce Electronique</option>
<option value="Marketing">Marketing</option>
Page 6
<option value="Autre">(Autre)</option>
</select>
</div>
<div>
<button type="submit" name="envoi">Chercher livres</button>
<button type="reset" name="reset">Annuler</button>
</div>
</form>
</article>
</section>
<footer>
<div>ESEN © 2018-2019 </div>
</footer>
</body>
</html>
Exercice 2: Page d'inscription/connexion- [Link]
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Bibliothèque de l'ESEN</title>
<meta name="description" content="Site de la bibliothèque de l'Ecole Supérieure
d'Economie Numérique" />
<meta name="keywords" content="Economie numérique, Informatique, marketing, e-
commerce" />
<link rel="stylesheet" href="../CSS/[Link]" />
</head>
<body>
<header>
<img src="../images/[Link]" alt="Logo de l'ESEN" class="logoESEN" />
<h1 id="titre_principal">Bibliothèque de l'ESEN- Liste des livres</h1>
</header>
<nav>
<ul>
<li> <a href="../[Link]">Accueil</a> </li>
<li> <a href="[Link]">Liste des livres</a> </li>
<li> <a href="[Link]">Recherche</a> </li>
<li> <a href="[Link]">Evaluation</a> </li>
<li> <a href="[Link]">Contact</a> </li>
</ul>
<form name="Recherche" method="post" action="[Link]">
<input type="search" name="recherche" placeholder="Recherche">
<button type="submit" name="envoi">Chercher</button>
</form>
</nav>
Page 7
<section>
<h2>Inscription/Connexion</h2>
<article class="coteAcote">
<h3 id="inscrit">Déjà Inscrit</h3>
<form name="connexion" method="post" action="login_check.php">
<fieldset>
<div>
<label for="username">Adresse e-mail :</label>
<input id="username" type="text" maxlength="50" size="40"
name="username" required autofocus />
</div>
<div>
<label for="password">Mot de passe :</label>
<input id="password" type="password" maxlength="30" size="30"
name="password" required>
</div>
<div><a href="[Link]">> Mot de passe
oublié ?</a></div>
<div>
<button type="submit" name="submit">Se connecter</button>
<button type="reset" name="reset">Annuler</button>
</div>
</fieldset>
</form>
</article>
<article class="coteAcote">
<h3 id="nouveau">Nouveau Client</h3>
<form name="creation" method="post" action="[Link]">
<fieldset>
<div>
<label for="Civilite">Civilité</label>
<select id="Civilite" name="Civilite">
<option value="0">M.</option>
<option value="1">Mme</option>
<option value="2">Mlle</option>
</select>
</div>
<div>
<label for="Nom">Nom *</label>
<input type="text" id="Nom" name="Nom" required maxlength="50" />
</div>
<div>
<label for="Prenom">Prénom *</label>
<input type="text" id="Prenom" name="Prenom" required maxlength="50"
/>
</div>
<div>
<label for="email">Email *</label>
<input type="email" id="email" name="email" required/>
Page 8
</div>
<div>
<label for="password_first">Mot de passe *</label>
<input type="password" id="password_first" name="password_first"
required />
</div>
<div>
<label for="password_second">Confirmation du mot de passe *</label>
<input type="password" id="password_second" name="password_second"
required/>
</div>
<div>
<label for="url">Url de votre site Web</label>
<input type="url" id="url" name="url" placeholder="[Link]
/>
</div>
<div>
<label for="Tel">Tel</label>
<input type="tel" id="Tel" name="Tel" placeholder="Num de tel avec 8
chiffres" pattern="[0-9]{8}" maxlength="8" />
</div>
<div>
<label for="date">Date de naissance</label>
<input type="date" name="date" id="date" min="1990-01-01" max="2000-
01-01" value="1992-01-01" />
</div>
<div>
<input type="checkbox" id="NewsletterESENInscrit"
name="NewsletterESENInscrit" value="1" />
<label for="NewsletterESENInscrit">Je m'abonne aux newsletters de
l'ESEN</label>
</div>
<div>
<input type="checkbox" id="NewsletterBiblioESENInscrit"
name="NewsletterBiblioESENInscrit" value="1" />
<label for="NewsletterBiblioESENInscrit">Je m'abonne aux newsletters
de la bibliothèque l'ESEN</label>
</div>
<div>
<button type="button" name="submit">Créer mon compte</button>
<button type="reset" name="reset">Annuler</button>
</div>
<div>
<span id="champsObligatoires">* Champs obligatoires</span>
</div>
</fieldset>
</form>
</article>
</section>
<footer>
Page 9
<div>ESEN © 2018-2019 </div>
</footer>
</body>
</html>
Exercice 3: Page d'évaluation- [Link]
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Bibliothèque de l'ESEN-Evaluation</title>
<meta name="description" content="Site de la bibliothèque de l'Ecole Supérieure
d'Economie Numérique" />
<meta name="keywords" content="Economie numérique, Informatique, marketing, e-
commerce" />
<link rel="stylesheet" href="../CSS/[Link]" />
</head>
<body>
<header>
<img src="../images/[Link]" alt="Logo de l'ESEN" class="logoESEN" />
<h1 id="titre_principal">Bibliothèque de l'ESEN</h1>
</header>
<nav>
<ul>
<li> <a href="../[Link]">Accueil</a> </li>
<li> <a href="[Link]">Liste des livres</a> </li>
<li> <a href="[Link]">Recherche</a> </li>
<li> <a href="[Link]">Evaluation</a> </li>
<li> <a href="[Link]">Contact</a> </li>
</ul>
<form name="Recherche" method="post" action="[Link]">
<input type="search" name="recherche" placeholder="Recherche">
<button type="submit" name="envoi">Chercher</button>
</form>
</nav>
<section>
<h2>Evaluation des livres</h2>
<article>
<h3>Formulaire d'évaluation des livres</h3>
<div><a href="[Link]#inscrit">Si vous êtes déjà inscrit, cliquez
ici</a></div>
<div><a href="[Link]#nouveau">Si vous êtes nouveau, cliquez
ici</a></div>
<form name="evaluation" method="post" action="[Link]">
Page 10
<fieldset>
<legend>Evaluation</legend>
<div>
<label for="livre">Choisir un livre</label>
<select id="livre" name="livre">
<option value="HTML5 et CSS3">HTML5 et CSS3</option>
<option value="HTML">HTML</option>
<option value="Réussir son référencement web 2015">Réussir son
référencement web 2015</option>
</select>
</div>
<div>
<label for="expertise">Votre niveau d'expertise dans le domaine de ce livre (0 à
5)</label>
<input type="number" name="expertise" id="expertise" min="0" max="5"
value="0" step="1" />
</div>
<div>
<label for="evaluation_livre">Evaluation du livre</label>
<input type="range" name="evaluation_livre"
id="evaluation_livre" min="0" max="5" step="1" value="0" onChange="showValue([Link])"
/>
<span id="valeur_evaluation">0</span>
<script>
function showValue(newValue) {
[Link]("valeur_evaluation").innerHTML=newValue;
}
</script>
</div>
<div>
<button type="submit" name="submit">Enregistrer mon
évaluation</button>
<button type="reset" name="reset">Annuler</button>
</div>
</fieldset>
</form>
</article>
</section>
<footer>
<div>ESEN © 2018-2019 </div>
</footer>
</body>
</html>
Exercice 4: Page de contact- [Link]
<!DOCTYPE HTML>
<html lang="fr">
Page 11
<head>
<meta charset="utf-8"/>
<title>Bibliothèque de l'ESEN- Contact</title>
<meta name="description" content="Site de la bibliothèque de l'Ecole Supérieure
d'Economie Numérique" />
<meta name="keywords" content="Economie numérique, Informatique, marketing, e-
commerce" />
<link rel="stylesheet" href="../CSS/[Link]" />
</head>
<body>
<header>
<img src="../images/[Link]" alt="Logo de l'ESEN" class="logoESEN" />
<h1 id="titre_principal">Bibliothèque de l'ESEN</h1>
</header>
<nav>
<ul>
<li> <a href="../[Link]">Accueil</a> </li>
<li> <a href="[Link]">Liste des livres</a> </li>
<li> <a href="[Link]">Recherche</a> </li>
<li> <a href="[Link]">Evaluation</a> </li>
<li> <a href="[Link]">Contact</a> </li>
</ul>
<form name="Recherche" method="post" action="[Link]">
<input type="search" name="recherche" placeholder="Recherche">
<button type="submit" name="envoi">Chercher</button>
</form>
</nav>
<section>
<h2>Contact avec inscrits</h2>
<article>
<h3>Contact</h3>
<p><a href="[Link]#inscrit">Si vous êtes déjà inscrit, cliquez ici</a></p>
<p><a href="[Link]#nouveau">Si vous êtes nouveau, cliquez ici</a></p>
<form name= "Contact" action= "[Link]" method = "post">
<fieldset>
<legend>Forumaire de contact</legend>
<div>
<input type="radio" value="infos" name="TypeMessage" id="Informations"
/>
<label for="Informations">Informations</label>
<input type="radio" value="aide" name="TypeMessage" id="Aide" />
<label for="Aide">Aide</label>
<input type="radio" value="Suggestion" name="TypeMessage"
id="Suggestion" checked />
<label for="Suggestion">Suggestion</label>
<input type="radio" value="merci" name="TypeMessage"
id="Remerciements" />
Page 12
<label for="Remerciements">Remerciements</label>
</div>
<div>
<label for="Commentaires">Commentaires :</label><br/>
<textarea name="Commentaires" rows="3" cols="50"
id="Commentaires"></textarea>
</div>
<div>
<input type="checkbox" value="ContactRequested"
name="DemandeDeContact" id="contact" checked />
<label for="contact">Veuillez me contacter dès que possible, c'est
urgent...</label>
</div>
<div>
<button type="button" name="submit">Envoyer</button>
<button type="reset" name="reset">Effacer</button>
</div>
</fieldset>
</form>
</article>
</section>
<footer>
<div>ESEN © 2018-2019 </div>
</footer>
</body>
</html>
Page 13
