Html5/CSS Mise en forme du Formulaire & évènements

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