Online-Formulare sind einer der schwierigsten Bereiche der Website-Entwicklung, um richtig zu werden, insbesondere bei so vielen Dingen, die schief gehen können. Die veränderte Art und Weise, wie Menschen auf Online-Inhalte zugreifen, hat sich auch auf eine Technologie ausgewirkt, die Jahre entwickelt wurde, bevor die Menschen mit einem Telefon erwarten konnten, was sie normalerweise nur mit einem Computer tun würden. Es ist eine Technologie, die sehr wenig weiterentwickelt wurde.
Die Gestaltung von Webformularen sollte ein eigenständiger Beruf sein. Website-Designer sollten die Dienste von professionellen Web-Formular-Vollzeit-Designern in Anspruch nehmen, um sie bei ihrer Aufgabe zu unterstützen. Dies wird jedoch nicht als wirtschaftlich genug angesehen. Daher ist der Site-Designer meist auch für die Gestaltung der auf der Site verwendeten Formulare verantwortlich.
Das Entwerfen von Formularen ist jedoch eine hochspezialisierte Fähigkeit. Es erfordert ein Verständnis dafür, wie Menschen mit in interagierenformation und das Verständnis der besten Möglichkeiten zum Sammeln und PräsentierenformatIon. Wo sich das allgemeine Webdesign hauptsächlich auf die Präsentation in konzentriertformation und Bilder auf ansprechende, aber praktische Weise zu gestalten, verlangt die Formgestaltung, dass wir unsere Aufmerksamkeit auf die Natur des Inhalts richtenformation und entscheiden Sie dann, wie Sie es am besten auf der Seite strukturieren, damit es wie beabsichtigt funktioniert. Ästhetik ist in diesem Fall eine weniger wichtige Überlegung, sollte aber dennoch nicht berücksichtigt werdengotten.
In diesem Artikel werfen wir einen Blick auf die Kunst des Webformularentwurfs und prüfen, ob wir einen Weg finden können, unsere Webformulare sowohl hinsichtlich ihres Aussehens als auch ihrer Funktionsweise intelligenter zu machen.
Die Werkzeuge für das Erstellen von Webformularen
Die Standard-Tools, die wir von Browser-Entwicklern und W3C zur Zusammenstellung unserer Webformulare erhalten haben, sind nicht gerade ideal, und vor der Anwendung von CSS sind sie ziemlich abscheulich. So sehen sie aus:
Es gibt auch eine andere Standardeingabesteuerung wählenDies sollte jedoch vermieden werden, es sei denn, Platz zu sparen ist ein ernstes Problem. Es gibt bessere Möglichkeiten, mit der durch das Auswahlsteuerelement ausgeführten Aufgabe umzugehen, wie wir später besprechen werden. Textarea-Steuerungen sollten nach Möglichkeit ebenfalls vermieden werden, da sie so problematisch und antiquarisch sind.
Neben diesen Standardeingabeelementen gibt es auch spezielle neue Einträge für HTML5. Außer wenn ein Dokument streng für den internen Gebrauch vorbereitet wird und die Browserumgebung bekannt ist, sollten nur Komponenten verwendet werden, die sowohl in Firefox als auch in Chrome funktionieren. Es ist gut, wenn eine Komponente auch in anderen Browsern funktioniert, sollte es aber nicht einzige in anderen Browsern arbeiten. Hier sind die HTML5-Komponenten, wie sie in Firefox erscheinen:
Und ihr etwas anderes Aussehen in Chrome:
Natürlich ist es wirklich wichtig zu wissen, dass Ihre HTML5-Eingaben zwischen Chrome und Firefox unterschiedlich aussehen und funktionieren, aber sie funktionieren trotzdem. Die standardmäßigen Eingabesteuerelemente sehen in Chrome auch etwas schöner aus als in Firefox. Beachten Sie, dass Chrome den nordamerikanischen Datumsstandard vorschreibt, den die Benutzer möglicherweise nicht zu schätzen wissen. Auch die Chrome-Version des Datumssteuerelements macht es für die Anzeige ungeeignet und sollte nur für die Eingabe verwendet werden. Die Hinzufügung eines Datumsauswahlgeräts ist die Hauptverbesserung in Chrome, aber wir können davon ausgehen, dass dies in zukünftigen Firefox-Versionen erwartet wird.
Da Firefox Open Source ist, können Sie Ihre persönliche Version von Firefox so erstellen, dass die Eingaben auf dieselbe Weise wie in Chrome dargestellt werden, indem Sie den Quellcode des Open Source Chromium-Browsers, auf dem Chrome basiert, herunterladen und den entsprechenden Codeabschnitt in die Firefox-Quelle portieren Code (aber dann müssen Sie dies jedes Mal tun, wenn Sie Firefox auf eine neue Version aktualisieren).
Der Hauptpunkt ist jedoch, dass selbst mit den Verbesserungen von Chrome die Standardeinstellung der Eingabesteuerelemente klein und unattraktiv ist. Es gibt einige andere Steuerelemente. Da sie jedoch nicht in Chrome und Firefox funktionieren, sollten sie nicht auf Websites verwendet werden, die für die Öffentlichkeit bestimmt sind.
Bootstraps (fast ausreichende) Antwort
Bootstrap wendet die Standardsteuerelemente so an, dass deren Aussehen einigermaßen verbessert wird. Aufgrund der mobil-zentrierten Designphilosophie von Bootstrap verursacht dies jedoch unerwünschte Auswirkungen auf Formulare, die nicht als einzelne Spalte angezeigt werden sollen. Kurze Eingabefelder wirken komisch, wenn sie standardmäßig eine ganze Spalte umfassen. Die Welt mag mobil geworden sein, aber die Formulare wurden nicht für mobile Benutzer entwickelt.
Bootstrap erweitert Steuerelemente, um die horizontale Breite des Containers auszufüllen. Dies bedeutet, dass alle Steuerelemente die gleiche Breite haben, unabhängig davon, ob Sie dies tun oder nicht (sofern Sie dieses Verhalten nicht manuell außer Kraft setzen). Außerdem können Sie einige Steuerelementtypen mit zusätzlichem Effekt versehen. Die Lösung von Bootstrap ist elegant und überwindet einige Probleme der Steuerelemente, die in verschiedenen Browsern unterschiedlich aussehen, funktioniert jedoch nur mit den Standardsteuerelementen. Die HTML5-Steuerelemente werden in den aktuellen Versionen von Bootstrap nicht implementiert. Sie müssen diese also selbst gestalten.
Mit Bootstrap können Sie auch Steuerelemente miteinander kombinieren. Manchmal ist das gut und manchmal nicht so gut. Das Kombinieren einer Texteingabe mit einer Schaltfläche und einem Kontrollkästchen sieht zwar gut aus, kann jedoch den Benutzer verwirren, wie er mit einem so unbekannten Steuerelement interagieren soll.
Was Bootstrap bietet, ist zwei meiner Lieblingsgeräte zum Erstellen von Formularen, das Tafel und dem Gut. Dies ist sehr nützlich, um Formulardaten zu gruppieren, um visuell anzuzeigen, welche Daten zu welchen anderen Daten gehören, und auch zum Trennen von Daten.
Smart Form Building 101
Jetzt sind wir bereit, darüber nachzudenken, wie Formulare intelligenter konstruiert werden können. Dazu müssen wir weit über die Vorgaben hinaus denken. Wir müssen uns dessen bewusst sein desktop-gebundene Wurzeln von Formularsteuerelementen sowie die Notwendigkeit mobiler Kompatibilität. Und wir müssen uns um Dinge wie Benutzerfreundlichkeit und Validierung kümmern (wenn das Formular zur Datenerfassung verwendet wird).
Dieser letzte Punkt ist gut, denn während Formularsteuerelemente zum Sammeln von Eingaben verwendet werden, werden sie auch zum Anzeigen gespeicherter Daten verwendet. Der durchschnittliche Webnutzer ist (und sollte) mehr daran interessiert, sich einzuloggenformation von dir, als nachzugebenformatIon zu Ihnen.
Die Datenerfassung ist einfach. Die Leute werden alles ausfüllen, was Sie vor sich haben, auch wenn es ein Chaos ist. Aber wenn es um die Datenanzeige geht, sind sie pingeliger. Infolgedessen konzentrieren wir uns hier mehr auf die Verwendung von Formularen zur Anzeige von Daten als auf deren Erfassung, da die Anzeige mehr Sorgfalt und mehr „Intelligenz“ erfordert.
1. Brauchen wir ein Formular?
Bevor wir ein Formular erstellen, sollten wir prüfen, ob wir eines benötigen. Wenn die Daten angemessen und unauffällig als Tabelle dargestellt werden können, ist eine Tabelle normalerweise effizienter und praktischer.
Ein Formular ist erforderlich, wenn:
- Wir holen Input vom Benutzer ein
- Wir haben viele Daten zur Anzeige
- Die Daten müssen klar segmentiert sein
- Der Benutzer greift wahrscheinlich von einem mobilen Gerät auf die Daten zu
Wenn eines der oben genannten Elemente nicht wahr ist, muss kein Formular verwendet werden, und eine Tabelle reicht aus. Die Herausforderung der mobilen Kompatibilität besteht darin, dass weder Tabellen noch Formulare wirklich für ein mobiles Display geeignet sind. Die Tatsache, dass Smartphone-Designer ihren Benutzern die Möglichkeit gegeben haben, einen Browser im Hochformat zu verwenden, und dass die meisten Benutzer es vorziehen, ihre Handys auf diese Weise zu halten, führt zu den meisten Mobilitätskompatibilitätsproblemen, mit denen Site-Designer konfrontiert sind.
Unabhängig davon sind Formulare an eine mobile Anzeige anpassbarer als Tabellen. Wenn Sie also wirklich sicherstellen müssen, dass alle Daten einfach auf einem mobilen Display angezeigt werden können, sind Formulare die bessere Wahl als Tabellen… manchmal!
2. Gestalten Sie die desktop Layout
Es ist wahr, dass Sie im Allgemeinen ein mobiles Layout entwerfen sollten, aber wenn es um Formulare geht, ist dies nicht der beste Weg, da wir wissen müssen, wie Daten gruppiert werden, und das können wir nur, wenn wir kann alle Felder gleichzeitig sehen, was auf einem Handy nicht möglich ist, wenn Sie nicht so wenige Daten anzeigen, dass wir uns nicht mit dem Entwurf des Formulars beschäftigen müssen.
Der schnellste Weg, ein Formulardesign zu simulieren, ist mit InkScape. In diesem Beispiel erstellen wir ein System zur Verwaltung von Personalakten. Hier ist das Modell für die desktop Prototyp:
Das äußere Rechteck repräsentiert den gesamten Bereich einer Anzeige mit 1024 x 768 Pixel. Auf jedem desktop Browser haben wir keinen Zugriff auf so viele Pixel, es sei denn, der Benutzer befindet sich im Vollbildmodus (was selten der Fall ist). So unser
Design ist 900 x 600 Pixel groß, was in den verfügbaren Bereich der meisten passen sollte desktop Bildschirme
Wenn der verfügbare Bereich weniger als 900px breit ist, werden unsere 2 x 450px-Spalten unterbrochen und erscheinen als eine zusammenhängende 450px-Spalte. Dies löst das Problem der Kompatibilität mit Mobiltelefonen, zumindest so lange, bis es von Google verlangt wird, dass alle unsere Websites in der Lage sind, auf eine Armbanduhr zu passen.
Sie werden feststellen, dass der Großteil der Anzeige nur aus gewöhnlichen Eingabefeldern besteht, die langweilig wirken können, aber in Wirklichkeit ist dies fast immer der beste Weg. Beachten Sie auch die Verwendung einer Schriftart mit fester Breite. Dies hilft, die Einheitlichkeit der Formgestaltung zu erhalten.
Unsere Spalten werden tatsächlich etwas mehr als 450px sein, mehr wie 600px, aber wenn wir die Spaltenbreite auf 450px setzen wollen, reduzieren wir einfach unsere Spaltengröße von 6 auf 5. Eine 600px-Säule sollte jedoch ohnehin im Hochformat auf einen mobilen Bildschirm passen.
Wir testen unser Layout mit diesem Code:
Und wir können sehen, dass alles gut aussieht (weil wir vorübergehend Grenzen hinzugefügt haben, um uns zu zeigen).
Das Linux-Bildschirmlineal-Widget ist offensichtlich nicht Teil der Webseite, aber es zeigt uns, dass unsere Spalten auf einer kleineren Anzeige nicht so stark brechen. Was passiert bei verschiedenen Bildschirmbreiten:
3. Benutzerdefinierte Eingabeformate und Etikettenposition erstellen
Wenn wir einfach alles in Standardeinstellung belassen, ohne ein benutzerdefiniertes CSS hinzuzufügen, geschieht dies, wenn wir die erste Zeile der Eingabesteuerelemente hinzufügen:
Dies geschieht, weil die Beschriftung für jede Eingabe links von der Eingabe vorgegeben ist und wir keine benutzerdefinierte Breite für die Eingabesteuerelemente festgelegt haben. Wir können beide Probleme mit CSS beheben.
Jetzt setzen wir einfach die Anzeigeeigenschaft von Beschriftungselementen auf "blockieren", setzen die Felder von First und Last auf die Klasse "in40w" und das Feld MI auf die Klasse "in10w", und alles sollte viel schöner aussehen.
Wie Sie sehen, sieht es besser aus, aber das Layout ist nicht mehr korrekt. Nun sind die Boxen gestapelt. Wie wir das beheben können, ist die Idee, das Label-Element überhaupt nicht zu verwenden, weil wir das nicht wirklich brauchen. Wir werden nur unsere anwenden in40w und in10w Klassen, und machen Sie eine neue Klasse aufgerufen inLeftOf.
Wenn das Problem einmal angewendet wurde, wird es wie folgt behoben:
Dies lässt jedoch nicht genug Platz für das SSN-Feld. Das liegt daran, dass unsere linke Spalte größer ist als erwartet. Daher ist 40% tatsächlich mehr Platz, als wir für diese Felder benötigen, sodass wir sie tatsächlich reduzieren können in30wund das mittlere Feld ist größer als es sein muss, damit wir das schaffen können in5w. Folgendes passiert:
Jetzt ist mehr als genug Platz, um das SSN-Feld hinzuzufügen, das die erste Zeile unseres Eingabeformulars ausfüllt. Nach dem Glätten all dieser Details sollte der Rest der linken Säule sehr einfach sein. Wir können jetzt den temporären Rahmen loswerden und den korrekten Hintergrund auf die Spalte anwenden. Hier ist die obere Hälfte des Panels, bevor wir zu speziellen Bereichen des Formulars gelangen:
In dieser Phase sind einige Dinge passiert. Der erste Teil war der einfache Teil beim Festlegen der Hintergrundfarbe für die Spalte (rgb (235,235,246)). Obwohl Sie sie hier nicht sehen können, wurde die Textfarbe für alle Eingaben auf #427DB4 und die Schriftstärke eingestellt wurde fett gesetzt, um die Augenbelastung zu reduzieren. Der Text wurde so eingestellt, dass er mit der CSS-Eigenschaft text-transformation automatisch in Großbuchstaben umgewandelt wird, um die Dateneingabe zu beschleunigen und Fehler zu reduzieren.
Die komplexere Angelegenheit, die Steuerelemente auszurichten und sicherzustellen, dass sie bei jedem Anzeigetyp eine anständige Ausrichtung beibehalten, erforderte mehr Überlegung. Sie haben bereits die Technik für die erste Zeile der Eingaben und ihre Beschriftungen gesehen. Diese Technik funktioniert, wenn zwischen den Eingaben kein zusätzlicher Abstand erforderlich ist. Wenn Sie jedoch Platz hinzufügen müssen, ist es besser, eine andere Technik zu verwenden.
Diese andere Technik beinhaltet das Erstellen einer verschachtelten Reihe von Spalten innerhalb unserer Hauptspalte, was dazu beiträgt, die Steuerelemente im richtigen Abstand zu halten. Die Anzahl der Spalten und ihre Größe ändert sich je nach den Anforderungen der einzelnen Steuerelemente. Denken Sie daran, alles ist responsiveWenn also die Größe einer Spalte geändert wird, versucht alles innerhalb der Spalte, die Größe an die Änderung anzupassen. Dies ist eine gute Nachricht für sehbehinderte Benutzer, da sie die Vergrößerung auf ihrem Display erhöhen können und alles wie für jeden anderen Benutzer korrekt ausgerichtet wird.
Um auf den komplexeren Teil der linken Spalte zu gelangen, war für das ursprüngliche Konzept, das im Modell beschrieben wurde, eine Struktur erforderlich, die schwer zu implementieren gewesen wäre. Glücklicherweise stellte ich fest, dass die Daten im Berechtigungspanel verdoppelt werden konnten, wenn standardmäßige Kontrollkästchen verwendet wurden. Dies löste das Problem mit der Komplexität des Layouts:
Die helleren Platten um die speziellen Abschnitte herum sind nur gewöhnliche Bootstrap-Wells. Für die Eingabe von Religionsdaten ist es notwendig, aus einer festgelegten Liste vordefinierter offizieller Religionen (einschließlich „andere“) auszuwählen. Die Entwicklung der Spalten auf der rechten Seite war sogar noch einfacher, und es wurden einfach die gleichen Techniken aus dem ersten Satz von Steuerelementen in der linken Spalte verwendet und die Steuerelemente in einer Tabelle organisiert format, aber ohne Verwendung einer Tabelle.
Damit dieses Projekt ein Erfolg wurde, musste es perfekt sein responsiveness auf allen offiziellen Displaygrößen. Mal sehen, wie das Ergebnis geworden ist. Zuerst mit der Vollauflösungsversion:
Das kommt dem Prototypen so nahe, dass wir damit zufrieden sein können. Tatsächlich ist es sogar eine Verbesserung. Nun sehen wir uns die an responsive Layout in jedem der verschiedenen Abschnitte der Seite:
Bootstrap und HTML5 haben die Formularentwicklung schneller und einfacher als je zuvor gemacht, aber viele Entwickler untergraben diesen Fortschritt, indem sie Formulare zu kompliziert machen (unter Verwendung der speziellen HTML5-Formularelemente, nur weil sie verwendet werden sollen, anstatt weil sie für das Projekt benötigt werden ) und durch die Schaffung völlig eindimensionaler Formen, die nicht einmal versuchen, einen Vorteil daraus zu ziehen responsive Entwurf. Mit nur ein wenig Sorgfalt und zusätzlicher Arbeit können alle Daten auf Bildschirmen jeder Größe ansprechender dargestellt werden.
Bei der kleinsten Bildschirmgröße im Hochformat gibt es möglicherweise ein paar kleinere Störungen (bei der kleinsten Bildschirmgröße (bei diesem Projekt ist das mittlere Anfangsfeld in der ersten Zeile etwas kleiner als es ideal wäre), im Allgemeinen jedoch für mobile Benutzer Akzeptieren Sie, dass dies der Kompromiss ist, den sie einhalten müssen, wenn Sie ihre Handys nicht richtig halten.
Tun Sie es richtig und Ihre Datenformulare können folgendermaßen aussehen:
Anstelle von ...
Headerbild mit freundlicher Genehmigung von
Ihre Nachricht 0 Antworten