Alternativen zum Placeholder-Attribut in einem Input-Feld
bearbeitet von einsiedlerHallo 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.
[![register.php](/images/d7dfed04-3859-11eb-9a84-b42e9947ef30.jpg?size=medium "register.php")](/images/d7dfed04-3859-11eb-9a84-b42e9947ef30.jpg)
Das Beispiel steht nun über dem Input-Feld:
~~~ HTML
<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 sollte ich da das input-feld dann farbig
(auffällig) umranden?
Das kann man ja leicht mit dem CSS machen.
Gruß der einsiedelnde