XHTMLforum - (Listen)Layout für Formulare

XHTMLforum (http://xhtmlforum.de/index.php)

- Barrierefreiheit (http://xhtmlforum.de/forumdisplay.php?f=78)

- - (Listen)Layout für Formulare (http://xhtmlforum.de/showthread.php?t=40970)

(Listen)Layout für Formulare

Was haltet ihr von diesem Lösungsansatz:

Zitat:

Zitat von webstandard In Accessibility

Einen interessanten Ansatz für den Umgang mit Formularen, bietet ein bereist einige Wochen alter Artikel auf A List Apart ... Die Lösung sieht eine Liste vor, in der jeder Listenpunkt eine Kombination aus Label und Formularelement ( bspw. Eingabefelder / Auswahlmenü und Label - siehe Formular anlegen ).

LINK

Bisher sehen meine Formulare in etwa so aus:

Code:

<fieldset>

<legend>Kontaktformular</legend>



<p><label>Vorname:<br>

<input type="text" id="vorname" name="vorname" size="30" value=""></label><p>



<p><label>Nachname:<br>

<input type="text" id="nachname" name="nachname" size="30" value=""></label></p>



<p><label>Ihre <span lang="en">E&ndash;Mail</span>:<br>

<input type="text" id="email" name="email" size="30" value=""></label></p>



<p><label>Ihre Nachricht:<br>

<textarea class="maxlength max_1000" id="maxLength" name="nachricht" rows="10" cols="30"></textarea></label></p>



<input type="submit" value=" Senden " name="submit" title="Nachricht absenden">



</fieldset>

Bietet die Listenlösung irgend einen Vorteil?

Falsch ist es vermutlich nicht, aber ich seh auch keinen großen Vorteil darin. Eine Variante mit der Definitionsliste kann man sich eventuell noch überlegen, da man sozusagen zwischen Label und Kontrollfeld dadurch eine weitere Verbindung herstellt. Es ist aber fraglich ob jeder der Meinung ist, dass eine Definitionsliste der richtige weg ist. Bei ner normalen Liste sehe ich hingegen gar keinen Vorteil.

Semantisch gesehen finde ich deine bisherige Vorgehensweise absolut in Ordnung (mach ich auch meistens so).

Unwichtig, aber das sind die meisten Beiträge der Webstandards-Seite die du zitierst. Der Autor postet dort eigentlich nur uralte Themen, die jeder schon lange kennt oder die unwichtig und unsinnig sind.

Ich würde deine Lösung bevorzugen, aber Absätze und manuelle Zeilenumbrüche weglassen.

Ich benutze schon seit langem Listen in Formularen, da dann das ganze auch ohne CSS ganz gut aussieht und ich alle Freiheiten beim Gestalten habe, die man braucht.

<p> Finde ich etwas unangebracht, da für mich das eine Auflistung von Formularelementen ist, und nicht ein zusammenhängender Text, der in Paragraphen unterteilt ist. Aber ich denke jedem das Seine :)

Zitat:

Zitat von Scipio

Code:

<p><label>Vorname:<br>

<input type="text" id="vorname" name="vorname" size="30" value=""></label><p>

Ich halte es semantisch für merkwürdig, das Formularfeld innerhalb von LABEL einzufügen.
In der Spezifikation http://www.edition-w3.de/TR/1999/REC...tml#edef-LABEL
wird dies BTW auch nicht getan.

Zu den Elementen zur Auszeichnung von Formularen allgemein:
Ein blinder Bekannter, der sich auch mit Barrierfreiheit von Webseiten beschäftigt, sagte mir, dass er TH neben TD (also zweispaltig) für die am leichtesten nutzbare Auszeichnung hält.

Ich als Sehender ziehe ebenfalls das Nebeneinander von Bezeichnung und Formularfeld dem Nacheinander vor.

Beispiel:

Code:

<fieldset>

        <legend>Newsletter bestellen/abbestellen</legend>

        <table>

                <tfoot>

                        <tr>

                                <td colspan="2">

                                        <input type="submit" name="art" value="Anmelden" />

                                        <input type="submit" name="art" value="Abmelden" />

                                </td>

                        </tr>

                </tfoot>

                <tbody>

                        <tr>

                                <th scope="row">

                                        <label for="name">Name</label>

                                </th>

                                <td>

                                        <input type="text" name="name" id="name" />

                                </td>

                        </tr>

                        <tr>

                                <th scope="row">

                                        <label for="email">E-Mail</label>

                                </th>

                                <td>

                                        <input type="text" name="email" id="email" />

                                </td>

                        </tr>

                </tbody>

        </table>

</fieldset>

Weil ich selber semantisch weder DLs noch TABLEs für perfekt halte, gefällt mir auch die Verwendung des neutralen DIV:

Code:

<fieldset>

        <legend>...</legend>

        <div>

                <label>...</label>

                <input ... />

        </div>

        <div>

                <label>...</label>

                <input ... />

        </div>

</fieldset>

Wozu sollen die Divisionen gut sein? Darauf kann man doch genauso gut verzichten.

Code:

<fieldset>



  <legend>...</legend>



  <label>...</label>

  <input ... />



  <label>...</label>

  <input ... />



</fieldset>

Zitat:

Zitat von designfanatiker

Wozu sollen die Divisionen gut sein? Darauf kann man doch genauso gut verzichten.

Kann man, klar. Das Attribut in LABEL stellt ja den Bezug zu "seinem" INPUT her.
Aber den Zusammenhang per Element herzustellen ist IMHO "semantisch wertvoller".
Und wenn der Autor eine Darstellung untereinander wünscht, muss er kein "gestalterisches Markup" in Form von BRs einfügen.

Was denkst Du BTW zu der Lösung mit TABLE im Vergleich zu der mit DL?

Zitat:

Zitat von Andreas Borutta

Was denkst Du BTW zu der Lösung mit TABLE im Vergleich zu der mit DL?

Eine Tabelle? Furchtbar. Das Eingabefeld und die zugehörige Beschriftung kann man auch ohne überflüssige Elemente wie Tabellen, Listen , Divisionen oder manuellen Zeilenumbrüchen nebeneinander oder wahlweise auch untereinander anordnen.

Bezeichner und Formularfelder können als Daten aufgefasst werden.
Eine Datentabelle ordnet diese Daten präzise einander zu.

Furchtbar kann ich diese Auszeichnung daher nicht finden.
Wenn ich zwischen DT+DD und TH+TD werten müsste, fiele meine Urteil deutlich für TH+TD aus.