Avez-vous une question? (216) 97 656 803 hajjriadh@gmail.com
html

Correction exercices les formulaires en HTML série 01

Un cours complet pour maîtriser Correction exercices les formulaires en HTML série 01.

0 chapitres 0 QCM Accès gratuit
Commencer Retour aux cours
Sommaire du cours
HTML: Introduction
HTML: Les principes
HTML: Exercices
Les commentaires en HTML
Structure d’un document HTML
HTML Série 1
Notion, attributs d’une balise html
Travaux dirigés 1 HTML
Les éléments de base d'un document HTML5
Les balises meta de HTML5
Balise de texte en HTML5
La charte graphique d'un site web
Éléments sémantiques en HTML5
Les sites Web statiques
Les sites catalogues
Autres catégories
News
Microsoft Office
Les cours de programmation
MOS
WordPress
Ressources pédagogiques
Voir tout le catalogue

  1. Objectifs

    • ِConnaître les formulaires HTML.

  2. Exercice 01

    1. Énoncé
    2. 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>

    3. Exercice 02

      1. Énoncé
      2. Solution
        <!DOCTYPE html > 
<html > 
<head> 
<meta http-equiv="Content-type" content="text/html :charset=UTF-8"/>
<title>Formulaire trait&eacute; 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&eacute;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&eacute;nom :</label></td><td><input type="text" name="prenom" size="40" maxlength="256" value="votre pr&eacute;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&eacute;rie" >Alg&eacute;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&eacute;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&eacute;riques">Am&eacute;riques</option>
<option value="Oc&eacute;anie"> Oc&eacute;anie</option>
</optgroup>
</select> </td></tr></table> </fieldset>
<!-- Deuxième groupe de composants --> 
<fieldset>
<legend><b>Vos go&ucirc;ts</b></legend>
<input type="checkbox" name="pomme" value="pomme" />Tarte aux fraises &agrave; la cr&egrave;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&eacute;crivez vos go&ucirc;ts en d&eacute;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" />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="Envoyer" /><br/>
</fieldset>
</form>
</body>
</html>