Eingabemöglichkeit mit DIV Containern

[htmlphp]

Hallo, 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>

[Auge]

Hallo

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>

Es ist nicht falsch, ein Eingabefeld uns sein Label zu gruppieren. Manche nehmen dafür ein div, andere gruppieren in einem p oder einem span. Ich würde, wie auch du es tust, zu einem div tendieren.

Allerdings sehe ich in dienem Quelltext zumindest einen gravierenden Fehler. Wenn das Label laut Attribut for das Element mit der ID „nn“ ansprechen soll, und die gezeigte Gruppierung ersnt gemeint ist, muss die ID des Eingabefeldes eben auch „nn“ lauten und nicht „te“. Oder in das Attribut for gehört der Wert „te“.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

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

Es ist nicht falsch, ein Eingabefeld uns sein Label zu gruppieren. Manche nehmen dafür ein div, andere gruppieren in einem p oder einem span.

Wieder andere nehmen das label als gruppierendes Element. Dann braucht man auch nicht unbedingt id- und for-Attribute. Aber es bietet sich an, das Label in ein span-Element zu stecken.

Allerdings sehe ich in dienem Quelltext zumindest einen gravierenden Fehler.

Ich sehe noch einen zweiten: das placeholder-Attribut. Dafür gibt es wohl kaum eine sinnvolle Anwendung.

LLAP 🖖

[Felix Riesterer]

Liebe(r) htmlphp,

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

ich bin für semantisches HTML. Wenn es um ein Login-Formular geht, tendiere ich zu einer Liste.

[EDIT]In allen Fällen, in denen ich Zeilen benötige, um die jeweiligen Eingabefelder visuell zu gruppieren, tendiere ich zu Listen. Wenn es sich dann noch um verschiedene Bereiche von Daten handelt, verwende ich zusätzlich fieldsets.

Liebe Grüße

Felix Riesterer

[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