CATALOGUE Code & Data Formation Dreamweaver Apprendre Dreamweaver CS5 - Formation Complète

Mise en Forme d'un Formulaire Compatibilité XHTML

Retour à la formation
Chapitre 3 Leçon 21
Précédent
Suivant

Découvrez comment mettre en forme un formulaire HTML tout en assurant la compatibilité XHTML 1.0 strict grâce à l'utilisation judicieuse de balises de type bloc et de propriétés CSS.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous explorons la mise en forme de formulaires HTML en respectant les standards de compatibilité XHTML 1.0 strict. Nous débutons par la vérification de l'inclusion correcte des éléments du formulaire à l'intérieur de balises de type bloc comme P ou DIV. Cette étape est cruciale pour maintenir la conformité avec la DTD XHTML.

Ensuite, nous abordons l'alignement des champs input (nom, prénom, email) en modifiant les étiquettes label pour leur attribuer une taille fixe. Le passage des étiquettes de type inline à type bloc via la propriété display: block puis l'utilisation de float: left pour un alignement optimal sont les points clés de cette section.

Enfin, nous traitons de la différenciation des zones de formulaire telles que les boutons radio et les cases à cocher en insérant ces éléments dans des balises DIV avec des identifiants nommés. Nous terminons en ajustant la taille globale du formulaire et en ajoutant des marges automatiques pour centrer le contenu.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de :

  • Assurer la compatibilité XHTML en utilisant des balises appropriées.
  • Aligner les différents champs de formulaire de manière uniforme.
  • Utiliser les propriétés CSS telles que display: block et float pour améliorer l'agencement des éléments.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est nécessaire de :

  • Connaître les bases de HTML et de CSS.
  • Avoir une compréhension des balises de type bloc et inline.
  • Être familier avec Dreamweaver ou tout autre éditeur HTML/CSS.

Métiers concernés

Cette vidéo est particulièrement utile pour des métiers tels que :

  • Développeur Front-End
  • Intégrateur Web
  • Concepteur de Sites Web

Alternatives et ressources

Pour ceux qui ne disposent pas de Dreamweaver, des alternatives incluent :

  • Sublime Text
  • Visual Studio Code
  • Atom

Questions & Réponses

L'inclusion des éléments de formulaire dans des balises de type bloc assure la compatibilité avec la DTD XHTML 1.0 strict, évitant ainsi des problèmes de mise en page.
Les champs 'nom', 'prénom' et 'email' peuvent être alignés uniformément en attribuant une taille fixe aux étiquettes correspondantes et en les transformant en éléments de type bloc.
L'utilisation de la propriété CSS float, notamment float: left, permet d'éviter le retour à la ligne en positionnant les éléments côte à côte.