Label-Element / input umschließen? display:block?

[oxo888oxo]

Hallo

Es geht mir um ein Formular.
Ich möchte es gerne so machen:

Name:
[....Feld....]

Straße:
[....Feld....]

Ort:
[....Feld....]

Also immer ein Label, dann nächste Zeile das Input-Feld und dann ein Abstand.

Nun ist es doch so, dass das Label-Element ein Inline-Element ist für das margin-top und margin-bottom keine Gültigkeit haben.
Was ist denn da der gescheiteste Weg, um einen Abstand zum vorherigen Feld zu bekommen?
Soll ich einfach das Label zu einem Block-Element machen?

Und noch eine andere Frage.
Welches der folgenden Möglichkeiten ist besser bzw. korrekter?
Oder ist das im Sinne eines suaberen HTML5 Codes im Grunde egal?

1. <label>Name</label><input>
2. <label>Name<input></label>

Gruß
Ingo

[Gunnar Bittersmann]

@@oxo888oxo:

nuqneH

Soll ich einfach das Label zu einem Block-Element machen?

Könnte zu Problemen führen, wenn es über die ganze Zeilenbreite geht.

Welches der folgenden Möglichkeiten ist besser bzw. korrekter?
Oder ist das im Sinne eines suaberen HTML5 Codes im Grunde egal?

1. <label>Name</label><input>
2. <label>Name<input></label>

Für sauber halte ich 1). Außerdem ermöglicht 1), mit CSS auf Änderungen des input zu reagieren (:checked, :valid, :invalid).

Qapla'

[oxo888oxo]

Könnte zu Problemen führen, wenn es über die ganze Zeilenbreite geht.

Ah ja stimmt. Ne das ist ja nicht so schön dann.
Dann lasse ich die Labels lieber als Inline-Elemente.

Aber wie löse ich das denn am besten mit dem oberen Abstand vom Input- zum nächsten Label-Element.
Nur dafür jetzt wieder alles in div-Container zu packen ist doch auch nicht schön.
Soll ich einfach den Input-Elementen Abstände nach unten geben?
Oder gibt es noch eine schönere Lösung?

Für sauber halte ich 1). Außerdem ermöglicht 1), mit CSS auf Änderungen des input zu reagieren (:checked, :valid, :invalid).

OK alles klar.
Dann nehme ich Lösung 1).

[Gunnar Bittersmann]

@@oxo888oxo:

nuqneH

Könnte zu Problemen führen, wenn es über die ganze Zeilenbreite geht.

Ah ja stimmt. Ne das ist ja nicht so schön dann.

Kommt drauf an. Kann auch gut sein, wenn die Clickfläche größer ist. Oder verwirrend, wenn der Nutzer ins Leere clickt und trotzdem was passiert. Hängt von der visuellen Gestaltung ab; wenn ersichtlich ist, dass das Label über die ganze Breite geht, spricht auch nichts dagegen.

Soll ich einfach den Input-Elementen Abstände nach unten geben?

Kann man machen.

Dann nehme ich Lösung 1).

Dabei nicht vergessen, jedem input eine eigene ID zu geben und das for-Attribut des Labels entsprechend zu setzen.

Qapla'

[oxo888oxo]

Dabei nicht vergessen, jedem input eine eigene ID zu geben und das for-Attribut des Labels entsprechend zu setzen.

Yep, geht klar.

[Gunther]

@@Gunnar:

nuqneH

Welches der folgenden Möglichkeiten ist besser bzw. korrekter?
Oder ist das im Sinne eines suaberen HTML5 Codes im Grunde egal?

1. <label>Name</label><input>
2. <label>Name<input></label>

Für sauber halte ich 1).

Dann solltest du aber auch explizit erwähnen, dass das Label Element dann zwingend ein for Attribut braucht, dessen Wert mit dem des id Attributs des zugehörigen Input Elements übereinstimmt.

