zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden [Formular] Semantisch richtige Elemente verwenden

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.09.2010, 00:17
bananaking ftw!
neuer user
Thread-Ersteller
 
Registriert seit: 06.02.2009
Beiträge: 14
Zeussi befindet sich auf einem aufstrebenden Ast
Ausrufezeichen [Formular] Semantisch richtige Elemente verwenden

Hallo Leute,

ich möchte ein Eingabeformular gestalten, bei dem auf der linken Seite die Beschreibung der Input Felder vorhanden ist und auf der rechten Seite die Input Felder selbst.

Hier ein kleines Beispiel:



Nun, für Formulare gehören eigentlich folgende Elemente:
HTML-Code:
<form>
  <fieldset>
    <legend></legend>
    <label for="name">Name: </label>
    <input id="name" type="text" name="name" size="30" />
    <input id="Senden" type="submit" name="senden" value="Senden" />
  </fieldset>
</form>
Schön, damit sind aber die Elemente untereinander, also funktioniert das schon mal nicht. Auch ist es nicht möglich, diese Elemente so zu floaten, dass sie nebeneinander sind (block / inline Elemente).

Gut, welche Möglichkeiten gibt es noch?

1. das Ganze mittels divs jeweils trennen, also label und input Felder und floaten

2. in Listen aufteilen (label / input) und floaten

Problem: die Höhe der Input Felder ist nicht genau so hoch wie deren Beschreibung - somit verschieben sich die zwei Blöcke in der Höhe

Was bleibt? Mir fallen nur die guten alten Tabellen ein... dabei hat jede Spalte eine bestimmte Höhe und es passt. - Doch was sagt da mein gutes Gewissen - ist das korrekt?

Somit meine Frage an euch, was empfiehlt sich für dieses Problem als Lösung?


Schon mal vielen Dank im Voraus,
Zeussi
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.09.2010, 00:26
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.378
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von Zeussi Beitrag anzeigen
Auch ist es nicht möglich, diese Elemente so zu floaten, dass sie nebeneinander sind (block / inline Elemente).
Warum ist es nicht möglich zu floaten?

floate input und label jeweils left und gib beiden eine Breite. Haut vollkommen und problemlos hin.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.09.2010, 00:37
bananaking ftw!
neuer user
Thread-Ersteller
 
Registriert seit: 06.02.2009
Beiträge: 14
Zeussi befindet sich auf einem aufstrebenden Ast
Standard

Ups, Thielo Du hast (teilweise) Recht

Hatte es vorhin gerade probiert - da hats nicht geklappt, auch nicht mit display: block; - da war wohl irgendwo der Wurm drin!

Und nach jeder Zeie dann ein:
HTML-Code:
<br style="clear: both;" />
?


Trotzdem bleibt so folgendes Problem:
- Die Hintergrundfarbe soll wie in obrigem Beispielbild abwechselnd unterschiedlich sein - mit dieser Methode kann ich dies nicht bestimmen

Mir fällt dazu ein, dass ich jede Zeile in eine Liste packe - dann spare ich mir die <br /> und kann die Hintergrundfarbe bestimmen - ist das semantisch korrekt?

LG,
Zeussi
Mit Zitat antworten
  #4 (permalink)  
Alt 06.09.2010, 00:43
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.378
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

wenn du in eine Liste das Formular reinsetzt musst du doch trotzdem noch die einzelnen Elemente floaten. Generell gilt: input und label sind von natur aus block Elemente.

Semantisch korrekt darüber kann man streiten (meine Meinung ) aber ich würde sagen das es ok wäre es in eine Liste zu setzen.

Aber um mal den Punkt der Hintergrundfarbe zu verwenden:

Du könntest doch einfach um jede Zeile ein div mit einer Klasse (der jeweiligen Farbe entsprechend) herum setzen. Und es müsste egentlich genügen wenn du dann jedem div ein clear: left; gibst. (eigentlich, ist ja schon spät )
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #5 (permalink)  
Alt 06.09.2010, 00:48
bananaking ftw!
neuer user
Thread-Ersteller
 
Registriert seit: 06.02.2009
Beiträge: 14
Zeussi befindet sich auf einem aufstrebenden Ast
Standard

Ja, richtig, es war nur eine Ergänzung meinerseits, die gefehlt hat
Jip, beide Elemente - label und input sollen in ein li-Element

Das ist jetzt der Punkt:
- kann aus irgend einem Grund der Browser nicht auf die CSS Datei zugreifen, dann erhalte ich ganz viele Div-Blöcke nebeneinander wenn ich in jeder Zeile ein Div setze
- setze ich eine Liste, so werden Elemente trotzdem untereinander angezeigt und sind richtig strukturiert

//edit: zur div Variante hab ich vergessen dass ja ein break gesetzt wird... dann ist es wieder egal... hm, also geht beides, nur was ist "richtiger" und schöner? Geschmacksache?

Also von dem Standpunkt aus gesehen, würde ich persönlich eher auf die Liste zugreifen?

