Eingabemöglichkeit mit DIV Containern

[marctrix]

Hej htmlphp,

Wie findet Ihr die Lösung einfgabefelder in HTML via DIV einzugeben. oder lieber ohne Div?

Habe es für meine Arbeit nun so geplant:

<div>
	 <label for="nn">EINGABEFELD:</label>      
   <input type="text" size="30" name="tet" id="te" placeholder="PLATZHALTER">
</div>

Ich mache das so ähnlich, finde die Lösung von Gunnar aber besser. Muss ich mal ausprobieren, ob das irgendwelche Nachteile in der Praxis hat. Deine Lösung hat sich in der Vergangenheit bewährt, erst mal sehe ich aber nicht, was sich damit machen ließe, was mit der Lösung von @Gunnar Bittersmann nicht auch ginge.

Mein Code hat aber noch Klassen, die den Inhalt des div oder dann Label beschreiben. Also bisher so:

<div class="input-container">
	 <label for="name">Name</label>      
   <input type="text" size="30" name="tet" id="name" placeholder="Max Musterfrau">
</div>

Und in Zukunft wohl eher so:

<label class="input-container">
	 <span>Name</span>      
   <input name="name" id="name" placeholder="Max Musterfrau">
</label>

Ein paar Anmerkungen:

type="text" ist der default-Wert und damit unnötig.

Placeholder machen bestenfalls mit einem konkreten Beispiel Sinn, nötig sind sie selten und da man meist nicht für alle Felder eines Formulars einen geeigneten Platzhalter findet, hat man dann das Problem (stört manche), dass einige Felder einen Platzhalter haben, andere nicht. Dann wird in die ohne Platzhalter wieder Quatsch geschrieben.

Wie gesagt: dürfte meist unnötig sein und macht vermutlich mehr Probleme, als es löst.

Die Lösung von Gunnar ist (selbst mit meiner zusätzlichen Klasse) kürzer als Dein Vorschlag.

Wozu benötige ich die Klasse?

In Designs, mit denen ich zu tun habe, kommt es oft zu unterschiedlichen Problemen bei der Umsetzung von Layouts und der Ausrichtung von Formularelementen, die ich bisher alle mit dieser zusätzlichen Klasse lösen konnte. Da ich ohnehin dazu tendiere, mein HTML sinnvoll zu schreiben und auch mal Klassen zu notieren, obwohl ich vom CSS aus nicht drauf zugreife (einfach weil es HTML-Klassen sind, keine CSS-Klassen), habe ich mir das so angewöhnt. Die Klassen sind selbsterklärend, sehr oft eine Hilfe bei der Gestaltung und sie geben mir beim Lesen meines HTMLs eine Erklärung, warum da das semantiklose div überhaupt steht (eleganter als ein Kommentar). Es reichert das div also mit einer Art gefakten Semantik an (echte Semantik wären Rollen oder aria-Attribute, dazwischen gibt es dann noch RFD(a) und Verwandte).

Marc