Wie man Formulare im Webdesign tahmt
Formulare werden oft als eines der schmerzhaftesten HTML-Elemente angesehen, die programmiert werden müssen. Aber Design und Entwicklung von Formularen sind sprunghaft vorangeschritten; es ist nicht annähernd so schwer wie es einmal war.
Während die Industrie jedoch enorme Fortschritte gemacht hat, gibt es noch einige Hürden. Am Ende ist die Zähmung von Formen möglich; Es braucht nur etwas Arbeit.
In diesem Post sehen wir uns einige der am häufigsten verwendeten Formularsteuerelemente und verschiedene Tools und Plugins an, die Ihnen bei der Bereitstellung von Formularen auf Ihren Websites helfen sollen.
Wenn Sie weitere Tipps oder Links zu anderen nützlichen Ressourcen haben, können Sie diese in den Kommentaren posten.
Die Steuerelemente aufbrechen
Beginnen wir damit, sie in zwei Buckets zu unterteilen, da es bei einigen Formularsteuerelementen nie Probleme gab, mit ihnen zu arbeiten.
Freundliche Kontrollen
Die Steuerelemente, mit denen Sie am einfachsten arbeiten können, sind das grundlegende Eingabefeld, der Textbereich und die Schaltfläche. Sie funktionieren gut mit Standard-CSS und sind glücklicherweise die häufigsten Formelemente. Wenn Sie die schwierigeren nicht brauchen, haben Sie Glück.
Mit dem Fortschritt von CSS3 abgerundeten Ecken, Schlagschatten und Farbverläufen sind viele der gängigsten Stile jetzt noch einfacher. Mit diesen Steuerelementen haben Sie nichts zu befürchten.
Störende Kontrollen
Bestimmte andere Formkontrollen können ein massiver Schmerz im Hals sein. Wenn Sie beispielsweise ein Dropdown-Steuerelement entwerfen, das extrem stilisiert ist, möchte der Entwickler wahrscheinlich mit Ihnen chatten. Ihre Optionen für das Styling sind ziemlich eingeschränkt: Rahmenfarbe, Füllung, Hintergrundfarbe, diese Art von Sache. Wenn Sie mehr Styling benötigen, rate ich Ihnen, sich mit dem Entwickler in Verbindung zu setzen, um sicherzustellen, dass Sie kein größeres Problem damit haben.
Störende Formularkontrollen umfassen:
- wählen Sie mehrere,
- Drop-down auswählen,
- Kontrollkästchen
- Radio Knöpfe,
- Datei-Upload.
Moderne Werkzeuge für Formen
Wie bereits erwähnt, gibt es eine Reihe von unglaublichen Tools, mit denen Sie Formularsteuerelemente in Form bringen können.
Formalisieren ist Ihre geheime Waffe, um grundlegende Steuerelemente und Stile für Formulare zu erhalten, die sich in allen Browsern einheitlich verhalten. Und seine Standardstile sind sauber und schön. Diese großartige Bibliothek funktioniert auch perfekt mit einer breiten Palette von JavaScript-Bibliotheken, wie z jQuery , Dojo und MooTools .
Austausch der Formularsteuerung
Wenn Sie ein Formular radikal bearbeiten möchten, stehen hilfreiche Tools zur Verfügung. Eine brillante Taktik, Webformulare zu zähmen, besteht darin, die eigentliche Kontrolle zu verbergen und sie komplett durch eine hergestellte zu ersetzen. Dies gibt Ihnen viel mehr Kontrolle darüber, wie das Formular gerendert wird.
Ein gutes Beispiel dafür ist Uniform ein jQuery-Plug-in zum Erstellen von glatten Formen. Es kommt in drei verschiedenen Themen. Und wenn Sie ein benutzerdefiniertes Design erstellen möchten, verwenden Sie einfach den Service CSS-Generator um das Plug-in leicht zu häuten.
Ein weiteres jQuery-Plug-in Nizzaformen . Es verfügt zwar nicht über die praktische Funktion zum erneuten Skinning von Uniform, bietet jedoch einen grundlegenden Stil, der Ihren Bedürfnissen sehr gut entsprechen kann.
Schließlich gibt es die kommerzielle jQuery-Erweiterung Wijmo . Das Modul, an dem wir interessiert sind, ist das Dekorateur , die tatsächlich frei zu benutzen ist. Es behandelt einige der problematischeren Steuerelemente: Kontrollkästchen, Optionsfelder und Dropdown-Menüs. Als Teil einer größeren kommerziellen Bibliothek bringt dieses Tool einige Vorteile, von denen die ersten stark sind Dokumentation und bezahlt Unterstützung . Schließlich liebe ich die Art, wie es mit dem Häuten umgeht. es benutzt das jQuery UI ThemeRoller , leichte Arbeit von kundenspezifischen Designs.
Erfand Formkontrollen
Wenn es schließlich keine Formularsteuerung gibt, die das tut, was Sie brauchen, können Sie eines erfinden! Einige sehr schlaue Leute haben bereits eine Menge davon getan, und vielleicht ist eines ihrer Werkzeuge bereits Ihren Bedürfnissen angepasst.
Schieberegler
Eine Sache, die im Standard-HTML fehlt (aber Teil von HTML5 ist), ist ein einfacher Schieberegler. Darauf gibt es viele Antworten einer von Wijmo , die auf dem basiert jQuery UI-Schieberegler .
Uploader
Während Sie das Dateieingabesteuerelement verwenden können, um Benutzern das Auswählen einer Datei zum Hochladen zu ermöglichen, möchten Sie möglicherweise ein wenig snazziger, insbesondere wenn Dateiuploads für Ihre Website wichtig sind. Eine der besten Lösungen ist Hochladen . Es ermöglicht Benutzern, mehrere Dateien auszuwählen und den Fortschritt anzuzeigen. Es kommt mit einer Vielzahl von Layout- und Funktionsoptionen.
Slider-ähnliche Kontrollkästchen und Optionsfelder
Ein beliebtes UI-Element (dank dem iPhone) ist der Ein / Aus-Schalter, der von einer Seite zur anderen gleitet. Mit Dieses praktische jQuery Plug-in können Sie ein einfaches Kontrollkästchen oder eine Optionsschaltfläche in eine umwandeln. Ob Sie dies ein erfundenes Formular-Steuerelement oder ein Formular-Ersatz-Tool nennen, es ist eine großartige Möglichkeit, um Benutzern zu ermöglichen, Optionen ein- und auszuschalten.
Kreative Schaltflächen
jQuery Benutzeroberfläche ist eine weitere interessante Einstellung zu grundlegenden Kontrollen. Was es bezeichnet als Tasten könnte auch verwendet werden, um Optionsgruppen basierend auf Schaltflächen, Optionsfeldern und Kontrollkästchen zu erstellen. Auf diese Weise transformieren Sie diese Steuerelemente in eine andere visuelle Form. In der Abbildung unten sehen Sie eine Reihe von Optionsfeldern, die wie eine Reihe von Schaltflächen gestaltet sind.
HTML5-Formulare
HTML5 hat viele aufregende Möglichkeiten für Web-Formulare gebracht. Obwohl dies den Rahmen dieses Artikels sprengt, ist es immer noch relevant. Hier sind einige wichtige Ressourcen, die Ihnen beim Eingraben helfen:
- " Eine Form des Wahnsinns "Tauchen Sie in HTML5 ein;
- " Spaß mit HTML5-Formularen , "Richard Shepherd;
- " HTML5-Formulare "Wufu;
- " Haben Sie einen Feldtag mit HTML5-Formularen , "Inayaili de León.
Fazit: Form Controls sind eine der kritischsten Hürden bei der Entwicklung einer Basis-Website.
Ein Designer, der die Einschränkungen versteht, die Tools kennt und Möglichkeiten für einfache Optimierungen erkennt, wird fundierte Entscheidungen treffen können, die letztendlich das Endergebnis verbessern.