CSS und Formular
als Präsentation ▻Wie ordne ich die Beschriftungen und Eingabefelder eines Formualares an?
Mit CSS Grid:
Beispiel CSS Grid und Formular
▻Dabei verwenden wir das CSS Grid ohne zu wissen, wie viele Eingabfelder das Formular im Ende enthalten wird.
Wir definieren nur zwei Spalten:
form { display: grid; grid-template-columns: [labels] auto [controls] 1fr; grid-gap: 10px; }
In eckigen Klammern werden hier die Namen für die beiden
ersten senkrechten Linien des Grid festgelegt: labels
und controls
.
Überzählige Element im grid
Was soll mit überzähligen Kinder-Tags des grids passieren?
Das wird mit der Property grid-auto-flow
festgelegt:
Das Grid kann um zusätzliche Zeilen erweiteret werden, um zusätzliche Spalten, oder es können Lücken im Grid aufgefüllt werden:
grid-auto-flow: rows
grid-auto-flow: columns
grid-auto-flow: dense
Im Fall des Formulars sollen neue Zeilen eingefügt werden.
form { display: grid; grid-template-columns: [labels] auto [controls] 1fr; grid-gap: 10px; grid-auto-flow: rows; }
Grössere Zellen
Die fieldsets
sollen beide Spalten überspannen.
Das erreichen wir mit der Property grid-column
:
form > fieldset { grid-column: span 2; }
Ein fieldset Tag der ein direktes Kind eines form Tags ist, soll zwei Spalten überspannen.
▻Absende-Button positionieren
Der absende Button <input type="submit" value="Submit Booking">
soll
nicht in der linken sonder in der rechten Spalte positiniert werden.
form > input[type=submit] { grid-column: controls; }
Der name controls
bezieht sich dabei auf die mit grid-template-columns
definierte Namen für die Linien.
Kapitel
- Das Web Und Html
- Css
- Css Layout
- Urls
- Formulare
- Javascript Dom
- Jquery
- Kommandozeile
- Git
- Http
- Php Vorbereitung
- Php
- Php Db Lesen
- Session
- Php Db Schreiben
- Php Db Optimierung
- Grafik
- Javascript
- Applied Jquery And Css
- Json
- Xml
- Security
- Injection
- Authentifizierung und Session-Management
- Cross Site Scripting (XSS)
- Unsichere direkte Objektreferenzen
- Sicherheitsrelevante Fehlkonfiguration
- Verlust der Vertraulichkeit sensibler Daten
- Fehlerhafte Autorisierung auf Anwendungsebene
- Cross-Site Request Forgery (CSRF)
- Nutzung von Komponenten mit bekannten Schwachstellen
- Ungeprüfte Um- und Weiterleitungen
- Wordpress
- Apache
- Advanced Javascript
- Qualitaet