Hallo
Ist das, was ich gemacht habe, für neueres HTML idiomatisch richtig?
Richtig: Ja. Die aktuelle sinnvollste Lösung? Nein.
Und bitte - keine Diskussionen über Accessibility,
Das läßt sich grade bei Formularen nicht ausblenden. Wenn nicht für dich, so doch für andere User, die auf dieses Thema stoßen.
Formulare sind mit die wichtigste Kommunikationsmöglichkeit zwischen Webseienbetreiber und Besuchern.
Wenn Besucher mit einem Formualar nicht zurecht kommt sind sie ganz schnell wieder weg, und zwar in der Regel dauerhaft. Durch ihre dann negative Propaganda werden weitere Besucher abgeschreckt. Regel: Ein vergraulter Besucher zieht fünf weitere nach sich.
Die oder gleich viele andere (wieder) zu gewinnen kostet 15 mal so viel wie den ersten
gleich freundlich auf seiner Webseite zu empfangen.
Und Formulare enthalten viel Abschreckungspotential. Ich habe immer wieder mit Webseitenbetreibern zu tun, die sich (abhängig von der Geschäftsgröße) wöchentlich über 100 oder 1000 Anfragen über ihre Webseite freuen und dann erstaunt sind, dass sie im gleichen Zeitraum ähnlich viele Anfragen gar nicht erst erhalten haben, weil die Besucher über das Formular frustriert waren. Mehr als zwei Absendeversuche starten Besucher meist nur wenn der Webseitenbetreiber ein Alleinanbieter ist und seine Leistung sonst nicht zu bekommen ist. In der Regel ist die Konkurrenz aber nur einen Mausklick entfernt. Der Webseitenbetreiber bekommt davon gar nichts mit. Formular geht nicht und nach dem Frust macht sich niemand die Mühe, den Webseitenbetreiber auf anderem Weg über seinen Frust zu informieren. Dem Besucher wurde mit dem erfolglosen Ausfüllen des Formulars schließlich bereits genügend Zeit gestohlen.
Ein grundsätzliches Problem von Webseitenerstellern ist, dass die Browser Formulare von sich aus teilweise bereits stark unterschiedlich gestalten und unterstützen, Anpassungen aber gleichzeitig erschweren.
Nicht umsonst nimmt das Formular im reset.css ungefähr die Hälfe der Anweisungen ein.
Deshalb müssen grade eigene Formulare in möglichst vielen Browsern überprüft werden.
Die schlechte Nachricht:
Formulare erfordern deshalb schon von sich aus grundsätzlich viele CSS-Anweisungen.
Die gute Nachricht:
Du kannst dir einmal ein funktionierendes Layout erstellen sowie abspeichern und dann immer wieder sehr schnell darauf zurückgreifen. In der Regel passt du dann nur die Farben und vielleicht die Gesamtbreite etwas an und gut ist.
Deshalb lohnt es sich grade bei Formularen einmal etwas Zeit und Arbeit in eine funktionierende Lösung zu stecken, die dann in Minutenschnelle für jeden Webauftritt verwendet werden kann.
Weiterhin gibt es bestimmte Fehler, die Webseitenersteller ohne Rücksicht auf ihre Besucher immer wieder machen. Einige tauchen auch bei dir auf.
Zum Beispiel wird die Schriftgröße bei den meisten Formularen als viel zu klein empfunden. Dabei ist in der Regel genügend Platz für eine größere Schriftgröße vorhanden.
Buttons sollten, nicht nur für Touchscreens, so groß sein, dass sie problemlos angesteuert werden können. Grade auf hochauflösenden Tablets werden Buttons häufig wie auf Desktop-Bildschirmen angezeigt und sind nur schwer zu treffen.
Auf englische Texte (bei dir die Bezeichnung der Buttons) sollte auf deutschen Seiten verzichtet werden. Eine Webseite sollte immer komplett die Hauptsprache verwenden. Das vermeidet Mißverständnisse und wenn der Besucher nicht weiß, welchen Button er für eine bestimmte Aktion drücken muss ist er, wie bereits ob geschrieben, ganz schnell weg - und zwar dauerhaft.
Als Sprachkundiger schaltet man zudem innerlich immer komplett auf die Hauptsprache um. Vermischungen (zum Beispiel Punkt statt Komma, Einheit vor statt hinter der Zahl, Datumschreibweise) führen da regelmäßig zu Problemen und kosten den Besucher unnötig Zeit.
Fast alles, womit du dir vermeintlich die Arbeit erleichterst, ist für Besucher ein möglicher Stolperstein. Stichworte: placeholder, value, pattern und andere Überprüfungen. Manchmal auch autofocus, wenn sich oberhalb des ersten Eingabefelds Text befindet, der dann übersprungen / überscrollt wird.
Sowas
required pattern="00\d{5,}
ist zum Beispiel die reinste Abschreckung. Ohne Hinweise können die Besucher nur raten welche Schreibweise und welche Daten erforderlich sind. Und das mögen sie gar nicht. Bei Zwangsfeldern verstoßen Webseitenbetreiber zudem häufig gegen den Datenschutz. Daten dürfen nur erhoben werden, wenn sie auch erforderlich sind, nicht damit du einer Sammelleidenschaft frönen kannst. Telefonnummern sind in der Regel nicht erforderlich. Viele sensibilisierte Besucher meiden Seiten schon wenn dort eigentlich geschützte Daten erhoben werden.
Auf die internationale Vorwahl solltest du für deutsche Telefonnummern auch verzichten und für ausländische einfach erlauben und gut ist.
Wenn du zum Ausfüllen für Formularfelder bestimmte Wünsche hast bittest du einfach höflich darum. Und zwar so, dass der Besucher die Information auch beim Kontrolllesen problemlos aufnehmen kann.
Andere besucherfreundliche Lösungen wie linksbündigkeit wurden bereits angesprochen. Wenn mein Formular zum Beispiel starkt vergrößert wird rutschen Labels und Input wie bei schmalen Bildschirmen linksbündig untereinander.
Jetzt aber auch ein Beispiel wie der für ein Baukastensystem durchdachte HTML-Quelltext eines Formulars aussehen kann:
<form id="formular" class="formular" action="#" method="post">
<fieldset>
<legend>Legend</legend>
<div class="formlayout">
<div>
<label for="telefonnummer">Telefonnummer</label>
<input id="telefonnummer" name="telefonnummer" type="tel" autofocus>
</div>
<div>
<label for="buchungszeitpunkt">Buchungszeitpunkt</label>
<input id="buchungszeitpunkt" name="buchungszeitpunkt" type="datetime">
</div>
<div>
<label for="neuezustellung">Neue Zustellung</label>
<input id="neuezustellung" name="neuezustellung" type="datetime">
</div>
<div class="buttons">
<button type="submit">Received</button>
<button type="reset">Accepted</button>
<button type="submit">Completed</button>
<button type="reset">Reset</button>
</div>
</div>
</fieldset>
</form>
Heißt, es gibt ein Grundgerüst
<form id="formular" class="formular" action="#" method="post">
<fieldset>
<legend>Legend</legend>
<div class="formlayout">
FORMULARFELDER
</div>
</fieldset>
</form>
das nur noch durch abgespeicherte Formularfelder aufgefüllt werden muss
<div>
<label for="telefonnummer">Telefonnummer</label>
<input id="telefonnummer" name="telefonnummer" type="tel" autofocus>
</div>
<div>
<label for="buchungszeitpunkt">Buchungszeitpunkt</label>
<input id="buchungszeitpunkt" name="buchungszeitpunkt" type="datetime">
</div>
<div>
<label for="neuezustellung">Neue Zustellung</label>
<input id="neuezustellung" name="neuezustellung" type="datetime">
</div>
<div class="buttons">
<button type="submit">Received</button>
<button type="reset">Accepted</button>
<button type="submit">Completed</button>
<button type="reset">Reset</button>
</div>
Ich finde das zum Pflegen und Anpassen sehr übersichtlich. Die Felder sind schnell im Quelltext zu finden, es ist deutlich was zu einem Feld gehört und notwendige Anpassungen (id, Labelbezeichnung, for, name) schnell und einfach durchführbar.
Das notwenige CSS wird dann nur noch einmal erstellt und kann direkt einfach eingebunden / einkopiert werden - fertig.
Wobei ich Mobile First bevorzuge. Das Grundlayout für schmale Bildschirme verwendet nur altbewährte CSS-Anweisungen wie width oder display:block, so dass selbst für ältere Smartphones / Tablets kein Fallback erforderlich ist.
Ich habe mal eine temporäre Testseite mit deinen Buttons und Feldern auf meinem Spiel-Webspace erstellt:
Formular
Gruss
MrMurphy
Rolf b
marctrix
Der Martin
dedlfix
Gunnar Bittersmann
Matthias Apsel
Auge
