Ein Formular mit gestylten Etiketten
So gestalten Sie eine Formularbeschriftung mit CSS. Ein Formularelement, das verwendet wird, um die verschiedenen Felder und Eingabebereiche auf einem Webseitenformular zu beschriften, ist das Label-Element. Es kann mit Cascading Style Sheet-Regeln gestaltet werden.
Schritt 1
Um die Label-Elemente so zu gestalten, wie sie im Bild in der Einleitung erscheinen, müssen Sie das Label-Element mit dem Attribut "for" verwenden. Außerdem müssen Sie das Label-Element schließen, bevor Sie das "input"-Element selbst hinzufügen. Der HTML-Code für das vollständige Formular ist in der Abbildung dargestellt.
Video des Tages
Schritt 2
Um die Beschriftungselemente zu stylen, habe ich die Beschriftungen als Blockebenenelemente angezeigt, die nach links verschoben wurden. Dann habe ich den Beschriftungen eine Breite zugewiesen, damit die Eingabefelder alle einen einheitlichen Abstand zu den Beschriftungen haben. Ich habe eine Farbe zugewiesen und den Text fett gemacht. Ich habe generierten Inhalt verwendet, um einen Doppelpunkt (: ) nach dem Label hinzuzufügen. (Der Doppelpunkt wird möglicherweise nicht in jedem Browser angezeigt.)
Hier ist das CSS:
Etikett { Farbe: #B4886B; Schriftdicke: fett; Bildschirmsperre; Breite: 150px; Schwimmer: links; } Label: nach { Inhalt: ": " }
Schritt 3
Der Vollständigkeit halber zeige ich Ihnen auch das CSS, das zum Stylen des Fieldsets verwendet wird, da die Label-Elemente von einem umrandeten Fieldset eingeschlossen sind.
Hier ist das CSS:
fieldset { border: 1px solid #CCA383; Breite: 400px; Hintergrund: #FFE8EF; Polsterung: 3px; } Fieldset-Legende { Hintergrund: #CCA383; Polsterung: 6px; Schriftdicke: fett; }
Schritt 4
Sie können viele andere Dinge tun, um die Etikettenelemente zu gestalten. Mein Beispiel ist nur eine Möglichkeit, dies zu tun.
Das Formular HTML
Dinge, die du brauchen wirst
Grundkenntnisse in HTML
Grundkenntnisse in CSS
