nicht angemeldet einsiedler
Gunnar Bittersmann
Gunnar Bittersmann
Rolf B
MudGuard
Auge
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):
Matthias Apsel<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
@@einsiedler
Schwierig kann eigentlich nur das Feld für die Telefonnummer gewesen sein. Alles andere ist eigentlich wohl selbstverständlich.
Nö, Telefonnummer sollte wohl selbstverständlich sein, nicht schwierig.
Möglicherweise ist deine Auswertung zu stringent und lässt keine Leerzeichen, Klammern (Vorwahl) und Trennzeichen wie / und - zu.
Ändere dies, anstatt den Menschen deine stringenten Vorstellungen aufzubürden, wie eine Telefonnummer formatiert zu sein hätte.
😷 LLAP
@@einsiedler
Ist das so richtig, indem ich aria-describedby verwende?
Abgesehen davon, dass ein solcher Hinweis bei der Telefonnummer nicht notwendig sein sollte: Verwende nicht ARIA, wenn du nicht musst.
In Adam Silvers Buch Form Design Patterns (was jeder im Regal stehen haben sollte), Seite 38:
<label for="…">
<span class="field-label">…</span>
<span class="field-hint">…</span>
</label>
<input id="…" name="…"/>
😷 LLAP
Hallo einsiedler,
guck Dir die Element-Referenz im Selfwiki an. Die Daumenregel ist, dass ein Inline-Element - wie <span> - auch nur inline-Elemente enthalten sollte. <p> ist aber ein Block-Element.
Die genaue Regel findest Du pro Element in der Element-Referenz. Jedes Element hat einen Typ, für welchen Inhalt es steht, und es hat eine Liste erlaubter Inhaltstypen, die es enthalten darf. Im Selfwiki steht beispielsweise bei <span>:
Elternelemente: alle Elemente die fließenden Inhalt erlauben, alle Stil-Elemente. "Stil-Elemente" ist die beste Übersetzung, die wir nach langer Diskussion für das englische "phrasing content" erarbeitet haben.
Erlaubte Inhalte: Text, beliebig viele Stil-Elemente.
Was etwas redundant ist, weil einfacher Text ebenfalls als phrasing content gilt.
Und bei <p> steht:
Elternelemente: in Elementen, die fließenden Inhalt erlauben (flow content).
Erlaubte Inhalte: Text und Stil-Elemente.
Nun gibt es dieses Bild, das angibt, welche Inhaltstypen es gibt und welche eine Teilmenge von anderen sind. Leider sind die Texte nicht 1:1, im Bild steht "Fluß-Elemente" statt "fließender Inhalt", und "Aussagen" statt "Stil-Elemente". @Matthias Scharwies, hatten wir das nicht mal berichtigt?
Das Bild zeigt jedenfalls, dass phrasing content eine Teilmenge von flow content ist. Ein Element wie <div> oder <form>, das flow content enthalten darf, kann demnach <p> und <span> enthalten. Ein <p>, das flow content ist, darf aber nicht in einem <span> stehen, das phrasing content erwartet. Eigentlich müsste der Browser beim Antreffen eins <p> innerhalb eines <span> das <span> Element beenden - tut er aber nicht. Hat vielleicht historische Kompatibilitätsgründe, aber wenn man ein <p> in einen <span> legt und dem <span> eine Hintergrundfarbe gibt, übernimmt das <p> sie nicht. Was ein Zeichen dafür ist, dass was nicht stimmt. Ein <p> in einem <div> übernimmt dessen Hintergrundfarbe.
Also, Sinn der langen Rede: ein <p> gehört nicht in ein <span>. Entweder müsste dein Tipp selbst ein <span> sein, oder statt mit <span> müsstest Du Tipp und Input mit <div> gruppieren.
Was mir jetzt noch nicht klar ist: Wann soll der Tipp erscheinen und wie soll er platziert sein? Sichtbar nur dann, wenn ich im Feld drin stehe? Und soll er tatsächlich das Eingabefeld der vorigen Zeile überlagern?
Wenn Du es auf leichte Bedienbarkeit anlegst, würde ich beides nicht tun. Eine Erläuterung zur Eingabe sollte - finde ich - ständig sichtbar sein und unter dem Eingabefeld stehen.
Die Verwendung von describedby erscheint mir richtig, es verweist vom input auf den Erklärtext.
Ein Placeholder ist aber auch nur dann schlecht, wenn er Label oder eine eventuell nötige Erklärung ersetzen will. Das darf er nicht. Er darf auch nicht die einzige Erklärung sein, weil placeholder nicht zugänglich ist und er beim Tippen des ersten Zeichens verschwindet. Ein Screenreader würde ihn ignorieren. Aber als Zusatz ist er erlaubt. Du kannst also durchaus per Placeholder Beispielinhalte einsetzen. Es sei denn, deine Anwender verstehen nicht, dass das ein Beispiel ist und versuchen, das "vorgefüllte Eingabefeld" zu leeren.
Rolf
Hallo Rolf, neee das Beispielfeld (mit der Telefonnummer) steht natürlich eine Zeile oberhalb vom "<input type=""... Eingabe-Feld und ist NICHT im Eingabe-Feld selber direkt drinnen. Siehe mein screenshot. Danke für Deine ausführliche Antwort.
Grüße Tassilo
Hallo
Hallo Rolf, neee das Beispielfeld (mit der Telefonnummer) steht natürlich eine Zeile oberhalb vom "<input type=""... Eingabe-Feld und ist NICHT im Eingabe-Feld selber direkt drinnen. Siehe mein screenshot.
Das war aber nicht Rolfs Kritikpunkt.
Du hast das p mit der Erklärung für das Rufnummerformat in ein span gepackt und das ist falsch. Ob das schlussendlich oberhalb des Eingabefelds angezeigt wird oder rechts, links oder unterhalb davon oder gar auf dessen Rückseite, ist dabei unerheblich.
Dein HTML ist also kaputt und sollte vor allem anderen repariert werden. Davon abgesehen ist es zumindest für mich verwirrend, dass die Erklärung auf der selben Höhe wie die Beschriftung „E-Mail“ steht.
Tschö, Auge
Danke Dir, das habe ich verstanden. Kein p innerhalb von span. Um meinen Gedanken zu illustrieren habe ich schnell mit Paint in dem jpg "herumgewerkelt", natürlich folgt alles Zeile auf Zeile hintereinander weg.
Gruß T.
Hallo Rolf,
okay, das habe ich nun verstanden. Wenn ich nun "placeholder" benutze, dann doch am besten so:
(links meine Beschreibung: Vorname) mein placeholder ist dann: "Z.B. Max"
(links meine Beschreibung: Nachname) mein placeholder ist dann: "Z.B. Mustermann"
(links meine Beschreibung: Ort) mein placeholder ist dann: "Z.B. 48192 Musterstadt"
(links meine Beschreibung: Telefon) mein placeholder ist dann: "Z.B. 0230712345"
und doch NICHT das bei Vorname dann als placeholder "Name" steht und als Nachname dann als placeholder "Nachname" u.s.w.
Und sobald man das Feld antippt, der placeholder verschwindet, gestalte ich mit CSS zum Beispiel um dem Feld eine Rote Umrandung als sichtbares Zeichen das das Feld gerade "aktiv" ist.
Gruß der einsiedelnde
Hallo einsiedler,
ich würde einen Platzhalter nur dann verwenden, wenn die Beschriftung über das label-Element nicht eindeutig ist oder Schwierigkeiten erahnen lässt, weil die Bezeichnung vom Üblichen abweicht (vgl. https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Beschriftungen#Platzhalter).
Bis demnächst
Matthias
@@Matthias Apsel
ich würde einen Platzhalter nur dann verwenden, wenn die Beschriftung über das label-Element nicht eindeutig ist
Dann sollte die Beschriftung so gewählt werden, dass sie eindeitig ist.
oder Schwierigkeiten erahnen lässt
Dann sollte ein zusätzlicher Hinweis mit im label-Element stehen.
Ich würde einen Platzhalter nur dann verwenden, wenn beides Genanntes nicht möglich ist, also nie.
😷 LLAP
@@einsiedler
okay, das habe ich nun verstanden. Wenn ich nun "placeholder" benutze, dann doch am besten so
„Wenn ich placeholder benutze“ ist das Gegenteil von „ich habe verstanden“.
Und sobald man das Feld antippt, der placeholder verschwindet, gestalte ich mit CSS zum Beispiel um dem Feld eine Rote Umrandung als sichtbares Zeichen das das Feld gerade "aktiv" ist.
Keine so gute Idee. Rot symbolisiert „Fehler“.
😷 LLAP
Hi,
Schwierig kann eigentlich nur das Feld für die Telefonnummer gewesen sein.
Sag sowas nicht. Ich habe es täglich mit Kunden-Daten zu tun, die nicht richtig eingegeben werden, obwohl die Felder eigentlich eindeutig benannt sind (nicht wie bei Dir: "Adresse" + "Ort": warum muß ich, wenn ich schon meine Adresse angegeben habe, den Ort nochmal angeben? Der Ort gehört doch schon mit ins Adreßfeld rein.
Wir haben getrennte Felder für Anrede, Titel, Vorname, Familienname, Straße, Hausnummer, Postleitzahl, Ort.
Anrede, Titel sind Dropdowns, da gibt's keine Möglichkeit für unsinnige Angaben. Nach Eingabe der PLZ wird entweder der einzige Ort dort nicht-editierbar vorgegeben oder ein Dropdown mit den möglichen Orten vorgegeben.
Häufige Fehleingaben (ohne Anspruch auf Vollständigkeit):
Dazu noch Tippfehler wie "Göthestr." oder "Shcmidt" usw.
So viel zu
Alles andere ist eigentlich wohl selbstverständlich.
cu,
Andreas a/k/a MudGuard
Hallo
Schwierig kann eigentlich nur das Feld für die Telefonnummer gewesen sein.
Sag sowas nicht.
Und als ob soetwas noch nicht genug wäre …
Oft gesehen: Copy'n'Paste-Fehler
Das mag im Einzelfall im Webumfeld keine Rolle spielen, weil diese Zeichen in der HTML-Eingabefeldern und in der Ausgabe als Leerzeichen dargestellt werden, aber es gibt ja noch andere Systeme zur Ein- und Ausgabe von Formularen und da kann sowas die Systemverwalter in den Wahnsinn treiben.
Also, ganz wichtig, man sollte das vor dem abspeichern der Daten im eigenen System bereinigen.
Tschö, Auge