Atelier 5
Exercice 1 :
*code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>formulaire ex 1</title>
</head>
<body>
<form>
<table>
<tr>
<td><label for="l1">votre prénom : </label></td>
<td><input type="text" id="l1"></td>
</tr>
<tr>
<td><label for="l2">votre nom : </label></td>
<td><input type="text" id="l2"></td>
</tr>
<tr>
<td><label for="l3">votre message : </label></td>
<td><textarea id="l3"></textarea></td>
</tr>
<tr>
<td><input type="button" value="valider ce
formulaire "></td>
</tr>
</table>
</form>
</body>
</html>
*Résultat :
Exercice 2 :
*Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>formulaire ex 2 </title>
</head>
<body>
<form action="[Link]" method="post" >
<fieldset>
<legend>
Vos coordonnées
</legend>
<input type="text" id="l1" placeholder="insert texte "
required> <label for="l1"> nom</label><br>
<input type="url" id="l2"> <label
for="l2">url</label><br>
<textarea id="l3" cols="30"></textarea> <label
for="l3"> your texte </label><br>
<input type="email" id="l4"> <label for="l4"> your
email</label><br>
<input type="number" id="l5"><label for="l5"> number of
children</label><br>
<input type="date" id="l6"><label for="l6"> date
birth</label><br>
<input type="color" id="l7"><label for="l7"> favorite
color </label><br>
<input type="file" id="l8"><label for="l8"> your
photo</label><br>
<button> envoyer </button><br>
</fieldset>
</form>
</body>
</html>
*Résultat :
Exercice 3 :
*Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title> formulaire ex 3 </title>
</head>
<body>
<form action="page_cible.php" method="GET">
<label for="id">Identifiant :</label>
<input type="text" id="id" required><br><br>
<label for="mdps">Mot de passe :</label>
<input type="password" id="mdps" required><br><br>
<input type="hidden" value="inscription">
<label for="tlph">Numéro de téléphone :</label>
<input type="tel" id="tlph" required><br><br>
<label for="fch">Télécharger un fichier :</label>
<input type="file" id="fch"><br><br>
<button type="submit">Envoyer</button>
</form>
</body>
</html>
*Résultat :
Exercice 4 :
*Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>formulaire ex 4 </title>
</head>
<body>
<form action="[Link]" method="post">
<fieldset>
<legend>Vos coordonnées</legend>
<table>
<tr>
<td><label for="l1"> Nom : </label></td>
<td><input type="text" id="l1"
placeholder="votre prénom"></td>
</tr>
<tr>
<td><label for="l2"> Prénom : </label></td>
<td><input type="text" id="l2"
placeholder="votre nom"></td>
</tr>
<tr>
<td><label for="l3"> Date de naissance :
</label></td>
<td><input type="date" id="l3"></td>
</tr>
<tr>
<td><label for="l4"> Mail : </label></td>
<td><input type="text" id="l4"
placeholder="votre mail"></td>
</tr>
<tr>
<td><label for="l5"> Votr site :
</label></td>
<td><input type="url" id="l5"></td>
</tr>
<tr>
<td><label for="l6"> Code : </label></td>
<td><input type="password" id="l6"></td>
</tr>
<tr>
<td><label for="l7"> Genre : </label></td>
<td><input type="radio" name="nn"
id="l7">Homme <input type="radio" name="nn" id="l7">Femme</td>
</tr>
<tr>
<td><label for="l8"> Pays : </label></td>
<td>
<select id="l8">
<option >Votr Pays</option>
<option
value="tunisie">Tunisie</option>
<option
value="maroc">Maroc</option>
<option
value="algerie">Algérie</option>
<option
value="autre..">Autre..</option>
</select>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Vos gouts</legend>
<input type="checkbox" id="l9">Tartes aux fraises à la
crème d'amandes <br>
<input type="checkbox" id="l10">Tartes aux prunes <br>
<input type="checkbox" id="l11">Tartes rustique aux
mirabelles de Lorraine, noisettes eet miel <br>
<textarea id="l12" placeholder="Découvrir vos gouts en
detail"></textarea>
</fieldset>
</form>
</body>
</html>
*Résultat :
Exercice :
*Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>formulaire</title>
</head>
<body>
<form action="[Link]" method="post">
<center>
<fieldset>
<legend>
Vos coordonnées
</legend>
<label for="l1">Quel est votre nom ?</label>
<input type="text" id="l1">
<label for="l2">Quel est votre prénom ?</label>
<input type="text" id="l2">
<label for="l3">Quel est votre telephone ?</label>
<input type=" tel" placeholder="Insert votre
teléphone">
<label for="l4">Quel est votre email ?</label>
<input type="email" placeholder="Insert votre
email">
</fieldset>
</center>
<fieldset>
<legend>Votre souhait</legend>
<label for="l5">Votre ville choisie pour votre
destination : </label>
<input type="radio" name="nn">Sousse <input
type="radio" name="nn">Mehdia <input type="radio" name="nn">Hammamet
<input type="radio" name="nn"> Gafsa <input type="radio" name="nn">
Autre .. <br>
<label for="l6">Si"Autre" ,veuillez préciser :
</label> <textarea id="l6"></textarea> <br>
<label for="l7">choisir vore préférence de ville :
</label>
<select id="pref_ville" multiple>
<option value="montagne">montagne</option>
<option value="mer">mer</option>
<option value="desert">desert</option>
<option value="autre..">autre..</option>
</select><br>
<label>choisir votre sasion préférer : </label><input
type="checkbox"> Eté <input type="checkbox"> L'automne <input
type="checkbox"> L'hiver <input type="checkbox"> Le printemps <br>
<label for="l8">choisir le date de debut de séjour
</label><input type="date"> <br>
<label for="l9">choisir le date du fin de séjour
</label> <input type="date"> <br>
</fieldset>
<fieldset id="button">
<input type="button" value="valider"
id="valider"><input type="button" value="annuler" id="valider">
</fieldset>
</form>
<style>
#button{
text-align: center;
}
</style>
</body>
</html>
*Résultat :
