Vidéo: Tutoriel HTML5 Complet Pour Débutants - Créer un blog en HTML 2025
Il devrait y avoir un moyen de faire en sorte que le formulaire fonctionne correctement, quelle que soit la largeur du conteneur. CSSS3 fournit exactement un tel mécanisme qui est facile à utiliser lors de la conception de vos pages HTML5.
L'attribut clear est utilisé sur les éléments avec un attribut float. L'attribut clear peut être défini sur left, right ou les deux. Définir l'attribut clear sur left signifie que vous ne voulez rien à gauche de cet élément. En d'autres termes, l'élément doit être sur la marge gauche de son conteneur. Chaque étiquette doit commencer sa propre ligne, définissez son attribut clear à gauche.
Pour forcer le bouton sur sa propre ligne, définissez son attribut clear sur both. Cela signifie que le bouton ne doit contenir aucun élément à gauche ou à droite. Il devrait occuper une ligne qui lui est propre.
Si vous voulez qu'un élément démarre une nouvelle ligne, définissez ses attributs float et clear sur left. Si vous voulez qu'un élément soit sur une ligne, définissez float à gauche et effacez les deux.
L'utilisation de l'attribut clear vous permet d'avoir un conteneur de largeur flexible tout en conservant un contrôle raisonnable de la conception du formulaire. Le formulaire peut avoir la même largeur que la page et fonctionner correctement. Cette version fonctionne, peu importe la largeur de la page.
Voici le code CSS final, y compris les attributs clairs dans les libellés et le bouton:
/ * floatForm. css Fichier CSS à utiliser avec float Form Démontre l'utilisation de float, width, margin et clear * / fieldset {background-color: #AAAAFF;} étiquette {clear: left; float: à gauche; largeur: 5em; text-align: droit; marge-droite:. 5em;} entrée {float: left; background-color: #CCCCFF;} bouton {float: à gauche; clarifier les deux; marge-gauche: 7em; marge supérieure: 1em; couleur de fond: # 0000CC; couleur: #FFFFFF;}
