Label und for: für Validierung in Kontaktformular scheitert

[rakader]

Hallo,

ich finde partout den letzten Fehler für die Validierung folgenden Aufrufs in einem Kontaktformular nicht:

<p class="reihe"><label for="nachricht" class="leftLabel">Nachricht: <span id="att_n" onclick="toggleDetails(this);">Dieses Feld bitte ausfüllen</span></label>
<textarea class="nachricht" name="nachricht" cols="70" rows="80" id="narrow" eform="Nachricht::1"></textarea></p><br />

Validome.org bemängelt eine fehlende ID:

<p class="reihe"><label for="nachricht" class="leftLabel">Nachricht: <span i

Ein Skript prüft das Feld.

Das CSS dazu (es geht um Nachricht:

x; padding:0 0 20px 28px; }
.contact fieldset { border:none; }
.contact input, .contact textarea { border:2px solid #864310; background:#C68C3A; height:20px; }/* -- Light Brown Area, Middle Brown Border --*/
.contact legend { margin-left:0; padding:10px 32px 12px 81px; color:#eadace; font:bolder 20px helvetica, arial, sans-serif; } 
.contact .reihe { width: 355px; overflow: auto;}
.contact .leftLabel { float:left; width:70px; margin-left:-32px; padding:0 10px 0 0; text-align:right; }
.contact #submit { width: 90px; margin-left:260px; cursor:pointer; border:2px solid #864310; } 	
.contact .arrow {background:#C68C3A url(../gfx/error.png) 0 center no-repeat; }
.contact #narrow {background:#C68C3A url(../gfx/error.png) 0 top no-repeat; }

/* ----- Texteingabefelder ----- */
.contact #name, .contact #nachname, .contact #post { width:290px; padding:0 0 0 10px; }
.contact #strasse { width:191px; margin:0 20px 0 0; padding:0 0 0 5px; }
.contact #nummer, .contact #land { width:38px; margin:0 0 0 8px; padding:0 0 0 5px; }
.contact #telefon { width:190px; margin:0 10px 0 0; padding:0 0 0 5px;}
.contact #plz { width: 45px; margin: 0 10px 0 0; padding:0 0 0 5px; }
.contact #ort { width: 194px; margin: 0 0 0 8px; padding:0 0 0 5px; }
.contact .nachricht { width:295px; height:120px; padding:0 0 0 5px; }

/* ----- Texteingabefelder Aktionen----- */
.contact input:hover, .contact textarea:hover, .contact #submit.button:hover { border:2px solid #e5cfb9; }			/* -- Dark White Link Hover--*/
.contact input:focus, .contact textarea:focus, .contact #submit.button:focus { background-color:#e5cfb9; border:2px solid #C68C3A; }

/* ----- Warnung----- */
.contact .leftLabel span#att_vn, .contact .leftLabel span#att_nn, .contact .leftLabel span#att_m, .contact .leftLabel span#att_n { display:none; }
.contact .leftLabel.invalid span#att_vn, .contact .leftLabel.invalid span#att_nn, .contact .leftLabel.invalid span#att_m, .contact .leftLabel.invalid span#att_n, .contact .leftLabel.required span#att_vn, .contact .leftLabel.required span#att_nn, .contact .leftLabel.required span#att_m, .contact .leftLabel.required span#att_n { display:block; position:absolute; color: #B13700; margin:-13px 0 0 92px; font: bolder 11px helvetica, arial, sans-serif; }

Hat hier jemand ein Adlerauge und kann mir meinen Fehler nennen?

Wäre wirklich toll!

Herzliche Grüße
Radulph

[hero-master]

Validome.org bemängelt eine fehlende ID:

Der Validator bemängelt nicht eine fehlende ID, sondern dass die falsche Idee gesetzt wurde bzw. der falsche Wert für "for"im label.
http://www.w3schools.com/tags/tag_label.asp

Quintessenz: Gib dem Textfeld entweder die ID "nachricht" oder dem for-Attribut im Label den Wert "narrow"

[rakader]

Moin moin,

danke für die Antwort. doch keine Deiner beiden Lösungen trifft zu.
Reihe positioniert das Feld, leftLabel positioniert den Feldnamen links. narrow ist die Klasse für Pfeile als Markierung für benötigt.
Alle anderen Felder sind gleichfalls so ausgezeichnet - und valide. Es muss etwas mit textarea zu tun haben. Und: Es muss irgendwas in meinem CSS fehlen - finde es nur nicht.

[wildmieze]

wenn narrow ein Klasse sein soll, warum ist es dann eine ID?

[hero-master]

Die Validation deines HTML-Markups hat rein gar nichts mit dem CSS zu tun!

Glaub mir, es leigt an der falschen ID-Zuweisung. Das "for"-Attribut des Labels muss sich auf eine ID beziehen, die du für das enstprechende Feld definiert hast, damit eine Beziehung dazu entsteht.
Ändere deinen Code mal wie folgt und lass deine Seite dann nochmal validieren:

<p class="reihe"><label for="narrow" class="leftLabel">Nachricht: <span id="att_n" onclick="toggleDetails(this);">Dieses Feld bitte ausfüllen</span></label>
<textarea class="nachricht" name="nachricht" cols="70" rows="80" id="narrow" eform="Nachricht::1"></textarea></p><br />

[rakader]

Ich glaube Dir – Die Beziehung for und ID war mir so nicht bewusst. Ich hatte class="nachricht" gewählt, weil es mir bei id= das Layout zerhaut; in dem Fall wird die textarea einzeilig mit Scrollbalken dargestellt.

Nunmehr habe ich nachricht auf id gesetzt und narrow auf class. Den Rest muss ich dann übers css machen. Validome hat jedenfalls auf Deinen Wink hin mit Grün regaiert.

Nochmal Dank dafür, Nico!
Frohe Pfingsten,
Radulph

Edit: Herrlich: einfach id und class bei nachricht und narrow austauschen, gleichfalls im css - und alles ist im Lot