HTML-Formular: Text bei Klick auf Textfeld

[Dennis S. (eltio)]

Hallo zusammen,

ich würde gerne für ein Konfigurationsformular eine kleine Hilfe 
realisieren.
Beim Klick auf verschiedene Input-Boxen soll jeweils an der gleichen 
Stelle
ein Text erscheinen.

Auf JavaScript würde ich gerne verzichten. Auch Tooltips halte ich nur 
für
bedingt geeignet mit Blick auf Touchscreens. Wünschenswert wäre also 
eine
reine HTML(5) + CSS-Lösung.

Beispiel, beim Klick auf ein Textfeld erscheint der jeweilige 
<Hilfetext>:

<Hilfetext>
Name    : [_____________]
Vorname : [_____________]
Alter   : [_____________]

Gruß
Dennis

[Daniel F. (df311)]

<input ...><span class="help">bla</span>

.help {
  display: none;
}

input:focus + .help {
  display: block;
}

ungetestet, nur eine idee

[Dennis S. (eltio)]

Daniel F. schrieb:
> ungetestet, nur eine idee
Schon ein guter (funktionierender) Ansatz, vielen Dank! Fehlt nur die 
Funktion, den Text immer an der gleichen Stelle zu platzieren. Da werde 
ich mal rumgooglen.

Gruß
Dennis

[Daniel F. (df311)]

Dennis S. schrieb:
> den Text immer an der gleichen Stelle zu platzieren.

dreckige lösung: mit css (position: absolute) verschieben ;-)

[Dennis S. (eltio)]

Daniel F. schrieb:
> dreckige lösung: mit css (position: absolute) verschieben ;-)
Jaaa... ich hatte gehofft mir die Hände nicht SO dreckig machen zu 
müssen! ;-)

[martin (Gast)]

Wie wäre es mit Placeholdern in den Eingabefeldern?

Beispiel: https://jsfiddle.net/6r6drn26/

[Dennis S. (eltio)]

martin schrieb:
> Wie wäre es mit Placeholdern in den Eingabefeldern?
>
> Beispiel: https://jsfiddle.net/6r6drn26/

Da habe ich drüber nachgedacht. Leider beißt sich das dann (afaik) mit 
eventuell bereits vorhandenen Standard-Werten die bereits eingegeben 
sind.

[martin (Gast)]

Habe etwas weitergebastelt:
https://jsfiddle.net/5m35pba2/3/

[Dennis S. (eltio)]

martin schrieb:
> Habe etwas weitergebastelt:
> https://jsfiddle.net/5m35pba2/3/

Richtig gut, vielen Dank! :-)

Ich nehme mal an das Ganze beim Reinklicken zu realisieren ist nicht so 
einfach? Man müsste dann ja auch definieren, wann der Text wieder 
verschwinden soll...

[Alexander J. (Gast)]

Dennis S. schrieb:
> Daniel F. schrieb:
>> dreckige lösung: mit css (position: absolute) verschieben ;-)
> Jaaa... ich hatte gehofft mir die Hände nicht SO dreckig machen zu
> müssen! ;-)

Nö, mit CCS geht sowas ganz elegant. Javascript passt dort ind Q&D.

[Dennis S. (eltio)]

Alexander J. schrieb:
> Dennis S. schrieb:
>> Daniel F. schrieb:
>>> dreckige lösung: mit css (position: absolute) verschieben ;-)
>> Jaaa... ich hatte gehofft mir die Hände nicht SO dreckig machen zu
>> müssen! ;-)
>
> Nö, mit CCS geht sowas ganz elegant. Javascript passt dort ind Q&D.

CCS? Oder CSS?
Der zweite Satz ist mir völlig schleierhaft ehrlich gesagt...

[Dirk D. (dicky_d)]

Dennis S. schrieb:
> martin schrieb:
>> Habe etwas weitergebastelt:
>> https://jsfiddle.net/5m35pba2/3/
>
> Richtig gut, vielen Dank! :-)
>
> Ich nehme mal an das Ganze beim Reinklicken zu realisieren ist nicht so
> einfach?

ersetze :hover durch :focus, dann klappt das auch wenn man die Maus 
nicht nutzt :)

[martin (Gast)]

Dennis S. schrieb:
> Ich nehme mal an das Ganze beim Reinklicken zu realisieren ist nicht so
> einfach?

Geht. https://jsfiddle.net/5m35pba2/4/
Verschwindet beim rausklicken.

[Dennis S. (eltio)]

Ich bin begeistert! Vielen Dank an alle.

Gruß