HTML Textarea

[Raziel1]

Hi Leute

Hin und wieder stößt man auf Merkwürdigkeiten, die man sich nicht direkt erklären kann. In meinem Fall wollte ich gerade innerhalb eines XHTML 1.0 Strict Dokuments eine Form erstellen, welche zum Test nur eine Texarea enthält sowie einen Submitbutton. Laut Validator ist dies aber nicht korrekt und er sagt mir das die Verwendung des Textarea Tags an dieser Stelle so nicht korrekt ist.

Im Internet zeigt sich Textarea immer umgeben von einem p-Tag, was mich doch sehr wundert. Hat jemand eine Idee?

 

[das_micha]

ja, xhtml strict ist recht "scharf" war korrekte symantik und den einsatz von tags angeht

das p-tag steht exemplarisch für blockelemente.

der korrekte aufbau müsste entsprechend so aussehen (eine von vielen varianten)

<form>
<div><textarea></textarea></div>
<div><input /></div>
</form>

statt divs können auch p-tags sein die ich aber symantisch nicht korrekt finde da dieses tag einen absatz beschreibt.
dann schon eher fieldsets oder definitionslisten

 

[Raziel1]

Ja soweit versteh ich das eh, aber es ist mir völlig neu, das gewisse Tags in einem Div oder ähnlich vorkommen müssen. das steht so nichtmal in den XHTML regeln. Natürlich dürfen manche Tags wie Input Felder nur innerhalb eines Formulars stehen, aber wieso muss ein Inline Element wie Textarea oder Input nun in ein extra div?

Komischerweise ist mir das bisher so auc nicht untergekommen.

EDIT: Ein wenige weitere Internetrecherche und ein Blick in die DTD haben die Lösung gebracht: In XHTML 1.0 Strict muss direkt nach dem Form-Tag ein Blocklevel Element vorkommen. Da Input ein Inline Element ist, muss also vorher ein Div oder Fieldset etc gesetzt werden.

 

[das_micha]

Na genau genommen sind die regeln schon 12 Jahre alt wie gesagt, bei Strict wird sehr scharf validiert. Bei transitional bedeutend lascher. Letzteres wird daher sehr gerne eingesetzt weil es viele Schlamperei kaschiert.

In der xhtml Definition steht es nicht explizit auf die formularfelder bezogen, sondern viel allgemeiner gehalten. Um jedes verhalten zu kennen müsste man die dtd mal auseinander nehmen. Sehe ich aber als sinnbefreit an. Bei w3schools findest du aber sehr gute Beschreibungen wie welches Tag verwendet werden muss.

Und theoretisch musst du nicht jedes formfeld Kapseln. Ein umspannendes DIV würde reichen. Aber dadurch das man Formulare ja auch manierlich formatieren will, bietet es sich an. Und in den DIVs kann man die schön und leicht formatieren und als Einheit mit dem
Label behandeln.

Richtig kleinkariert wird's wenn man sich mal anschaut wie zend_Form, also eine Klasse des zend Frameworks Formulare aufbaut.


Nachtrag: kann es sein das du in der Vergangenheit, wie oben schon erwähnt auf xhtml transitional gearbeitet hast?

 

[Raziel1]

Nein niemals, bin als Webdeveloper tätig und da lernt man nur XHTML Strict
Daher hat es mich eben auch verwundet das ich nach jahrelanger Arbeit nun zum ersten Mal auf dieses Problem gestoßen bin.

 

[das_micha]

So, auch mal wieder hier... Na da bist du aber vorbildlich unterwegs... Die meisten Entwickler die mir übern weg gelaufen sind, auch aus renomierten schmieden, sind zu "feige" für Strict ich selber halte es wie du... Wenn ich pfusche will ich auch von w3c bestraft werden
Aber wundert mich das dir das vorher nie aufgefallen ist mit den Formularen. Hast du ggf im Form Tag ein allumspannendes blockelement gehabt? Das würde es valide machen.

Wobei ich den ganzen w3c Kram mittlerweile eh als nepp sehe... Wenn ich mir anschaue wie ich im Nachhinein html via JavaScript verbiege damit der Komfort erhalten bleibt, das ungeparste Script welches der validator zu fressen kriegt aber immer noch grün ist, dann denke ich mir manchmal "scheiß drauf"

 

[Raziel1]

Ich denke das ich wohl in allen echten Projekten bisher immer mit fieldsets gearbeitet hab und daher nie auf das Thema gestoßen bin.

Umso größer daher die Verwunderung. Eigentlich traurig das so wenige Strict verwenden, schwer ist es ja nicht wirklich.

 

[hokage]

