Formulare Info und CSS

Ohne HTML-Formulare wäre es nicht möglich, sich über das Web auf seinem E-Mail- Konto einzuloggen, Bücher mit einem Mausklick zu bestellen oder über das Netz mit Aktien zu handeln. Obwohl Formulare heutzutage ein essenzieller Bestandteil des Webs sind, lässt sich an der Standarddarstellung der Browser noch einiges verbessern. Formulare werden mit der...

Stile für Formulare definieren mit form

Sie möchten ein Webformular mit eigenen Stildefinitionen versehen. Verwenden Sie den Elementselektor form, um alle Formulare auf einmal im Stylesheet auszuwählen. Um einzelne Formulare individuell zu gestalten, versehen Sie die Formulare mit einem id-Attribut, das Sie gegebenenfalls im Stylesheet ansprechen können. In dieser Regel erhalten alle Formulare der Website einen...

Stile für fieldset-elemente definieren

Sie haben verschiedene Formularelemente anhand des HTML-Elements fieldset gruppiert und wollen diese nun unabhängig vom umgebenden Formular gestalten. Gruppieren Sie die gewünschten Formularelemente, indem Sie sie mit fieldset-Tags umgeben. Danach können Sie den passenden Elementselektor fieldset benutzen, um die verschiedenen...

legend-Elemente mit Stildefinitionen versehen

Für die Beschriftung von Formularelementen, die per fieldset gruppiert wurden, gibt es das Element legend. Dieses soll mit eigenen Stildefinitionen versehen werden. Umgeben Sie den Beschriftungstext innerhalb der legend-Tags mit span-Tags. Danach definieren Sie die Stile mithilfe des passenden Elementselektors, wie hier gezeigt. Am Anfang dieser Regel wird das...

Die Platzierung von legend-Elementen verändern

Sie möchten die Beschriftung für gruppierte Formularelemente an einer anderen Stelle platzieren, als standardmäßig vom Browser vorgesehen. Umgeben Sie den Beschriftungstext mit einem zusätzlichen span-Element und definieren Sie das umgebende fieldset als Positionierungskontext, verwenden Sie das span-Element, um die Beschriftung nach Bedarf an die richtige Stelle...

Spezielle Stile für label-Elemente gestalten

Sie möchten spezielle Stile für das label-Element definieren, das zur Beschriftung von vielen Formularelementen dient. Verwenden Sie den Elementselektor label, um alle Beschriftungen von Formularfeldern auf der gesamten Website einheitlich zu gestalten (bzw. auf der gesamten aktuellen Seite, wenn Sie ein internes Stylesheet verwenden). Wenn Sie die Beschriftungen...

Texteingabefelder mit CSS gestalten

Sie möchten die Standarddarstellung der Browser für Texteingabefelder verändern, wie in Abbildung gezeigt. Verwenden Sie einen passenden Attributselektor, um das Eingabefeld von anderen input-Elementen zu unterscheiden. Achten Sie bei der Gestaltung darauf, dass nicht alle Browser sämtliche CSS-Eigenschaften unterstützen. Hier erhalten alle Texteingabefelder...

Stildefinitionen für textarea-Elemente zuweisen

Mithilfe von Stildefinitionen sollen die verschiedenen Darstellungsmerkmale eines textarea-Elements verändert werden (siehe Abbildung). Weisen Sie dem textarea-Element die Stile mithilfe eines Elementselektors zu. Mit der ersten Deklaration wird festgelegt, dass Textbereiche als Blockelemente dargestellt werden sollen. Dadurch können wir die Eigenschaft margin benutzen...

Stile für Checkboxen und Radiobuttons definieren

Sie möchten Checkboxen (type="checkbox") und Radiobuttons (type="radio") mit eigenen Stilen versehen. Versuchen Sie nicht, die Checkboxen und Radiobuttons direkt per CSS zu verändern. Das funktioniert in den meisten Fällen nicht wie erwartet. Wenn es wirklich sein muss, umgeben Sie das input-Element besser mit span-Tags, für die Sie dann Ihre Stildefinitionen vornehmen...

Auswahllisten und Aufklappmenüs mit Selektor

Farbe und Schrift von Auswahllisten und Aufklappmenüs (select-Elementen) und den enthaltenen Einträgen (option-Elementen) sollen an die eigenen Bedürfnisse angepasst werden. Verwenden Sie einen Elementselektor, um option- und select-Elementen die gewünschten Stildefinitionen zuzuweisen. Die Auswahlliste erhält eine Breite von 20 em-Einheiten und einen Innenabstand...