Alternativen zum Placeholder-Attribut in einem Input-Feld

[einsiedler]

Hallo liebe Forumer, ich habe folgende Sache, mir ist aufgefallen das wohl meine Besucher Schwierigkeiten haben beim registrieren die nötigen Input-Felder richtig auszufüllen. Eine Besucherin hat nun den Rekord von 5 Versuchen aufgestellt das Formular abzusenden, wenn ein Feld nicht richtig ausgefüllt ist erscheint immer eine Meldung das das Feld nicht richtig ausgefüllt ist, sie hat es wohl immer wieder abgeschickt bis zum 5ten Versuch wo sie dann alles korrekt ausgefüllt hatte. Schwierig kann eigentlich nur das Feld für die Telefonnummer gewesen sein. Alles andere ist eigentlich wohl selbstverständlich.

Nun möchte ich eine Art Vorlage anbieten wie sie richtig einzugeben ist und ich bin auf das Placeholder_Attribut gestoßen das ziemlich oft auf webseiten vorkommt. Ich habe es mir auf anderen Seiten angeschaut, bei GMX bis bplaced bis... Nur ist das Attribut ja ziemlich "umstritten" wegen den screenreadern

Deswegen habe ich mich dagegen entschieden und nach einer alternative gesucht und auch etwas gefunden.

Das Beispiel steht nun über dem Input-Feld (siehe mein screen oben):

<div class="form-field">
                    <label for="phone">Telefon</label>
					<span>
						<p id="phone_hint" class="input_hint">Zum Beispiel: 02111234567</p>
						<input type="tel" id="phone" aria-describedby="phone_hint" name="phone" value="">
					</span>
</div>

Ist das so richtig, indem ich aria-describedby verwende?

Da das Input-Feld rechts neben "Telefon" ist und das "Beispiel" direkt über dem Eingabe-Feld stehen soll so habe ich die beiden Tags mit span zusammengefasst.

Ist das nötig oder könnte ich im css [ .form-field p + input { } ] einsetzen? Oder (jetzt im CSS: .form-field:nth-child(2) + .form-field:nth-child(3) { }

Wie macht man es?

Wie muss ich nun p und wie input "formatieren, ist da nun display: inline-block; nötig? Wenn das Eingabe-Feld unterhalb der Beispiel-Beschreibung stehen soll. (Siehe oben, mein screen)

Wenn das Eingabe-Feld aktiv ist, also man etwas darin eingibt, sollte ich da das input-feld dann farbig (auffällig) umranden? Das kann man ja leicht mit dem CSS machen.

Gruß der einsiedelnde