Correction exercices les formulaires en HTML série 01
Correction exercices les formulaires en HTML série 01
-
Objectifs
- ِConnaître les formulaires HTML.
-
Exercice 01
-
Énoncé
- Vous pouvez visualiser l’énoncé de l’exercice
-
Solution
-
Exercice 02
-
Énoncé
- Vous pouvez visualiser l’énoncé de l’exercice
-
Solution
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><application01</title>
</head>
<body>
<div width="100px">
<fieldset width="100px">
<legend>Coordonnées</legend>
<form>
<table>
<tr>
<td><label>Champs de texte</label></td>
<td><input type="text" placeholder="Saisir un mot"></td>
</tr>
<tr>
<td><label>URL</label></td>
<td><input type="url" placeholder="Saisir une URL"></td>
</tr>
<tr>
<td><label>E-mail</label></td>
<td><input type="email" placeholder="Adresse mail"></td>
</tr>
<tr>
<td><label>Un nombre</label></td>
<td><input type="number" ></td>
</tr>
<tr>
<td><label>Date</label></td>
<td><input type="date" ></td>
</tr>
<tr>
<td><label>Couleur</label></td>
<td><input type="color" ></td>
</tr>
<tr>
<td><label>Fichier</label></td>
<td><input type="file" ></td>
</tr>
</table>
</form>
</fieldset>
</body>
</div>
</html><!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-type" content="text/html :charset=UTF-8"/>
<title>Formulaire traité par PHP</title>
<style>
fieldset {
width: 500px;
border: 2px solid #dcdcdc;
border-radius: 10px;
padding: 10px 20px;
text-align: leftt;
}
</style>
</head>
<body>
<form action="exemple7-14.php" method="post" enctype="multipart/form-data">
<!-- premier groupe de composants-->
<fieldset>
<legend><b>Vos coordonnées</b></legend>
<table border="0">
<tr><td><label>Nom :</label></td><td><input type="text" name="nom" size."40" maxlength="256" value="votre nom" /></td></tr>
<tr><td><label>Prénom :</label></td><td><input type="text" name="prenom" size="40" maxlength="256" value="votre prénom" /></td></tr>
<tr><td><label>Date de naissance :</label></td><td><input type="date" name="date max="1993-01-01"/></td></tr>
<tr><td><label>Mail : </label></td><td><input type="email" name="mail" size="40" maxlength="256" value="votre mail" /></td></tr>
<tr><td><label>Votre site : </label></td><td><input type="url" name="site value="http://www." /></td></tr>
<tr><td><label>Code :</label></td><td><input type="password" name="code" size="40" maxlength="6" /></td></tr>
<tr><td><label>Genre :</label></td>
<td><input type="radio" name="sexe" value="homme"/> <label>Homme </label> <br />
<input type="radio" name="sexe" value="femme" /><label>Femme</label> </td></tr>
<tr><td><label>Pays :</label></td><td><select name="pays" size="1" tabindex="2" onfocus="this.style.color='red'"
onchange="alert('Merci de votre choix')" onblur="this.style.color='black'">
<option value="null">Votre pays</option>
<optgroup label="Afrique"›
<option value="Tunis" > Tunis</option>
<option value="Algérie" >Algérie</option>
<option value="Maroc" >Maroc</option>
<option value="Mauritanie" >Mauritanie</option>
</optgroup>
<optgroup label="Europe">
<option value="France"> France</option>
<option value="Belgique"> Belgique</option>
<option value="Italie"> Italie</option>
<option value="Allemagne"> Allemagne</option>
</optgroup>
<optgroup label="Amérique"›
<option value="USA" label="fr" > USA </option>
<option value ="Canada" > Canada</option>
<option value ="Argentine" > Argentine</option>
</optgroup>
<optgroup label="Autres">
<option value="Europerope">Europerope</option>
<option value ="Asie">Asie</option>
<option value="Amériques">Amériques</option>
<option value="Océanie"> Océanie</option>
</optgroup>
</select> </td></tr></table> </fieldset>
<!-- Deuxième groupe de composants -->
<fieldset>
<legend><b>Vos goûts</b></legend>
<input type="checkbox" name="pomme" value="pomme" />Tarte aux fraises à la crème d'amandes<br/>
<input type="checkbox" name="poire" value="poire" />Tarte aux prunes<br />
<input type="checkbox" name="scoubidou" value="scoubidou" />Tarte rustique aux mirabelles de Lorraine, noisettes et miel<br />
<textarea name="gouts" cols="50" rows="5" onclick="this.value=''">
Décrivez vos goûts en détail
</textarea> <br />
</fieldset>
<h-- Troisième groupe de composants -->
<fieldset>
<legend><b>Envoyez nous votre photo</b></legend>
<input type="file" name="fichier" accept=" image/jpeg" />
<input type="hidden" name="MAX_FILE_SIZE" value="10000" /> <br /><br />
<input type="reset" value="Effacer" />
<input type="submit" value="Envoyer" /><br/>
</fieldset>
</form>
</body>
</html>