Und deine angeführte Begründung kann ich auch nur bedingt nachvollziehen.
So oder so sind ein Label und ein Input Element "fest" miteinander verbunden. Übersichtlicher im Quellcode ist da sicherlich Variante 2.

Außerdem ermöglicht 1), mit CSS auf Änderungen des input zu reagieren (:checked, :valid, :invalid).

Inwiefern sollte/ muss man da bei dem jeweiligen Label Element drauf reagieren können?
Das Input Element ist doch dasselbe ...!

Außerdem "erledigen" moderne Browser das von selber (form validation).

Gruß Gunther

[Gunnar Bittersmann]

@@Gunther:

nuqneH

Dann solltest du aber auch explizit erwähnen, dass das Label Element dann zwingend ein for Attribut braucht, dessen Wert mit dem des id Attributs des zugehörigen Input Elements übereinstimmt.

Als hätte ich’s geahnt! ;-)

Außerdem ermöglicht 1), mit CSS auf Änderungen des input zu reagieren (:checked, :valid, :invalid).

Inwiefern sollte/ muss man da bei dem jeweiligen Label Element drauf reagieren können?
Das Input Element ist doch dasselbe ...!

<label for="my-input">Label</label>  
<input id="my-input"/>  
<p class="input-hint">Hinweis, was in das Eingabefeld rein soll</p>

input:valid + .input-hint { visibility: hidden }  

Das kriegst du mit

<label for="my-input">Label  
  <input id="my-input"/>  
</label>  
<p class="input-hint">Hinweis, was in das Eingabefeld rein soll</p>

nicht hin, weil input und p keine Gewschister sind.

Qapla'

[Gunther]

@@Gunnar:

nuqneH

Dann solltest du aber auch explizit erwähnen, dass das Label Element dann zwingend ein for Attribut braucht, dessen Wert mit dem des id Attributs des zugehörigen Input Elements übereinstimmt.

Als hätte ich’s geahnt! ;-)

Haha ..., ja du und deine Ahnungen - sehr gut! ;-)

Außerdem ermöglicht 1), mit CSS auf Änderungen des input zu reagieren (:checked, :valid, :invalid).

Inwiefern sollte/ muss man da bei dem jeweiligen Label Element drauf reagieren können?
Das Input Element ist doch dasselbe ...!

<label for="my-input">Label</label>

<input id="my-input"/>
<p class="input-hint">Hinweis, was in das Eingabefeld rein soll</p>

>   
> ~~~css

input:valid + .input-hint { visibility: hidden }  

> 

Das kriegst du mit

<label for="my-input">Label

<input id="my-input"/>
</label>
<p class="input-hint">Hinweis, was in das Eingabefeld rein soll</p>

>   
> nicht hin, weil input und p keine Gewschister sind.  
  
Ob ein P Element hier semantisch wirklich die erste Wahl ist, sei aber auch mal dahingestellt.  
  
Und mit:  
~~~html
<label for="my-input">Label  
  <input id="my-input"/>  
  <span class="input-hint">Hinweis, was in das Eingabefeld rein soll</span>  
</label>

kriegst du es sehr wohl hin - siehe: JSFiddle

Sogar mit dem "Vorteil" verbunden, dass zusammensteht, was auch zusammen gehört ...! :-P

Gruß Gunther

[Gunnar Bittersmann]

@@Gunther:

nuqneH

Und mit:

<label for="my-input">Label

<input id="my-input"/>
  <span class="input-hint">Hinweis, was in das Eingabefeld rein soll</span>
</label>

> kriegst du es sehr wohl hin - siehe: [JSFiddle](http://jsfiddle.net/Netsurfer/YWmy6/)  
>   
> Sogar mit dem "Vorteil" verbunden, dass zusammensteht, was auch zusammen gehört ...! :-P  
  
Da sind wir wieder bei der Bedeutung des label-Elements: Ist das wirklich als gruppierendes Element für alles gedacht, „was auch zusammen gehört“? Oder doch eher – wie seine Benennung suggeriert – zur Auszeichnung der Beschriftung eines Eingabefelds?  
  
Qapla'

-- 
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)

