zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Formular-Element "Checkbox": Responsiv mit hängendem Einzug?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 27.11.2018, 17:57
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.291
AndreasB wird schon bald berühmt werden
Standard

Das war mir klar, dass beides valide ist. Ich verstehe auch Deinen Ansatz, möchte aber mein ursprüngliches Ziel noch nicht aufgeben.
__________________

Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 27.11.2018, 18:15
Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 86
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Dann viel Erfolg bei deinen Bemühungen - es gibt immer einen oder mehrere Wege, um zum Ziel zu kommen!
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 27.11.2018, 19:57
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.291
AndreasB wird schon bald berühmt werden
Standard

Problem gelöst.
Meine Vermutung stimmt.


Das Browserstylesheet setzt für Input eine eine geringere Schriftgröße als 1em.


Das Setzen von 1em für input regelt den hängenden Einzug.


Ich habe den Codepen aus dem Ausgangsposting ergänzt.
__________________

Mit Zitat antworten
  #14 (permalink)  
Alt 29.11.2018, 03:01
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 142
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von AndreasB Beitrag anzeigen
Wißt ihr, wie man die Farbe ändern kann? Aufwändige Lösungen wie ein Ausblenden der originalen Checkbox und ein Erzeugen einer Fake-Checkbox über erzeugten Inhalt möchte ich nicht einsetzen, dann würde ich verzichten.

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
Mit Zitat antworten
  #15 (permalink)  
Alt 29.11.2018, 11:15
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.291
AndreasB wird schon bald berühmt werden
Standard

@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)
Mit Zitat antworten
  #16 (permalink)  
Alt 29.11.2018, 13:02
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.943
cloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblick
Standard

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: "offenbar" bedeutet, dass ich nicht sicher bin, wie Du etwas meinst - Ein User hier auf diesem Forum 😂
Mit Zitat antworten
  #17 (permalink)  
Alt 29.11.2018, 13:24
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.291
AndreasB wird schon bald berühmt werden
Standard

Zitat:
Zitat von cloned Beitrag anzeigen

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.

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:
Zitat von cloned Beitrag anzeigen
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.
Danke für den Link. Die Seite werde ich mir genauer ansehen.
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?
__________________

Mit Zitat antworten
  #18 (permalink)  
Alt 30.11.2018, 16:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.943
cloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblick
Standard

Zitat:
Zitat von AndreasB Beitrag anzeigen
Mit "exotischeren" Werten von "display" ist das gemeint:
https://www.w3schools.com/cssref/pla...eval=list-item
Kurz vorneweg: Diese "exotischen" Werte brauchst du eigentlich nie.
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:
Zitat von AndreasB Beitrag anzeigen
Manchmal reizt es mich aus sportlichen Gründen, herauszufinden, ob eine Gestaltung auch mit dem eleganteren Markup möglich ist.

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.
__________________
Zitat: "offenbar" bedeutet, dass ich nicht sicher bin, wie Du etwas meinst - Ein User hier auf diesem Forum 😂
Mit Zitat antworten
  #19 (permalink)  
Alt 04.12.2018, 09:39
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.291
AndreasB wird schon bald berühmt werden
Standard

@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>
Wir könnten gerne eine Umfrage durchführen, wieviele das Folgende "als eleganteres Markup" empfinden.

HTML-Code:
<label>E-Mail Address <input type="email" name="e" /></label>
Du gehörst einfach zu denjenigen, denen es nie genug divs, spans, classes und ids geben kann, oder placeholder, die fast dasselbe enthalten wie 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)
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 04.12.2018, 10:18
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.943
cloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblick
Standard

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.
__________________
Zitat: "offenbar" bedeutet, dass ich nicht sicher bin, wie Du etwas meinst - Ein User hier auf diesem Forum 😂
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:58 Uhr.