label und input strukturieren

[Zejo]

Hallo,

wie strukuriert man am Besten label und input (Textfeld, Radiobutton, etc.)?

In Büchern rund um HTML sieht man immer andere Methoden. Einige strukturieren es mit einem div, andere mit einer ungeordneten Liste (ul und li), wieder andere setzen das input in den label-tag. Und dann gibt es noch Leute die es in eine Tabelle setzen und manche setzen die 2 Inline-elemente einfach nebeneinander.

Ich habe hier mal die Möglichkeiten in Code form geschrieben.

<form method="post" action="#" id="formular">
<fieldset>
<legend>Textbox</legend>

<label for="idvorname1">Vorname:</label>
<input type="text" name="vorname1" id="idvorname1" placeholder="Textbox" required>

<div>
<label for="idvorname2">Vorname:</label>
<input type="text" name="vorname2" id="idvorname2" placeholder="Textbox" required>
</div>

<ul>
<li><label for="idvorname3">Vorname:</label>   </li>
<li><input type="text" name="vorname3" id="idvorname3" placeholder="Textbox" required> </li>
</ul>

<label for="idvorname4">Vorname:<input type="text" name="vorname4" id="idvorname4" placeholder="Textbox" required> </label>

<table>
<tr>
<td><label for="idvorname5">Vorname:</label></td>
<td><input type="text" name="vorname5" id="idvorname5" placeholder="Textbox" required> </td>
</tr>
</table>

<table>
<tr><td><label for="idvorname6">Vorname:</label></td></tr>
<tr><td><input type="text" name="vorname6" id="idvorname6" placeholder="Textbox" required> </td></tr>
</table>

</fieldset>
</form>

 

[thecain]

ul und table sind semantisch falsch -> Keine Listendaten und keine Daten welche in Tabellen gehören.

Input im Label ist laut w3c erlaubt
http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL

Ob du es noch in ein Div packst/packen musst kommt auf den Rest der Seite an.