Semantische Darstellung eines Profils

[okan]

Hi.

Auf meiner Seite gibt es ein Profil für jeden User, dort kann er versch. Angaben machen.

Wie würdet ihr dieses semantisch darstellen?
bisher mache ich es so

<span class='left'>Name des Feldes</span><input type='text' name='name des feldes' class='right' />

Und davon 30 Stück untereinander.

Welche Attribute sollte ich den Argumenten noch geben damit sie barrierefrei sind und wie sollte ich die Elemente anordnen? So lassen? Oder doch lieber eine Tabelle oder eine oder zwei listen verwenden?

Gruß, Okan

[Beat]

Auf meiner Seite gibt es ein Profil für jeden User, dort kann er versch. Angaben machen.
Wie würdet ihr dieses semantisch darstellen?
bisher mache ich es so

<span class='left'>Name des Feldes</span><input type='text' name='name des feldes' class='right' />

Und davon 30 Stück untereinander.
Welche Attribute sollte ich den Argumenten noch geben damit sie barrierefrei sind und wie sollte ich die Elemente anordnen? So lassen? Oder doch lieber eine Tabelle oder eine oder zwei listen verwenden?

Deine Aufgabe ist nicht ein profil, sondern ein Formular.
Verwende vor Allem <label>
Zur weiteren Strukturierung dienen <fieldset> und <legend>

mfg Beat

[Kai345]

[latex]Mae  govannen![/latex]

Welche Attribute sollte ich den Argumenten noch geben damit sie barrierefrei sind und wie sollte ich die Elemente anordnen? So lassen? Oder doch lieber eine Tabelle oder eine oder zwei listen verwenden?

Deine Aufgabe ist nicht ein profil, sondern ein Formular.
Verwende vor Allem <label>
Zur weiteren Strukturierung dienen <fieldset> und <legend>

Genau.

Man könnte, im das fortzuführen, hier sogar eine Liste (ul oder dl) nutzen:

<ul>  
  <li><label for="foobar1">Textlabel 1<input id="foobar1" type='text' name="bla1" /><label></li>  
  <li><label for="foobar2">Textlabel 2<input id="foobar2" type='text' name="bla2" /><label></li>  
</ul>

oder

<dl>  
  <dt><label for="foobar1">Textlabel 1<label></dt>  
  <dd><input id="foobar1" type='text' name="bla1" /></dd>  
  <dt><label for="foobar2">Textlabel 2<label></dt>  
  <dd><input id="foobar2" type='text' name="bla2" /></dd>  
</dl>

und per CSS entsprechend formatieren.

Cü,

Kai

[Gunnar Bittersmann]

@@Kai345:

nuqneH

Man könnte, im das fortzuführen, hier sogar eine Liste (ul oder dl) nutzen:

Manchmal ist eine Tabelle auch einfach nur eine Tabelle:

<table>  
  <tbody>  
    <tr>  
      <th><label for="foobar1">Textlabel 1<label></th>  
      <td><input id="foobar1" type="text" name="foobar1"/></td>  
    </tr>  
    <tr>  
      <th><label for="foobar2">Textlabel 2<label></th>  
      <td><input id="foobar2" type="text" name="foobar2"/></td>  
    </tr>  
  </tbody>  
</table>

IIRC sollten, wenn für ein Element @id und @name vergeben werden, beide denselben Wert haben (außer natürlich bei Radiobuttons und Checkboxen).

und per CSS entsprechend formatieren.

Was bei Definitionslisten wegen des fehlenden 'di'-Elements (welches zusammengehörende 'dt' und 'dd' gruppieren soll) manchmal schwer bis unmöglich ist.

Qapla'

[Beat]

Manchmal ist eine Tabelle auch einfach nur eine Tabelle:

Bis zu dem Punkt, wo die Formularbestandteile nicht mehr in eine tabellarische Struktur passen.
Dann ist es wieder schlicht eine Layoutkrücke.

mfg Beat