Aus dem Kurs: Bootstrap 5 Grundkurs

Formulare erstellen – Tutorial zu Bootstrap

Aus dem Kurs: Bootstrap 5 Grundkurs

Gratismonat starten Für Ihr Team erwerben

Formulare erstellen

“

Wenn Sie schon einmal Formulare formatiert haben mit CSS, dann wissen Sie, wie mühsam das ist; mit Bootstrap geht es einfach. Das ist ein Formular, was unformatiert ist, so wird es standardmäßig vom Browser dargestellt, und so sieht das Ganze aus, wenn ich es mit Bootstrap behandle. Und es gibt auch schöne Effekte hier bei Klick in die Felder, die sind immer deutlich hervorgehoben. Um so ein Formular zu erstellen, brauche ich natürlich erst einmal den korrekten HTML-Code. Ich brauche für jedes Formularfeld ein zugehöriges label-Element und damit der Bezug zwischen beiden hergestellt werden kann, müssen Sie beim Label bei "for" denselben Wert angeben, den Sie beim Formularfeld bei der ID angeben. Das ist HTML. Bootstrapmäßig, damit die Formatierungen wie gewünscht aussehen, müssen Sie bestimmte Klassen vergeben: beim label "form-label", beim input-Element "form-control" und hier verwende ich nun eine Auswahlliste, ein "select", und diese braucht die Angabe "form-select". Weiter unten verwende ich eine Checkbox, da muss das umfassende Element ein "form-check" haben, das input-Element ein "form-check-input" und das label ein "form-check-label". Also, das ist eine andere Klassenangabe, als ich bei den anderen Labels habe. Dafür sind es dieselben Klassen, die Sie dann auch bei radio-Buttons verwenden, also beim input-Element "form-check-input" und beim label "form-check-label". Ich verwende hier radio-Buttons. Damit von einer Gruppe von radio-Buttons nur einer ausgewählt werden kann, muss der Name identisch sein. Und das ist dann mein Formular, was so schön formatiert ist. Sie können Bootstrap auch für sogenannte Floating Labels nutzen. Dafür müssen Sie die beiden Felder, die zusammengehören, mit einem "form-floating" kennzeichnen. Außerdem ist es wichtig, dass wenn Sie diese Floating Labels einsetzen wollen, das input-Element zuerst kommt und ein placeholder-Attribut hat, also, in diesem Fall kommt input zuerst und dann label. Auch beim zweiten Element setze ich auf Floating Labels, also wieder beim umfassenden Element "form-floating", und dann kommt zuerst das input-Element und das hat auch ein placeholder-Attribut und dann die zugehörige Beschriftung. Und das ist der Effekt der Floating Labels; wenn ich reinklicke, wandert die Beschriftung nach oben, sonst ist sie in dem Feld selber. Und das ist eine schöne Art, weil dann natürlich trotzdem ersichtlich ist, was ich in dieses Feld eingeben muss, aber trotzdem nimmt diese Beschriftung keinen unnötigen Platz ein. Es wäre hingegen keine gute Idee, stattdessen einfach nur auf Placeholder zu setzen, denn der Inhalt vom Placeholder ist ja immer verschwunden, wenn man was reingeschrieben hat. Sie haben gesehen, wie man Formulare gestalten kann mit Bootstrap und wie sich auch Floating Labels erstellen lassen. Und Sie brauchen immer dafür eine Reihe von Klassen und wichtig ist natürlich, dass Sie das Ganze auf einen korrekten HTML-Code anwenden.

Inhalt