Kontaktformular Auszeichnung

[DerMitSkill]

Hallo,
ich weiß nicht wie ich mein Kontaktformular richtig auszeichen soll bzw. ob ich es in eine Tabelle setzen soll... wie macht ihr es immer?

Ich habs jetzt so, hab aber das gefühlt das das nicht gut ist:

<form action="kontakt-auswerten.php" class="kontakt" method="post">
     <p>Ihr vollständiger Name<br /><input name="name" size="30" type="text" /></p>
     <p>Ihre E-Mail Adresse<br /><input name="e-mail" size="30" type="text" /></p>
     <p>Ihre Nachricht<br /><textarea name="nachricht"></textarea></p>
     <p><input name="abschicken" type="submit" value="Abschicken" />
     <input name="leeren" type="reset" value="Leeren" /></p>
</form>

 

[_Thor_]

<form ...>
 <fieldset>
  <legend>Kontakt</legend>
  <label for="name">Name:</label><input type="text" id="name" />
  <label for="email">Email:</label><input type="text" id="email" />
  <label for="address">Address:</label><input type="text" id="address" />
</fieldset>
</form>

 

[Junny]

Bei der Auszeichnung von Formularen helfen unter anderem fieldset, legend- und label-Tags.

<form action="kontakt-auswerten.php" class="kontakt" method="post">
  <fieldset>
  <legend>Eingaben</legend>
    <label for="id">Ihr vollständiger Name</label>
    <input name="name" id="id" size="30" type="text" />
    <label for="e-mail"> Ihre E-Mail Adresse</label>
    <input name="e-mail" id="e-mail" size="30" type="text" />
    <label for="nachricht">Ihre Nachricht</label>
    <textarea name="nachricht" id="nachricht" rows="5" cols="30"></textarea>
  </fieldset>
  <fieldset>
    <legend>Optionen</legend>
    <input name="abschicken" type="submit" value="Abschicken" />
    <input name="leeren" type="reset" value="Leeren" />
  </fieldset>
</form>

Gruß
Junny

 

[DerMitSkill]

Dann muss ich ja mit CSS den Rahmen und die <legend>-Tags verstecken...

Und wie soll ich die Umbrüche machen? Auch mit CSS? Wie? Oder doch <br />?

 

[_Thor_]

Dann muss ich ja mit CSS den Rahmen und die <legend>-Tags verstecken...

Und wo ist das Problem? CSS ist nunmal fürs Layout zuständig, nicht HTML.

Rahmen und <label> kannst du ganz einfach mit

fieldset {border: none;}
label {display: none;}

ausblenden.

Die Umbrüche machst du mit

label {display: block;}

 

[DerMitSkill]

Das hebt sich doch auf. Erst machst Du "label{display:none};" und dann "label{display:block};"... das "display:none;" kannste Dir doch sparen...?

Und wegen <legend> dann:

legend {
    visibility:hidden;
}

Oder?

 

[_Thor_]

Ich meinte auch legend, nicht label.

[edit]
hier stand mal was völlig falsches
[/edit]

 

[DerMitSkill]

Das es JavaScript ist, ist mir neu :shock: Aber es ist auch besser als visibility:hidden;, weil der Platz freigegeben wird und nicht nur versteckt wird

 

[_Thor_]

Ich erzähl auch nen Scheiß gerade, sry, natürlich gibt es auch visibility: hidden in CSS. Vergiss, was ich gesagt habe.

 

[DerMitSkill]

Haaa, hab ichs doch gewusst :razz::razz::razz::razz: *ätsch*

(Nicht böse ;))

 

[crash]

Umbrüche sollte es schon im HTML geben, sonst kann man das im Textbrowser schwierig bedienen.

 

[DerMitSkill]

Ohne CSS im Textbrowser siehst dann eh schon ziemlich scheiße aus, da macht das bisschen auch nichts mehr

Ironie...

Was soll ich nur tun? :shock:

 

[crash]

Reine Formsache - Barrierefreie Formulare mit HTML, CSS & JavaScript : Einfach für Alle

Ich bin aber inzwischen dazu übergegangen einzelne Zeilen in DIV zu stecken. Beim W3C sieht man immer <p>, damit kann ich mich aber auch nicht anfreunden.

 

[DerMitSkill]

Was spricht für/gegen

<button type="submit">Abschicken</button>

und

<input type="submit" value="Abschicken" />

?

 

[crash]

Gegen Button spricht nur, dass man im IE bei komplexeren Sachen Probleme bekommen kann.

 

[neuroleptika]

<p>, <li> oder <div> ist letztlich Meinungssache.
Wichtig ist ein Blockelement.
Wenn das Formular umfangreicher werden sollte würde ich inputs in fieldset zusammenfassen.
Wenn nicht nimm ein Blockelement deiner Wahl oder verwende <br />.
Auch table / tr / td ist in manchen Formularen akseptabel.

Ich finde ul / li praktisch weil ich damit mehr Elelemente zum gestalten habe.
<td> lässt sich nicht floaten (bzw. bricht auch nicht um) und schränkt damit sehr ein.
Zu jedem input, select und textarea gehört ein label.

Formulare werden in Lynx wirklich übersichtlicher wenn Blockelemente oder <br /> die <input>s zeilenweise trennen.
Nackte <input> werden sonst inline angezeigt.

Ich sehe mir meine Formulare selten mit Lynx an.
Ein üblicher Browser mit deaktiviertem css reicht meiner Meinung nach aus.

praktisch: firefox Web Developer > css > Disable Styles > All Styles

 

[Junny]

Und was haltet Ihr von einer Definitionsliste?

 

[crash]

Dann eher noch eine Liste. LABEL definiert ein INPUT schon ausreichend, bzw. in einem größeren Maße. Weshalb ich eine Definitionsliste für übertrieben halte, besonders, da sie als solche auf einem Screenreader ausgegeben wird.