[ChrisB]

Hi,

<label for="my-input">Label

<input id="my-input"/>
  <span class="input-hint">Hinweis, was in das Eingabefeld rein soll</span>
</label>

> > kriegst du es sehr wohl hin - siehe: [JSFiddle](http://jsfiddle.net/Netsurfer/YWmy6/)  
> >   
> > Sogar mit dem "Vorteil" verbunden, dass zusammensteht, was auch zusammen gehört ...! :-P  
>   
> Da sind wir wieder bei der Bedeutung des label-Elements: Ist das wirklich als gruppierendes Element für alles gedacht, „was auch zusammen gehört“? Oder doch eher – wie seine Benennung suggeriert – zur Auszeichnung der Beschriftung eines Eingabefelds?  
  
<http://www.w3.org/TR/html5/forms.html#the-label-element> hat zumindest ein weitgehend dazu analoges Beispiel:  
  

> The following example shows three form controls each with a label, two of which have small text showing the right format for users to use.  
  
~~~html
<p><label>Full name: <input name=fn> <small>Format: First Last</small></label></p>  
<p><label>Age: <input name=age type=number min=0></label></p>  
<p><label>Post code: <input name=pc> <small>Format: AB12 3CD</small></label></p>

MfG ChrisB

[Gunther]

@@Gunnar:

nuqneH

Da sind wir wieder bei der Bedeutung des label-Elements: Ist das wirklich als gruppierendes Element für alles gedacht, „was auch zusammen gehört“? Oder doch eher – wie seine Benennung suggeriert – zur Auszeichnung der Beschriftung eines Eingabefelds?

Das ist dann imho aber auch eher eine "philosophische" Frage ...! ;-)

Wenn es weder direkte Vor- oder Nachteile bei einer der Varianten gibt, dann erachte ich es wirklich eher als eine Frage der/des persönlichen Ansicht, Vorliebe, Geschmacks oder was auch immer.

Andererseits ist es ja auch nicht zwingend "verkehrt", dass "Webdesign" eben gerade keine exakte Wissenschaft ist, wo es nur richtig oder falsch gibt.

Ich kann deine Argumentation, bzw. Ansicht durchaus nachvollziehen/ verstehen.

Wenn man diese dann konsequent so durchzieht, dann ist das eben genau der jeweilige "persönliche Stil".

Gruß Gunther

[molily]

Nun ist es doch so, dass das Label-Element ein Inline-Element ist für das margin-top und margin-bottom keine Gültigkeit haben.
Was ist denn da der gescheiteste Weg, um einen Abstand zum vorherigen Feld zu bekommen?

Den Blockelementen darüber den Abstand geben. Üblicherweise ein p oder ein li.

Soll ich einfach das Label zu einem Block-Element machen?

Kannst du auch, aber zur allgemeinen Formularstrukturierung eignen sich entsprechende HTML-Elemente, denen man üblicherweise Margins zuweist (p, ul, ol, dl, table, ferner fieldset/legend, section, div).

Eine Abweichung von dieser Regel in Formularen halte ich allgemein nicht für sinnvoll. Was nicht ausschließt, dass man Labels layoutet.

Welches der folgenden Möglichkeiten ist besser bzw. korrekter?

Sie sind beide gleich korrekt und haben natürlich in gewissen Fällen Vor- und Nachteile, je nachdem, wie das Formular aufgebaut ist und welche Styles man anwenden will.

Ich verwende gerne häufig verschachtelte Inputs mit display: block, weil dann gleich ein großer Bereich klickbar ist und das Feld fokussiert bzw. aktiviert sowie keine for-/id-Verbindung nötig ist. Das Generieren von IDs in großen Formularen ist nämlich äußerst lästig.

Mathias