Nur als kurzer Hinweis... Symantik habe ich noch nie gehört. Gemeint war wohl eher Semantik, richtig? Und der div Tag ist semantisch gesehen an dieser Stelle im Formular komplett falsch. Die semantische Bedeutung von div ist "Gruppe". Mit div gruppiert man also mehrere Elemente. Ein div tag um nur einen Tag (z.B. textarea) zu setzen ist somit komplett überflüssig.

<form>
<fieldset>
<textarea></textarea>
<input />
</fieldset>
</form>

Bei diesem Code sollte der Validator nichts zu melden haben, zu dem ist er semantisch einwandfrei.

grüße hokage

 

[das_micha]

@hokage:
Ja und Jein!
ja mit du hast recht das ich die semantik meine kein plan wie ich auf das andere wort komme. bezeichnen wir es mal als debile anwandlung meinerseits

Mit den fieldsets hast du grundlegend recht. in dem beispiel war der bezug zur semantik auf das p-tag bezogen, der rest auf meine these bezüglich des benötigten blockelements was raziel durch seine recherche auch nochmal bestätigt hat.
es hätte auch ein div um beide elemente gereicht. die schreibweise ist zugegeben irreführend weil ich dort meinen eigenen aufbau hab einfliessen lassen und das in unvollständiger form.

fieldsets um einen kompletten formularblock zu legen ist natürlich absolut sinnvoll in der form wie du es im beispiel hast.
Und ebenso wie das Div-Element handelt es sich beim Fieldset um ein Blockelement. Daher ist für den validator beides vermeintlich korrekt.
Wobei ich hinsichtlich der eigentlichen bedeutung der fieldsets schon einige innere kämpfe mit mir ausgetragen habe. Denn das fieldset macht in seiner eigentlichen bedeutung genau das was du dem div korrekterweise unterstellst, es gruppiert. Bei kleinen Formularen, ohne inhaltliche unterteilung (anders als hier bei der registrierung "Erforderliche Angaben" & "Zusätzliche Informationen") fehlt mir oft der Tiefergehende sinn die Elemente die eh im form-tag gebunden sind nochmals zu gruppieren, auch wenn ich es dennoch mache (untenstehendes beispiel)

Irreführender weise wird die Verwendung von Fieldsets aber häufig falsch im Netz beschrieben. Denn dort wird oft geraten um jedes formularfeld ein fieldset zu legen was einfach mal so nicht richtig ist.

ich für meinen teil baue formulare nach folgendem Schema auf und denke es ist weder aus sicht des validators, noch auch sicht der semantik etwas daran auszusetzen:

<form>
<fieldset>
<div><label></label><input></div>
<div><label></label><textarea></textarea></div>
</fieldset>
</form>

 

[seaker]

@Micha: Aus welchem Grund packst du die Label und die dazugehörigen Inputs noch mal in ein DIV. Klar du gruppierst die noch einmal. Aber sollte es semantisch nicht auch korrekt sein, indem du das DIV weg lässt und eben bei den Label das "for" - Attribut verwenden um die Zuordnung und Gruppierung zu bekommen?

 

[das_micha]

@seaker: der Aufbau ist unvollständig. Klar habe ich ein for im Label, sonst hätte ich mit das auch stecken können ebenso wie ich auch in den formelementen names und ids habe. Die DIVs dienen mir wenn ich diesen aufbau nehme zum formatieren der "Blöcke". Ich habe auch häufig noch Anmerkungen zu einzelnen Feldern wie erlaubte Zeichen usw. Ist da für mich einfach leichter zu handhaben wenn ich in solchen Blöcken arbeite. Mit Semantik hat das in dem Fall Null Zutun

 

[hokage]

Genau so baue ich meine Formulare auch auf. Die Div-Blöcke haben sehr wohl eine Bedeutung, da sie wie auch schon erwähnt beide Elemente gruppieren. Semantisch einwandfrei. Warum braucht man jetzt allerdings eine Gruppe? Man braucht sie in diesem Fall zur Formatierung mit CSS und das ist auch völlig in Ordnung, weil man die beiden Elemente im Div-Tag z.B. in einer Zeile angezeigt haben will. Der nächste Div Tag umfasst die nächste Zeile. Um die beiden Elemente z.B. mit float:left; zu positionieren ist der Div-Tag nötig.
Möchte man also mehrere Elemente gruppieren ist der Div-Tag so lange semantisch korrekt bis es einen neuen Tag gibt, der spezifischer dem Inhalt eine Bedeutung zu weißt (Siehe neue Tags in html5).
Denke die ganze Div-Thematik sollte jetzt ein bisschen klarer sein.

grüße