Nachdem ich eYou.com betreten hatte, musste ich sofort die neue Version der E-Mail-Schnittstelle in XHTML+CSS konvertieren. Glücklicherweise sind meine Grundkenntnisse immer noch solide genug, also habe ich es geordnet gemacht. Natürlich werden Sie auf neue Probleme stoßen, wenn Sie beispielsweise normalerweise Webseiten erstellen und nur selten Formulare verwenden, da Sie keine Erfahrung mit Programmen haben. Glücklicherweise gibt es auf der Welt immer noch Google, mit dem ich neue Herausforderungen problemlos meistern kann. Schreiben Sie einige Erfahrungen auf und teilen Sie sie mit allen.
Aus Gründen der Barrierefreiheit sollte die Standardmethode zum Schreiben eines Formulars einen Feldsatz und eine Legende (Beschreibung) in <form> und </form> enthalten, damit Benutzer die Zusammenfassung des Formularfelds verstehen können. Der einfache Aufbau ist wie folgt:
| Nachfolgend der zitierte Inhalt: <Formular> <fieldset> <legende></legend> ... </fieldset> </form> |
In einigen Fällen möchten Sie möglicherweise nicht, dass sich Fieldset und Legende auf die Ästhetik Ihres Designs auswirken. Dies ist einfach zu handhaben. Setzen Sie einfach den Rahmen von Fieldset auf 0 und die Anzeige der Legende auf „None“.
In den meisten Fällen ist das Layout des Formulars in zwei Spalten unterteilt, mit der Beschriftung links und dem Eingabefeld (Eingabetyp="text"...) rechts. Bei einem so einfachen zweispaltigen Layout rate ich dringend von der Verwendung von Tabellen ab. Referenz http://stylephreak.frogrun.com/uploads/source/cssform.php und http://www.aplus.co.yu/css/forms/?css=1 (zwei definitiv wertvolle Referenzen, die Sie bereits kennen). (Sie müssen nicht weiter lesen) haben wir herausgefunden, dass die gängige Lösung für Webstandards darin besteht, ein Div um die Beschriftung und Eingabe type="text"... hinzuzufügen und die Anzeige des Div auf Block zu setzen. Setzen Sie die Beschriftung auf float: left; (dies ist auch der Grund, warum das div auf display: block; eingestellt ist) und dann kann die Beschriftung in derselben Zeile wie das Eingabefeld platziert werden. Ein kleiner Trick zum Ausrichten von Etiketten besteht darin, die Breite des Etiketts festzulegen und es dann mit text-align nach Bedarf links oder rechts auszurichten. Ein Tipp zum Festlegen der Breite besteht darin, die Breite mit der Einheit em basierend auf der maximalen Wortanzahl des Tags festzulegen, ohne px mühsam testen zu müssen.
Um meine Erklärung leichter verständlich zu machen, schreibe ich einfach etwas Code:
| Nachfolgend der zitierte Inhalt: XHTML: (teilweise) <Formular> body {/*Es hat nichts mit dem Formular zu tun, legt den Anzeigeeffekt der Seite fest*/ |