Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Symfony Grundkurs

CSS in Formulare einbauen

Testen Sie unsere 2019 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Mit Hilfe einer Attributs-Option können Sie Formularfelder nach Wunsch gestalten. Wie Sie dafür am besten vorgehen, zeigt Ihnen dieser Film.
05:08

Transkript

Wir haben hier zwar ein Formular, aber einen Schönheitspreis gewinnen wir damit noch nicht, und das, obwohl wir hier Bootstrap zur Verfügung haben mit dessen Hilfe wir ziemlich einfach das Formular formatieren könnten. Wie also, bringe ich meine Bootstrap-Klassen und Formatierungen in dieses Formular hinein. Hier, an dieser Stelle ist es wohl eher ein Ding der Unmöglichkeit, weil mein ganzes Formular verbirgt sich ja hinter diesem "form_widget". Also muss ich versuchen hier mein Bestes zu geben, und zum Glück bietet der Formbuilder auch die Möglichkeit, beim Erstellen der einzelnen Felder Attribute mitzugeben. Die können zu unterschiedlichen Dingen verwendet werden, aber ich werde jetzt hier ein Attribut dafür verwenden, dass ich meine CSS-Klassen unterbringen kann. Das heißt, das Erste, was ich brauche ist ein Array, und innerhalb dieses Arrays werde ich eben das Attribut zuweisen. Mit "attr" eröffne ich den Reigen, und das Erste, was ich zuweisen möchte ist ein neuerlicher Array, in dem ich dann meine diversen Klassen und Style-Wünsche unterbringen kann. Das heißt, ich sage wieder "array". Und hier nun kann ich sagen " class" und weise dieser Klasse jetzt eine Bootstrap-eigene Klasse zu, nämlich "form-control". Das sollte mir schöne Felder erzeugen. Und damit nicht genug, Möchte ich auch noch nach unten ein bisschen mehr Luft haben. Das heißt, ich brauche noch Style-Anweisungen. Ebenfalls kein Problem. Ich sage "style" und weise diesem jetzt meine Style-Vorstellungen zu. Das eine ist, dass ich gerne einen "margin-bottom" hätte, und dieser "margin-bottom" -- na, fangen wir mal mit 1.5em an und schauen uns das dann im Detail an. Und ich möchte auch nicht mein Feld über die ganze Länge haben, meines Bildschirms, sondern 50 % davon reichen. Also sage ich "width:50%". So, und speichere das, und sehe mir jetzt mal meine neu formatierten Namen an. Das sieht schon mal recht gut aus. Damit sind weitere Schritte relativ einfach. Ich nehme einfach diesen ganzen Array-Teil, bis hin zu diesen zwei Klammern, kopiere ihn mir mit Strg+C in die Zwischenablage, und kann ihn dann 1:1 bei meinem "Ort"-Feld mitangeben. Beim Datumsfeld nehmen wir nicht alles mit, aber ich kopiere mal die gesamte Konstruktion, nur nehme ich jetzt hier diese "'class'='form-control'" weg, weil ich schätze, dass die Teile, die automatisch generiert werden, nicht gut aussehen, noch mit einem ganzen "control"-Feld dazu. Das brauchen wir nicht. Und auch der "Submit"-Button wird von mir noch etwas behübscht. Allerdings mache ich hier was Anderes. Hier brauche ich nicht einfach nur ein Feld, sondern ich möchte hier einerseits die Beschriftung ändern und auf der anderen Seite einen Bootstrap-Button hinzufügen. Das heißt, auch hier beginne ich wieder mit einem Array. Allerdings werde ich dem Array jetzt nicht eine Klasse zuweisen, sondern zuerst mal mich um das Label kümmern, und auf dem Label soll nämlich stehen: "Abschicken". Und dann kümmere ich mich wieder um die Attribute. Und auch hier brauche ich für die Attribute jetzt wieder einen Array, damit ich in diesen Array meine Bootstrap-Klasse unterbringen kann, und gegebenenfalls noch zusätzliche Style-Einweisungen. Das heißt, "'class'='btn'", dafür, dass ein Button erzeugt wird. Und jetzt geben wir ihm noch "btn-primary" dazu. Abstand nach unten, in dem Sinn brauchen wir keinen. Ich glaube, was jetzt das Optische betrifft, war es das nur fast, denn ich habe hier etwas übereifrig bereits einen "Submit"-Knopf gesetzt gehabt, den ich aber so nicht brauche. Ich erneuere mir hier die Ansicht, und jetzt habe ich ein gut formatiertes Formular, das auch optisch einiges hermachen kann.

Symfony Grundkurs

Steigen Sie in die moderne und flexible PHP-Entwicklung mit dem praktischen Framework ein.

2 Std. 35 min (34 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:18.01.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!