Sinnvolles Markup für Formulare

msslovi0

msslovi0

Aktives Mitglied
Thread Starter
Dabei seit
20.03.2005
Beiträge
2.726
Reaktionspunkte
117
Hi!

Beschäftige mich gerade mit der Umsetzung eines xt:Commerce-Shops, natürlich auch im Hinblick auf sinnvolles Markup und nicht mit dem mitgelieferten Tabellenchaos. Auch bei den fertigen, angeblich auf sauberem Markup basierenden Templates, bin ich mit der Qualität desselben nicht wirklich zufrieden, also mach ich das selber.

Beim Checkout habe ich jetzt ein Problem, an welcher Stelle ich welches Markup verwenden soll, damit es einen Sinn gibt. Ich strukturiere mir normalerweise meine Formulare mittels fieldset, legend und label. Jetzt kommen aber innerhalb des Formulars Bereiche vor, die keine Formularfelder enthalten, sondern nur Text. Diese habe ich derzeit mit einer Überschrift versehen und den Text ganz normal in p-Tags gesetzt, mittels CSS wird die Überschrift so formatiert wie die legend-Tags der fieldsets.
Allerdings erscheint mir das jetzt unlogisch, da sowohl legend als auch die h3 eigentlich die gleiche Wertigkeit haben, was auch durch die gleiche Formatierung mittels CSS für Besucher, die das aktiv haben, sichtbar wird. Innerhalb von legend darf ich ja aber kein h3 verwenden. Irgendwelche Vorschläge oder ist der beschrittene Weg der richtige?

Ebenfalls beim Checkout gibt es die Möglichkeit, Kommentare in ein textarea-Feld einzutragen. Zu diesem gibt es lediglich eine Überschrift (Tragen Sie hier ihre Kommentare ein). Und ich frage mich gerade, was sinnvoller ist, diese in die legend zu packen oder doch lieber in label für das zugehörige Feld. Und wenn letzteres (was mir logischer erscheint), ein leeres legend-Feld mitführen oder dann ganz weglassen?

Frohes Fest allen miteinander!

Matt
 
Hi Matt,

hie rmeine Gedanken zum Thema: Was spricht gegen die "normale Auszeichnung" von Text/Überschriften innerhalb des FORM-Tags? Die FIELDSETS für die Formularelement und dazwischen immer nur Überschriften und Text:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>

<form action="" method="post">
<fieldset>
<legend>Bitte Daten eingeben:</legend>
<label class="left">Name:</label><input name="inputName" type="text" value="Ihr Name" onfocus="this.value='';" /><br />
<input type="checkbox" value="callback" class="right" /><label>Irgendwas</label><br />
<label class="left">Telefonnr:</label><input type="text" />-<input type="text" /><br />
</fieldset>

<h3>Text</h3>
<p>Hier kommt Text</p>

<fieldset>
<legend>Absenden</legend>
<input type="submit" value="Absenden" class="right" />
</fieldset>

</form>

</body>
</html>

Wenn man den Text absetzen würde wollen (CSS/Farbe), könnte man noch ein DIV um Text/Überschrift legen, ähnlich dem FIELDSET Text. Aber meiner Meinung nach ist obige Variante sinnvoll, weil semantisch und valide.

2nd
 
So mache ich es ja derzeit. Irgendwie hab ich da noch eine Logikblockade, aber so ganz auf dem Holzweg bin ich dann wohl doch nicht.

Matt
 
Zurück
Oben Unten