Styler un formulaire avec Dreamweaver cs5. MC Benveniste

Transcription

1 Styler un formulaire avec Dreamweaver cs5 MC Benveniste 2013

2 Styler un formulaire Formulaire de base Formulaire avec les css

3 Styler un formulaire Un formulaire contient des balises : <label> pour les étiquettes <input>, <select>, <textarea> pour les objets de formulaires Ces balises sont de type inline puisque les étiquettes se sont toujours positionnées à côté des objets de formulaire. L idée sera donc de pouvoir donner à ces balises des attributs de largeur, des marges, de l alignement de texte... Nous allons donc les transformer en élément de type block, pour leur donner ces attributs, et les faire flotter à gauche, pour qu ils se repositionnent sur une ligne.

4 Styler un formulaire Afin d éviter que les cases à cocher <input type= checkbox... > les boutons radio <input type= radio... > et le bouton envoyer <input type= submit... > ne prennent aussi ces paramètres de largeur nous allons privilégier les classes personnalisées et les appliquer ensuite aux balises <label> <input type= text...> <texarea...> et <select...> et aussi <span>

5 Mise en forme du formulaire Dans la fenêtre des css, nous demandons une nouvelle règle de css Si notre formulaire n est relié à aucune feuille de style ou si nous souhaitons des typos particulières pour celui-ci en sélectionnant le formulaire dans la barre d état

6 Mise en forme du formulaire La balise <form> étant une balise de type block, nous pouvons lui donner une largeur, la centrer dans son conteneur, lui donner éventuellement une couleur, voire une image d arrière-plan

7 Mise en forme du formulaire Nous pourrons choisir les typos, taille, couleur du texte du formulaire

8 Mise en forme du formulaire Formulaire d origine Ici arrière-plan du formulaire, largeur, hauteur, centrage dans la page, choix de typo, taille et couleur de texte

9 Création des classes personnalisées Dans la fenêtre des css, nous demandons une nouvelle règle de css Choisir : classe dans notre feuille de style externe, et nommons-la par exemple.etiquette

10 Création de la classe pour les étiquettes Choisir dans la catégorie bloc : alignement du texte à droite, et un affichage en bloc

11 Création de la classe pour les étiquettes Choisir dans la catégorie boîte une largeur, flottante gauche et des marges droite, et basse pour éviter que les éléments ne soient trop collés

12 Création des classes personnalisées Dans la fenêtre des css, nous demandons une nouvelle règle de css Choisissons : classe dans notre feuille de style externe, et nommons-la par exemple.champs

13 Création de la classe pour les éléments de formulaires Choisir dans la catégorie bloc : un affichage en bloc

14 Création de la classe pour les objets de formulaire Choisir dans la catégorie boîte une largeur, flottante gauche et des marges basses pour éviter que les éléments ne soient trop collés

15 Application de classes personnalisées Il faut appliquer les classes aux balises <label> Cliquez dans le mot nom, sélectionnez la balises <label>, dans la barre d état, allez dans les propriétés pour appliquer la classe étiquette

16 Application de classes personnalisées

17 Application de classes personnalisées Recommencez cette opération sur toutes les balises <label> puis sélectionnez vos centres d intérêts et appliquez la classe, dreamweaver va générer une balise <span> Ci-contre, sont entourés les éléments qui ont la classe etiquette

18 Application de classes personnalisées Il faut maintenant appliquer la classe champs aux éléments de formulaire. Sélectionnez-les dans la barre d état et appliquez la classe Attention! ici la classe s applique à droite de l inspecteur des propriétés

19 Et là nous avons un problème d affichage! dû bien évidemment aux éléments flottants! Il va nous suffire d utiliser les paragraphes qui entourent nos lignes pour les séparer avec un clear:both

20 Faire en sorte que tous les paragraphes clear les float Assurons-nous d abord dans le code, que chaque ligne est bien dans une balise <p> Vous allez probablement avoir un ajustement à faire au début, sur civilité

21 Enlever les sauts de lignes entre les boutons radio

22 Donner la propriété clear:both à tous les paragraphes du formulaire Sélectionnez un paragraphe dans la barre d état et demandez une nouvelle règle de css

23 Donner la propriété clear:both à tous les paragraphes du formulaire

24 Il ne reste plus qu à appliquer la classe etiquette au mot civilité en le sélectionnant, comme pour vos centres d intérêts Et faire une classe personnalisée pour le bouton envoyer en choisissant une typo, taille, couleur, arrière-plan, et marge gauche... au choix! Si vous souhaitez enlever l effet bouton, mettez les bordures à aucune (border:none;)

25 FIN!