Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Dreamweaver CC pour PC/Mac (édition 2018)
  3. Mise en forme CSS des formulaires
Extrait - Dreamweaver CC pour PC/Mac (édition 2018) Concevoir des sites interactifs et attractifs
Extraits du livre
Dreamweaver CC pour PC/Mac (édition 2018) Concevoir des sites interactifs et attractifs
1 avis
Revenir à la page d'achat du livre

Mise en forme CSS des formulaires

Les feuilles de style

1. Les sélecteurs utilisables

Pour rappel, vous pouvez utiliser des sélecteurs de classe pour créer, définir et appliquer un style CSS aux éléments HTML de votre choix.

Vous pouvez aussi redéfinir la mise en forme d’un élément HTML existant avec un sélecteur d’élément.

2. Les éléments HTML utilisés

Voici la liste des éléments HTML utilisés dans les formulaires.

  • L’objet de formulaire est l’élément HTML <form>.

  • Les étiquettes des objets sont l’élément <label>.

  • Les objets champs de texte (texte, mot de passe, téléphone, nombre, e-mail, couleur...), et les boutons (envoi et annulation) sont insérés avec l’élément <input>.

  • Les menus et listes utilisent l’élément <select>. Chaque item des menus et des listes est un élément <option>.

  • C’est l’élément <fieldset> qui permet d’encadrer les objets de formulaire et le titre est inséré avec l’élément <legend>.

3. L’utilisation d’un tableau pour aligner les objets du formulaire

 Rien ne vous empêche d’utiliser un tableau pour bien aligner vos éléments.

images/18C16-001.png
images/18C16-002.png

La mise en forme des champs de texte

Vous pouvez utiliser toutes les propriétés CSS vues pour la mise en forme des caractères, des textes et des conteneurs.

1. La mise en forme des étiquettes

Dans cet exemple, nous avons utilisé le sélecteur de balise <label> pour que toutes les étiquettes soient mises en forme de la même manière : une simple mise en gras avec un espace supplémentaire de 1 pixel entre les lettres.

images/18C16-003.png

Le sélecteur de balise <body> a une taille de 0.8em et la police Verdana.

images/18C16-004.png

Ces styles seront utilisés dans les exemples suivants.

2. La mise en forme des champs de texte Ligne simple

Certains des champs de saisie ont un fond coloré, une bordure et une police colorée et une largeur fixée à 150 pixels. La classe utilisée s’appelle .champSimple.

images/18C16-005.png

Dans l’exemple ci-dessous, vous apercevez aussi la mise en forme des étiquettes vue précédemment.

images/C16-004.png

3. La mise en forme du champ de texte multiligne

Pour le champ de texte multiligne, nous utilisons une image d’arrière-plan, répétée verticalement et fixe pour que l’image ne se déplace pas lors de l’utilisation de la barre de défilement. Il possède une largeur et une hauteur fixes et une bordure.

images/18C16-006.png

4. La mise en forme des groupes de champs

Pour les groupes de boutons radio et de cases...

La mise en forme du menu

1. L’objet menu

Pour le menu du choix de la ville, nous avons créé une simple classe .menuVille : un fond coloré et une bordure.

images/18C16-009.png

2. L’élément présélectionné du menu

Nous l’avons vu dans le chapitre précédent, vous pouvez choisir un élément d’un menu pour qu’il soit présélectionné dans le menu. C’est l’attribut selected :


<option value="44000" selected="selected">Nantes</option>
 

Si vous souhaitez mettre en évidence cet élément, vous pouvez créer une nouvelle classe et l’appliquer à cet élément. Mais nous pouvons le faire pour chaque élément possédant cet attribut, avec un sélecteur bien particulier.

 Dans le panneau CSS Designer, dans l’onglet Sources, sélectionnez <style>, afin de créer des sélecteurs internes, enregistrés dans le fichier HTML.

 Dans l’onglet @Requêtes multimédias, sélectionnez GLOBAL, nous n’utilisons pas de requête multimédia.

 Dans l’onglet Sélecteurs, cliquez sur le bouton +, Ajouter un sélecteur.

 Dans le champ de saisie, saisissez le sélecteur option[selected=selected].

Cela permet d’appliquer le style à tous les éléments...

La mise en forme des boutons

Pour les deux boutons, nous avons créé une classe, avec l’utilisation de propriétés de caractères (taille, graisse et couleur) et de boîte (fond, bordure, remplissage et largeur).

images/18C16-013.png

Voici l’affichage obtenu :

images/18C16-014.png

La mise en forme du formulaire

 Pour terminer, rien ne vous empêche de mettre en forme le formulaire. Dans cet exemple, l’identifiant de notre formulaire est inscription. Nous créons donc un sélecteur d’identification (à usage unique dans la page) nommé #inscription.

Le formulaire possède un arrière-plan coloré, une bordure, un remplissage et une largeur spécifiée.

images/18C16-015.png

Voici l’affichage obtenu dans Google Chrome :

images/18C16-016.png