Google Formularfeld Bezeichnung

[Xethon]

Hallo zusammen,

ich habe mich gefragt, wie man die Bezeichnung von Formularfeldern formatiert, wie es z.B. Google hier bei dem Feld "Vorname" macht. Sprich, dass sich die Bezeichnung in den Rahmen integriert. Gibt es dafür eine CSS-Eigenschaft oder ein HTML5-Element oder wie würde man das umsetzen?

 

[Sephe]

Rechte Maustaste -> Untersuchen.

 

[kartoffelpü]

Die ganzen Eigenschaften kann man sich doch schön mit den Browser Developer Tools anschauen (und sogar einzeln deaktivieren/aktivieren, um zu schauen, was sich ändert).

 

[Xethon]

Das habe ich bereits gemacht, aber bin daraus nicht wirklich schlau geworden. Dachte das ist vielleicht ein Element wie es z.B. beim HTML-Fieldset ist.

 

[conglom-o]

Das geht mit <legend>. Musst Du dann aber noch per CSS schön machen.
https://www.w3schools.com/tags/tag_legend.asp

 

[netzgestaltung]

hier gibts eine nähere beschreibung:
https://materializecss.com/text-inputs.html

ich hab schon oft gut funktionierende teile aus anderen seiten via "untersuchen" kopiert und verändert, definitiv ein oft guter weg. Wenn man das css dazu versteht benötigt es meist nicht so viel html markup: https://stackoverflow.com/questions/45150781/placing-label-text-inside-the-border-of-a-text-input

 

[TheChief79]

Naja, mit <label> und ein bisschen CSS gemacht würde ich mal vermuten.

 

[RalphS]

Fieldset und Legend ist schon der richtige Ansatz.
Wird natürlich irgendwann etwas unübersichtlich im Quellcode.