okan: Semantische Darstellung eines Profils

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

  1. 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

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
    1. [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

      --
      Hard to believe that anyone would use Prototype.js at this
      point. It was a bad idea in 2006 and it hasn't gotten any better with age. (David Mark)
      Foren-Stylesheet Site Selfzeugs
      SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?
      1. @@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'

        --
        Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
        1. 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

          --
          ><o(((°>           ><o(((°>
             <°)))o><                     ><o(((°>o
          Der Valigator leibt diese Fische