[daarg]

Für ein Projekt das u.a. die barrierefreiheit (WAI) gewährleisten soll schreibe ich ein kleineres CSS-Framework und bin auf der Suche nach einer geeigneten Umsetzung (Ansatz) für Formulare.

Ich nutze prinzipiell keine Tabellen (ausser bei tabellarischen Inhalten) und habe meine Formulare bisher nach dem Muster

<form>
<fieldeset>
<legend>Legende</legend>
<ul>
<label>Text</label>
<input type="text" id="wert" value=""/>
</ul>
</fieldset>
</form>

umgesetzt. Ohne CSS eigentlich gut lesbar aber doch nicht ganz logisch.
Ich möchte das Ganze anders umsetzen, ein Ansatz wäre

<form>
<fieldset>
<legend>Legende</legend>
<dl>
<dt><label>Text</label></dt>
<dd><input type="text" id="wert" value=""/>
</dl>
</fieldset>
</form>

ein weiterer Ansatz wäre die Verwendung von Div-Containern...

Welcher Ansatz macht mehr Sinn? Meiner Meinung nach wäre die DL/DT/DD-Lösung am einfachsten und logischsten, oder?

// CH

[tobias86]

hey,

ich hatte das ganze mal mit folgeden Boxen umgesetzt.

<div style="width: 400px; border: 0px solid #ccc;">
 <div style="clear: both; display: table; width: 100%;">
  <div style="display: table-row;">
   <div style="display: table-cell; width: 200px;">Ihr Name:</div>
   <div style="display: table-cell;"><input type="text" tabindex="1" name="username" size="25" value="<?php if($_POST[flag]=="1"){echo $_POST[username];}?>" /></div>
   </div>
  </div>
 </div>
</div>

Obs 100% barrierefrei ist müsstest du noch mal testen, aber sonst war es xhtml-strict. Hoffe das hilft dir weiter

[daarg]

Werde wohl nach folgenden Schema verfahren:

<form>
	<fieldset>
		<legend>Legend</legend>
		<div>
			<label for="id1">Label 1</label>
			<input type="text" id="id1" value=""/>
		</div>
		<div>
			<label for="id1">Label 2</label>
			<input type="text" id="id2" value=""/>
		</div>
		<div>
			<span class="label">Label 3></label>
			<input type="radio" id="rid1" name="radio" value="1"/><label for="rid1">Wert 1</label><br />
			<input type="radio" id="rid1" name="radio" value="1"/><label for="rid1">Wert 1</label><br />
		</div>
	</fieldset>
</form>

Um die Darstellung an sich gehts mir gar nicht - die ist Dank CSS flexibel ...

[Witi]

Divs sind in diesem Fall sind wirklich semantisch. Wenn du Abstände zwischen den einzelnen Elementes haben möchtest, nimm p-Tags, also Paragraphen.

[daarg]

Danke für Eure Inputs. Geht mir halt auch darum möglichst vieles abzudecken, z.Bsp. Formular in zweispaltigem Layout, Formular "einspaltig" dann das ganze mit den notwendigen Freiheiten (Label link oder oberhalt Feld, Label rechts neben Feld für radio/checkbox) usw.

Denke mit meiner Umsetzung (die ja nur vereinfacht gepostet wurde) bin ich am flexibelsten und muss nicht immer im HTML-Code rumbasteln.

// CH