Text nach Eingabe erscheinen lassen

[Mika]

Hallo ihr, ich würde gerne ein Kontaktformular erstellen, wobei aber die einzelnen Felder erst erscheinen, wenn man die Eingabe beim Feld davor getan hat. Könnte mir wer weiterhelfen?^^ Mfg

[Rolf B]

Hallo Mika,

kann man mit CSS lösen. Fiddle dazu

Meine Lösung erfolgt mit Validierung. Alle input-Felder sind required, und das Form ist wie eine russische Puppe aufgebaut. Alle Form-Elemente, die hinter einem Input stehen, das nicht validiert (also im Falle von required leer ist), werden ausgeblendet.

erstes Input
+----------------------
! zweites Input
! +----------------------
! ! drittes Input
! ! +----------------------
! ! ! Submit-Button
! ! +----------------------
! +----------------------
+----------------------

Diese Ausblende-Klammern sind divs mit einer identifizierenden Klasse, z.B. hide-when-invalid. Über CSS stellst Du ein:

.hide-when-invalid { display: none }

input:valid + .hide-when-invalid { display: block; }

D.h. eine Ausblendeklammer, die hinter einem validen Input steht, wird sichtbar gemacht.

Mein Fiddle enthält noch etwas mehr und die nötige Datenschutzerklärung für ein Fiddle mit Input-Form (Scherz? Hoffentlich!).

Passt das?

Wenn Du die Folgefelder erst erscheinen lassen willst, wenn man das gerade ausgefüllte Feld VERLÄSST, dann brauchst Du meiner Meinung nach JavaScript. Eine CSS Lösung würde ich bevorzugen.

#Aber: Wirklich bevorzugen würde ich ein Form, das mir von Anfang an alle Felder zeigt, damit ich vor dem Ausfüllen weiß, ob da was gefragt wird was ich nicht beantworten will und dann gar nicht erst anfange.

Rolf

[beatovich]

erstes Input
+----------------------
! zweites Input
! +----------------------
! ! drittes Input
! ! +----------------------
! ! ! Submit-Button
! ! +----------------------
! +----------------------
+----------------------

Diese Ausblende-Klammern sind divs mit einer identifizierenden Klasse, z.B. hide-when-invalid. Über CSS stellst Du ein:

.hide-when-invalid { display: none }

input:valid + .hide-when-invalid { display: block; }

Mein Fiddle enthält noch etwas mehr und die nötige Datenschutzerklärung für ein Fiddle mit Input-Form.

:invalid ~ :invalid{ display:none }

sollte doch den Job machen.

Die auferlegten Einschränkungen für's HTML sind allerdings zu bedenken.

#Aber: Wirklich bevorzugen würde ich ein Form, das mir von Anfang an alle Felder zeigt, damit ich vor dem Ausfüllen weiß, ob da was gefragt wird was ich nicht beantworten will und dann gar nicht erst anfange.

Eindeutig ja.

[Rolf B]

Hallo beatovich,

:invalid ~ :invalid{ display:none } habe ich entweder nicht kapiert oder es funkt nicht in meinem Fiddle. Hast Du es mal in einem halbwegs lebensnahem und bedienbaren Form ausprobiert?

Rolf

[Matthias Apsel]

Hallo Rolf B,

:invalid ~ :invalid{ display:none } habe ich entweder nicht kapiert oder es funkt nicht in meinem Fiddle. Hast Du es mal in einem halbwegs lebensnahem und bedienbaren Form ausprobiert?

Kann ja bei dir auch nicht funktionieren. Deine inputs sind keine Geschwister.

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

na DAS hab ich latürnich geändert. Ein bisschen Transferdenken hab ich in der Schule tatsächlich noch gelernt 😂

Problem bei mir ist: die Inputs verschwinden, aber die Labels und der Sendebutton bleiben stehen. Darum meine Bitte nach einem lebensnahen und bedienbaren Beispiel.

Rolf

[Matthias Apsel]

Hallo Rolf B,

Problem bei mir ist: die Inputs verschwinden, aber die Labels und der Sendebutton bleiben stehen. Darum meine Bitte nach einem lebensnahen und bedienbaren Beispiel.

:invalid ~ :invalid,
:invalid ~ :invalid + label,
:invalid ~ button {
  display: none;
}

entsprechendes HTML vorausgesetzt.

Bis demnächst
Matthias

[beatovich]

hallo

Problem bei mir ist: die Inputs verschwinden, aber die Labels und der Sendebutton bleiben stehen. Darum meine Bitte nach einem lebensnahen und bedienbaren Beispiel.

Also lebensnaher wäre, wenn ich nicht ein input verschwinden liesse, sondern es auf dissabled setzen könnte.

Aber du hast natürlich Recht, aus dem Ärmel geschütteltes kann bestenfalls funzen(tm).

[Mika]

An sich ist es das, was ich suche! Genau möchte ich jedoch, dass man zuerst ein Datum auswählt und dann der Rest auftaucht.

[Rolf B]

Hallo Mika,

Ok, die Bausteine dafür hast du. Frisch an's Werk! Wenn es Probleme gibt, zeig denen Stand (am besten live oder in einem Weblabor wie jsfiddle, codepen oder ähnlichem) und wir reden morgen drüber

Rolf

[Mika]

Habs geschafft, danke euch😀