Mein Vorschlag / Ergebnis
bearbeitet von Gunnar Bittersmann@@MrMurphy1
> Pflichtfelder sollten nach Möglichkeit vermieden werden.
Die Vermeidung von Pflichtfeldern sollte aber auch vermieden werden.
E-Mail und Nachricht wären in diesem Fall Pflichtfelder.
> Weiterhin zählen die Elemente von Formularen zu denen, die die Browser selbst nach eignen Vorgaben anzeigen. Deshalb sollte grade bei Formularen eine Normaliersung durchgeführt werden.
Wenn du Eingabefelder und Button ihrer vom Browser vorgesehenen Kennzeichnung des `:focus`-Status beraubst, sorge dafür, dass dieser anderweitig deutlich erkennbar ist. Beim Button finde ich den Farbunterschied etwas gering.
> Hier der Link zu meinem Beispiel, dass ich zeitweise auf meinem Testaccount bereitstelle:
Was zukünftigen Lesern dieses Threads im Archiv ungemein weiterhilft …
Warum lässt du das Beispiel nicht permanent? Oder warum nutzt du nicht Plattformen wie Codepen? Zumal der Leser dann Quelltext und Resultat auf einen Blick sieht.
> [Benutzerfreundliches Formular](http://boratb.bplaced.net/index4.html)
`<section> <h2>…</h2> <p>…</p> </section> <form …>`{: .language-html}: Das Formular gehört mit zu dem Abschnitt, also mit ins `section`-Element.
Ein einziges `section`-Element `<body> <section> … </section> </body>`{: .language-html} macht aber keinen Sinn – kann weg. Dafür wäre evtl. das `main`-Element angebracht.
`<form …> <fieldset> … </fieldset> </form>`{: .language-html}: Ein `fieldset`-Element übers ganze Formular zu legen macht keinen Sinn – kann weg.
`<button type="button" id="abschicken">Anfrage abschicken</button>`{: .language-html}: Der Button schickt nichts ab. Das sollte wohl `type="submit"` heißen (oder – da Default – ganz wegfallen).
Was sollen eigentlich die ganzen `@media all`-Blöcke im Stylesheet?
Und was soll `-moz-box-sizing: content-box` und `-webkit-box-sizing: content-box`?
Dass Selektoren wie `.formlayout>:nth-child(4)` gefährlich sind, hatten wir schon desöfteren besprochen.
Dass einige Größenangaben besser in `em` statt `rem` anzugeben sind, das auch.
Und dass _media queries_{: lang="en"} besser in `em` statt in `px` anzugeben sind, das auch.
LLAP 🖖
--
_“You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.”_{: lang="en"} —Stefan Tilkov
_[Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): `sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|`_{: style="display: block; font-size: 0.875em; font-style: inherit; margin-top:1.5em"}