Richtig... zu solch einer Zeit sollte man sich eigentlich über so etwas keine Gedanken machen

Geändert von Zeussi (06.09.2010 um 00:51 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 06.09.2010, 01:51
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Thielo Beitrag anzeigen
input und label sind von natur aus block Elemente.
Nein

Ich persönlich zeichne Formulare mit p aus, d.h. label und das dazugehörige Eingabe-Element stehen immer zusammen in einem p (aber div oder li sind ebenfalls denkbar).

Den konkreten Fall würde ich umsetzen, indem label und input jeweils mit width links floaten, und p die Floats einschließt, indem es ebenfalls links floatet (mit width: 100%). Der Submit-Button kann dann clearen (und bekommt dafür display: block).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #7 (permalink)  
Alt 06.09.2010, 16:59
bananaking ftw!
neuer user
Thread-Ersteller
 
Registriert seit: 06.02.2009
Beiträge: 14
Zeussi befindet sich auf einem aufstrebenden Ast
Standard

Danke heiko für Deinen Lösungsvorschlag - klingt auch gut

Dann kann ich ja ohne Bedenken eine dieser Methoden verwenden! Danke nochmal!
Mit Zitat antworten
  #8 (permalink)  
Alt 06.09.2010, 22:54
Benutzerbild von Pascolo
Stiller Leser
XHTMLforum-Mitglied
 
Registriert seit: 24.11.2007
Ort: Cham
Beiträge: 640
Pascolo sorgt für eine eindrucksvolle AtmosphärePascolo sorgt für eine eindrucksvolle Atmosphäre
Standard

Bei mir stehen die einzelnen Eingabefelder meistens in einer Definitionsliste. <label> steht dann in <dt> und das Feld selber in <dd>. Der Submit-Button steht dann jeweils nach dieser Liste in einem eigenen Absatz. Das sieht schlussendlich also etwa folgendermassen aus:

HTML-Code:
<form action="" method="post">
  <fieldset>
    <legend>Persönliche Angaben</legend>
    <dl>
      <dt><label for="forename">Vorname</label></dt>
      <dd><input type="text" id="forename" name="forename"></dd>
      <dt><label for="surname">Nachname</label></dt>
      <dd><input type="text" id="surname" name="surname"></dd>
    </dl>
  </fieldset>
  <p><input type="submit" name="submit" value="Speichern"></p>
</form>
Diese Konstruktion lässt sich auch hervorragend mittels CSS formatieren. Deine Vorgabe sollte damit problemlos realisierbar sein.
__________________
Mit freundlichen Grüssen "Pascolo"

Guter Webspace eSport Topliste Meine Lesezeichen Meine Spielwiese

Geändert von Pascolo (06.09.2010 um 22:57 Uhr) Grund: Korrektur im Code-Abschnitt
Mit Zitat antworten
  #9 (permalink)  
Alt 06.09.2010, 22:58
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Allerdings ist die Zuordnung von label & input per for/ID und dt/dd imho eine überflüssige Dopplung bzw. Redundanz.

Abgesehen davon, dass die Vorgabe damit wesentlich mühsamer umsetzbar ist, als bei einem Element, dass label & input paarweise umgibt.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)

Geändert von heiko_rs (06.09.2010 um 23:01 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 07.09.2010, 00:02
Benutzerbild von Pascolo
Stiller Leser
XHTMLforum-Mitglied
 
Registriert seit: 24.11.2007
Ort: Cham
Beiträge: 640
Pascolo sorgt für eine eindrucksvolle AtmosphärePascolo sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Allerdings ist die [deine] Zuordnung [...] eine überflüssige Dopplung bzw. Redundanz. Abgesehen davon, dass die Vorgabe damit wesentlich mühsamer umsetzbar ist [...]
Das stimmt, muss ich ehrlich zugeben. Diese doppelte Zugehörigkeit, oder wie man es auch immer nennen will, ist natürlich gegeben. Meine Variante finde ich aber etwas flexibler. Die Formatierung wird dadurch zwar etwas komplizierter, dafür konnte ich diesen Code aber auch immer wieder verwenden und zwar egal, wie ich nun das Formular jeweils gestaltet habe.

Deine Variante mit dem Absatz ist in diesem konkreten Fall wohl etwas besser.
__________________
Mit freundlichen Grüssen "Pascolo"

Guter Webspace eSport Topliste Meine Lesezeichen Meine Spielwiese

Geändert von Pascolo (07.09.2010 um 00:05 Uhr) Grund: Kleine Ergänzung
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
jQuery und Cookies: Position mehrerer Elemente speichern? sepp88 Javascript & Ajax 2 06.05.2011 13:59
Elemente unbrauchbar bei absolute Bara CSS 0 28.07.2010 06:18
Mehr (unnötige) Elemente oder weniger Flexibilität? Pleex CSS 3 13.05.2009 22:17
Welche Positionierung für elemente eines Formulas? bastien CSS 3 01.01.2007 22:31
IE :hover/:focus auf alle Elemente (expression) ulle Knowledge Base 8 10.02.2006 16:05


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:21 Uhr.