HTML5/CSS MISE EN FORME DU FORMULAIRE & EVENEMENTS J I H E N DA M E R J I
1. Créer une page questionnaire.html 2. Créer une page quest.css 3. Mettre la structure générale de la page HTML 4. Relier la page html à la page CSS <link rel="stylesheet" type="text/css" href="quest.css">
On veut crĂŠer le formulaire suivant:
<label for ="qnom"> Nom: </label>
<input type="text" name="qnom" id="qnom" required> <label for ="qpren"> PrĂŠnom: </label> <input type="text" name="qpren" id="qpren" required >
<label for="qddn">Date de naissance:</label> <input type="date" name="qddn" id="qddn" required> <label for="qtel">TĂŠlĂŠphone:</label> <input type="tel" name="qtel" id="qtel" required> <label for="qmail">Mail:</label>
<input type="email" name="qmail" id= " qmail " required>
<label for="qgenre">Genre:</label> <input type="radio" name="qgenre" id="qgenre" value="h"> Homme <input type="radio" name="qgenre" id="qgenre" value="f"> Femme
<label for="qniv">Niveau:</label> <input list="niv" name="qniv" id="qniv"> <datalist id="niv"> <option value="1ère"> <option value="2ème"> <option value="3ème"> <option value="4ème">
</datalist>
<label for="qpc">Vous possedez:</label> <input type="checkbox" name="qpc" id="qpc">Ordinateur <input type="checkbox" name="qtab" id="qtab">Tablette <input type="checkbox" name="qtel" id="qtel">Smartphone <input type="checkbox" name="qimp" id="qimp">Imprimante
<label for="qeval"> Notez l'enseignement en ligne: </label> <input type="range" name="qeval" id="qeval" min="0" max="10">
<label for="qrem">Autres remarques:</label>
<textarea id="qrem" name="qrem" rows="4" cols="50"> </textarea>
<input type="submit" value="Envoyer"> <input type="reset" Value="Annuler">
CrĂŠer la page quest.css qui permet de faire les mise en forme suivantes: 1- pour lâ&#x20AC;&#x2122;arriere plan (body)donner la couleur #D8DA3D
body{ background-color: #D8DA3D; }
2- pour les titres des fieldset: tahoma, gras et souligĂŠ
legend{ font-weight: bold; text-decoration: underline; font-family: tahoma;
}
3- pour les titres des champs : gras et de couleur mauve
label{ color: #820d34; font-weight: bold; }
4- pour les zones du formulaire appliquer une taille de 40% par rapport a la page, une couleur dâ&#x20AC;&#x2122;arriere plan (#e2d67e) , une bordure ronde de couleur rouge
fieldset{ width: 40%; background-color: #ffc88a; border-color: red; border-radius: 10px; }
4- pour les zones input text du formulaire appliquer une marge de 3px par rapport a la page, une couleur d’arriere plan (lightgrey) , une bordure solid ronde de couleur rouge d’épaisseur 2px.
input[type=text]{ padding: 3px; background-color: lightgrey; border: 2px solid red; border-radius: 4px; }
5- Lorsque les zones input text de formulaire prend le focus il change de couleur dâ&#x20AC;&#x2122;arriere plan (noir) ; le texte en blanc avec une bordure ronde.
input[type=text]:focus{ padding: 3px; background-color: black; color: white; font-weight: bold; border-radius: 5px; }
6- la zones input email de formulaire doit avoir comme couleur dâ&#x20AC;&#x2122;arriere plan (lightgrey) ; le texte en blanc avec une bordure ronde.
input[type=email]{ padding: 3px; background-color: lightgrey; border: none; border-bottom: 2px solid red; }
7- la zones input tel de formulaire doit avoir comme couleur dâ&#x20AC;&#x2122;arriere plan (lightgrey) ;une taille de 80px et appliquer une transition dâ&#x20AC;&#x2122;agrandissement de la taille de la zone tel .
input[type=tel]{ width: 80px; padding: 3px; background-color: lightgrey; transition: width 0.4s ease-in-out; }
input[type=tel]:focus{ width: 300px; }
8- les boutons envoyer et annuler : • couleur de fond vert • couleur de texte blanc • sans bordure • Modifier le curseur en pointeur
input[type=submit], input[type=reset]{ color: white; background-color: #4CAF50; padding: 10px 25px; border: none; cursor: pointer; }
6- lors du survol des boutons envoyer et annuler inverser les couleurs
input[type=submit]:hover, input[type=reset]:hover { color: #4CAF50; background-color: white; padding: 10px 25px; border: none; cursor: pointer; }
JIHEN.DAMERJI@GMAIL.COM