Formularfelder sinnvoll auszeichnen?

[thuemmy]

Ich bin gerade dabei, ein Formular zu erstellen. Nun frage ich mich, wie die einzelnen Formularteile (Textfelder, Checkboxen und Textarea) sinnvol ausgezeichnet werden. Ich habe das nun so gemacht, dass ich z.B. jedes Textfeld mit einem <p>-Tag umschlossen habe. Macht das Sinn?

Seite mit Formular

Gruß thuemmy

 

[Efchen]

Nein :-)
Außerdem fehlt das wichtigste in einem Formular: <label>

Lies mal hier nach, das ist gut: Reine Formsache - Barrierefreie Formulare mit HTML, CSS & JavaScript : Einfach für Alle

 

[_Thor_]

Ein <p> halte ich hier für nicht richtig, da es sich nicht um einen Textabsatz handelt, ich zeichne Formulare als <ul> aus, da es, wie bei Bildern, eine Aufzählung ist, nur eben von Eingabefeldern mit Beschriftungen. Die Beschriftungen solltest du übrigends auch als <label> auszeichnen. Ausserdem sollten Eingabefelder in einem <fieldset> stehen.

<form action="" method="post">
  <fieldset>
    <legend>Formular</legend>
    <ul>
      <li>
        <label for="firma">Firma</label>
        <input type="text" id="firma" name="firma" value="" />
      </li>
    </ul>
  </fieldset>
</form>

 

[francesco]

Ein vernünftiges Formular sollte ungefähr so aussehen:

<form action="..." method="post">

    <fieldset>
    
        <legend>Zweck des Formulars</legend>
        
        <label for="name">Name:</label>
        <input type="text" name="name" id="name">
        
        <label for="e-mail">E-Mail:</label>
        <input type="text" name="e-mail" id="e-mail">
        
        <label for="nachricht">Nachricht:</label>
        <textarea name="nachricht" id="nachricht" cols="36" rows="10"></textarea>
        
        <input type="submit" value="Senden">
        
    </fieldset>

</form>

 

[thuemmy]

Ist das jetzt so besser?

Seite mit Formular

Und dann noch gerade eine Frage. Wie bekomme ich die Beschriftung der Checkboxen etwas tiefer?

Gruß thuemmy

 

[Efchen]

Nein. Du hast den Fehler, den francesco schon gemacht hat, mit übernommen.
Deine Formularfelder, die Du mit "for" ansprichst, müssen eine id mit entsprechender Bezeichnung haben, sonst klappt das "for" nicht. Der Effekt, der auftreten soll ist der, dass wenn Du das Label (= den Text) anklickst, sich der Cursor im Eingabefeld positioniert.

Und bei Deinen Checkboxen fehlen die labels noch komplett.

Firebug sagt mir, dass Dein label eine height von 16 hat, das input aber eine height von 17, dazu padding 4px und border 2px (margin-top ist bei beiden gleich groß). Da musst Du ansetzen.

P.S.: Ich finde Formulare doof, die immer davon ausgehen, dass man sowohl eine Mailadresse, als auch eine Telefonnummer besitzt und auch gewillt ist, beide preis zu geben. Wäre doch blöd, wenn jemand "110" bei der Telefonnummer eingibt, nur weil das Feld Pflichtfeld ist ;-)

 

[thuemmy]

Da habe ich mich auch etwas gewundert, dass das nicht funktioniert hat. Habe mir dann gedacht, dass das eventuell auch etwas mit Vorlesebrowsern zu tun haben könnte. Aber nu isses gefixed.

Gruß thuemmy

 

[Efchen]

Bei den Checkboxen hast Du vergessen, die Labels auszuzeichnen.

 

[thuemmy]

Danke für den Hinweis, auch dieses ist nun erledigt.

Werde mich nun mal an die Plausiprüfung und den Mailversand machen.

Gruß thuemmy