|
||||
Zitat:
Das problem ist ja das Checkbox kein Background Color hat. So wie du schon richtig erkannt hast geht das wohl nur mit psydo Elementen oder label https://codepen.io/basti1012/pen/vQVMJv andere möglichkeiten kenne ich auch nicht |
|
||||
@basti
Danke für das Beispiel. Ich werde es erstmal bei den Checkboxen beim Standard belassen. Kennt jemand eine gut gemachte Seite mit responsivem Formular, wo die jeweiligen Formularlemente Kinder von label sind? HTML-Code:
input, textarea, select { font-size: 1em; }input, textarea { font-family: monospace; }input[type="text"] { width: 20em; }textarea { width: 30em; }select { width: 12em; }textarea, select { vertical-align: top; }form { background-color: rgb(240,240,240); }label { display: block; } HTML-Code:
<form> <label><input type="checkbox" />Sid</label> <label><input type="checkbox" checked />Fusce</label> <label>Lorem <input type="text" placeholder="Amet" /></label> <label>Dolor <textarea placeholder="Eiusmod"></textarea></label> <label>Adipisit <select size="2"> <option selected>Consectutur</option> <option>Finibus</option> <option>Egestas</option> </select> </label></form> https://codepen.io/fermion/pen/NEOoLX Der Wechsel von der horizontalen Darstellung nebeneinander zu einer vertikalen untereinander ist vermutlich ohne weitere Container nicht/nur schwer hinzukriegen. Auch eine schöne Ausrichtung (z.B. an einer Mittelachse) der verschieden breiten Label und Formular-Elemente ist nicht ohne. Vielleicht geht was über die exotischeren Werte für "display". Könnte ihr was Gutes als Inspiration empfehlen? P.S.: Wißt ihr warum die Zeilenumbrüche hier im Forum innerhalb von Codeblöcken im Forenmarkup "HTML" "/HTML" nicht übernommen werden, wenn man den Code einfügt.
__________________
Geändert von AndreasB (29.11.2018 um 11:32 Uhr) |
|
|||
Für manche Designanforderungen ist es notwendig, zusätzliche Elemente einzufügen. Dafür sind sie dann ja auch da.
Was für "exotischere" Werte für display meinst du? Flexbox und grid sind nicht (mehr) exotisch sondern standard. Auch setzen die meisten modernen Websites darauf Checkboxen und Radiobuttons zu verstecken und mit Grafiken auszutauschen, da dies besser in die CI passt. Formularelemente werden vom Betriebssystem gerendert, darauf hat man (wie du schon gemerkt hast) mit CSS keinen (bzw. nur sehr wenig) Einfluss. Die Zukunft von CSS (Houdini) ermöglicht dann auch das stylen von solchen Elementen, bis dahin dauert es aber noch eine Weile. https://css-houdini.rocks/checkboxes (Funktioniert nur im aktuellen Chrome/Opera und dort auch nur mit aktivierten Flags wenn ich mich nicht täusche. Auch ist es vom semantischen und zugänglichen Aspekt her egal, wo label und input feld stehen, man spart sich lediglich ein for Attribut wenn man es verschachtelt. Auch hier gilt: Je nach Designvorgabe ist vielleicht nur eine Variante möglich. Gib dein Formular in ein grid dann hast du nicht solche Probleme zum ausrichten, als erste inspirationsquelle kannst du da auch gerne zb bootstrap verwenden: https://getbootstrap.com/docs/4.1/components/forms/ Auch wenn hier deine verschachtelung nicht gegeben ist. Ist aber für die Praxis irrelevant, es kümmert keinen, wo genau label und element sind (Hauptsache ist, sie sind beide vorhanden) Ansonsten: Viele moderne Seiten haben irgendwo ein Kontaktformular oder ein Loginformular, da kannst du dir schon einmal "die basics" anschauen wie die das einsetzen. |
|
||||
Zitat:
Nicht ganz. Man spart sich auch das umgebende DIV, welches label das formularelement umschließt. Ich verstehe Deinen pragmatischen Ansatz. Manchmal reizt es mich aus sportlichen Gründen, herauszufinden, ob eine Gestaltung auch mit dem eleganteren Markup möglich ist. Mit "exotischeren" Werten von "display" ist das gemeint: https://www.w3schools.com/cssref/pla...eval=list-item Zitat:
Beim Überfliegen habe ich nur gesehen, dass die von mir genannten gestalterische Aufgabe mit keinem der Beispiele gelöst wird. Verschieden breite Formularelement, Ausrichtung an einer Mittelachse, maximale Breiten für Formularfelder, etc. Kennst Du denn eine Seite mit Formular, die nicht nur einen Formularfeldtyp und eine Formularfeldbreite enthält und auf vorbildliche Weise aus Deiner Sicht responsiv gelungen ist?
__________________
|
|
|||
Zitat:
Soweit ich weiß haben die auch vom accessibility-Standpunkt her keinen Sinn. Und wenn man schon etwas braucht was wie eine List aussieht dann nimmt man doch auch eine Liste etc. Zitat:
Auch hier wieder die selbe Problematik wie in (allen?) deinen anderen Threads: Verwende doch bitte messbare Eigenschaftswörter, mit eleganter hat das ganze nämlich nichts zu tun. Es mag sein dass es für dich persönlich eleganter ist, aber das muss für andere nicht zutreffen. Du kannst sagen du möchtest es mit so wenig bytes wie möglich umsetzen, dann ist das natürlich eine durchaus gewollte Herausforderung und da wünsche ich dir auch viel Erfolg dabei und bewundere es, dass du deine Zeit damit verbringst Bezüglich der Formularseiten: Da kenne ich genügend, ich habe dir auch mit bootstrap schon eine erste Beispielseite verlinkt. Was dir daran (und an allen anderen Lösungen, die mir einfallen würden) nicht gefallen würde: Es ist insofern (ich möchte fast sagen elegant) gelöst da die Formularbreite nicht von den Formularelemten abhängig ist sondern vom umschließenden grid System vorgegeben wird. Sprich: Man baut das eigentliche Verhalten des Grids mit dem schon vorhandenen System und füllt dieses dann lediglich mit den gewünschten Formularfeldern. Dadurch wird sichergestellt dass man sich erstens Arbeit nicht mehrmals antun muss, wie das korrekte Verhalten der einzelnen Bildschirmgrößen. Zweitens kann dadurch auch jeder andere, der an dem Projekt mitarbeitet, auch problemlos und zeitsparend Formulare nach Designwunsch umsetzen. Falls du einen konkreten Designentwurf hier postest kann man sich diesen ja genauer ansehen? Damit ich weiß was du mit "an der Mittleachset etc meinst" Ansonsten ist das die generell empfohlene, moderne Vorgangsweise: Grid aufbauen und mit Formularelementen füllen. |
|
||||
@cloned
Deine Antwort zeigt (einmal mehr), dass für Dich Eleganz, also ein Stilmerkmal, keine Kategorie ist. Weil Du allein "messbare" Eigenschaften anerkennst. Du negierst, dass es, wenn wir mal von Markup weggehen und wir uns bei Programmierern oder Mathematikern umhören, sehr wohl auch in diesen Bereichen ein Empfinden von Stil gibt. Das lässt sich meistens nicht völlig präzise fassen. Auf der verlinkten Seite steht eine Struktur wie: HTML-Code:
<div class="form-group"> <label for="exampleFormControlInput1">Email address</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com"> </div> HTML-Code:
<label>E-Mail Address <input type="email" name="e" /></label> Wir würden nie einer Meinung sein. Damit ich nicht missverstanden werde: Ich erkenne bei der Bootstrap-Lösung natürlich die Universalität und Flexibilität des Ansatzes. Toll gemacht. Deine Anregung zum Verwenden eines Grid-Layouts - danke dafür - werde ich aufgreifen. Ich bin damit bisher unerfahren, wird Zeit, sich damit zu beschäftigen. Am Rande: Benötigen serverseitige Skripte zur Formularverarbeitung eigentlich zwingend ein Attribut name oder können sie auch alternativ mit einer id umgehen?
__________________
Geändert von AndreasB (04.12.2018 um 10:14 Uhr) |
Sponsored Links |
|
|||
Zu dem ersten Teil schreibe ich dir in den nächsten Tagen noch eine ausführlichere Antwort, bezüglich deiner Frage am Rande:
https://stackoverflow.com/questions/...name-attribute Ja, es ist notwendig. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Formular Element Horizontal anordnen Buttons gehen nicht | Blackhead77 | (X)HTML | 4 | 14.11.2013 17:50 |
Dropdownmenue funktioniert nicht | YandelF | CSS | 5 | 01.09.2012 19:59 |
Liste im IE | StarSt0rm | CSS | 3 | 22.08.2007 21:04 |
Validator Fehler und komm nicht drauf... | letslounge | (X)HTML | 3 | 14.09.2006 22:07 |