Das ist nur eine zufällige Idee, aber ich kann sie nicht aus meinem Kopf bekommen.
Immer wenn ich auf einem neuen Projekt, bei dem die CSS- und Styleguide-Strukturen gerade erst entstehen, ein Formular gestalten muss, ist die Versuchung groß, auf ein Mini-Formular-Framework zurückzugreifen. Formularelemente sind heikel, haben kleine Cross-Browser-Probleme und manchmal ist es geradezu schwierig, die Styling-Kontrolle darüber zu erlangen.
Diese Idee, über die ich jetzt endlich schreiben kann, aber an der ich noch keine Arbeit geleistet habe, wäre dieses Mini-Formular-Framework. Vielleicht etwas wie „Boilerform“, wie Dave scherzhaft in einer Episode von ShopTalk vorschlug.
Ich stelle mir das ungefähr so vor
- Es hätte grundlegendes Formular-Styling, um Formularelemente zu organisieren, nicht unähnlich dem von Foundation Forms;
- Berücksichtigung von Cross-Browser-Problemen, nicht unähnlich normalize.css;
- Starke Styling-Kontrolle über Formularelemente, nicht unähnlich WTF, forms?; und
- Einbindung nativer Browser-Formularvalidierungsfunktionen, einschließlich UX-Verbesserungen durch native JavaScript-APIs, nicht unähnlich Validate.js.
Ich denke, es hat Wert, diese Dinge zu einem Ganzen zu kombinieren, aber das mit…
- Einem leichten Ansatz, und mit so wenig Meinung wie möglich über das endgültige Styling, und mit
- Flexibilität, vielleicht mit einer Galerie verschiedener Formulararten mit unterschiedlichem Styling.
Ich habe wahrscheinlich keine Zeit, ein solches Projekt zu leiten, aber ich würde gerne dabei helfen, Leute zu verbinden, die hier auch Wert sehen und es ausprobieren möchten.
Scheint eine gute Idee zu sein. Am meisten kämpfe ich mit dem plattformübergreifenden Styling von Platzhaltertexten.
Das klingt großartig, ich glaube, ich habe mir das auch schon oft gewünscht. Würde das gerne als Wochenendprojekt machen.
Wirklich gut gefällt mir die Idee. Du könntest dir ansehen, was http://responsivebp.com/css/forms/ gemacht hat. Ich weiß, dass er viel getan hat, um Formularelemente browserübergreifend zu normalisieren https://github.com/ResponsiveBP/Responsive/blob/v4/src/sass/partials/_forms.scss.
Ich würde definitiv ein Mini-Formular-Framework nutzen. Tolle Idee.
Ich wäre bereit, daran als Open-Source-Projekt mit jemand anderem zusammenzuarbeiten :)
Ich bin selbst Designer und Frontend-Entwickler.
Melde dich, wenn du daran interessiert bist, eine kleine großartige Lösung für dieses (sehr) häufige Szenario zu entwickeln.
Ich habe schon länger eine ähnliche Idee. Ich denke, viele Leute, ich eingeschlossen, würden gerne zu einem solchen Projekt beitragen.
Das ist eine gute Idee. Formularsteuerelemente sind notorisch schwierig zu kontrollieren und plattformübergreifend zu stylen.
Die größten Herausforderungen, die ich sehe, sind
1. Einige Elementstile sind plattformübergreifend komplett inkompatibel, z.B. die Standardstile von Apple OS für Selects
2. Standards für einige Eingabetypen existieren nicht, z.B. Postleitzahl oder Geburtsdatum vs. Datumsbereich.
3. Polyfills sind oft nicht die beste Lösung, da viele der nativen Lösungen für Daten, Zahlen und Validierung eine schlechte UX und Styling-Kontrolle haben.
4. Eingabeattribute variieren stark je nach Bedarf, z.B. autocomplete, inputmode, spellcheck – fast niemand weiß, wie man diese richtig benutzt (einschließlich der Browser ;)
Ich erinnere mich, dass gov.uk gute Arbeit geleistet hat, um bewährte Praktiken für Webformulare zu dokumentieren, aber der Fokus lag mehr auf Benutzerfreundlichkeit als auf technischer Umsetzung.
Ich muss zugeben, dass ich, wann immer ich heutzutage dazu neige, von Grund auf neu zu schreiben, anstatt ein Framework wie Foundation zu verwenden, das Formular-Styling ist, das mich aufgibt. Daher würde ich das tatsächlich unterstützen!
So neidisch auf WordPress & Craft, Formulare sind zu standardisiert, um so konstant benutzerdefiniert zu sein..
Ich habe vor einiger Zeit ein Formular-Boilerplate entwickelt, weil ich vor dem gleichen Problem stand. Es spart enorm viel Zeit, wenn man nicht jedes Mal, wenn man ein neues Projekt startet, Formulare von Grund auf neu stylen muss: https://github.com/electerious/formbase
Tolle Idee. Ich würde gerne mitarbeiten, insbesondere im Hinblick auf Barrierefreiheit.
Eine Sache bezüglich des Nicht-Meinungsbildens…
Gängige UX-Best-Practices besagen, dass Formularbezeichnungen über den Formularfeldern erscheinen sollten, nicht links oder rechts ausgerichtet.
Das Framework sollte also einfach genau das tun… Bezeichnungen darüber stapeln.
Ich bin wirklich bereit, mich hier zu engagieren. Ich denke, das wird für die Community sehr nützlich sein.
Sollen wir ein Projekt einrichten, damit wir festlegen können, was das Ding können muss?
Auf jeden Fall, ich habe erst kürzlich nach so etwas gesucht und war von den verfügbaren Optionen enttäuscht. Am Ende habe ich alle meine Formularstile von Grund auf neu geschrieben.
Ich liebe die Idee, da es immer mühsam ist, Formulare richtig hinzubekommen.
Mein Problem mit den meisten CSS-Boilerplates ist, dass sie entweder in der falschen Sprache sind (Sass, Less, CSS, Stylus usw.), inkonsistente Namenskonventionen verwenden (BEM, Atomic, ++), schwer in ein Framework zu integrieren sind (React, Angular, Vue) oder eigene Grid-Systeme oder andere Stile verwenden, die bereits vorhandene Funktionalität meines Projekts duplizieren.
Ich denke, ein Generator wäre nützlich – etwas, das eine Konfiguration (und vielleicht Vorlagen?) entgegennimmt und CSS in deiner bevorzugten Sprache und Namenskonvention generiert. Dies würde das Projekt für Beiträge aus der Community öffnen und endlose Diskussionen über DEN einen Weg, Dinge zu tun, verhindern. Natürlich sollten vorab generiertes CSS/JS für diejenigen bereitgestellt werden, die einfach gute Standardwerte in ihr Projekt aufnehmen möchten, ohne sich um viele Dinge kümmern zu müssen.
Ich finde einen Generator eine gute Idee, Daniel. Ich dachte sofort an Yeoman, aber das setzt die Eintrittsbarriere meiner Meinung nach zu hoch.
Eine nette, freundliche Benutzeroberfläche, die es Benutzern ermöglicht, ihre Ausgabe zu konfigurieren, wäre ein schönes Werkzeug.
Vielleicht eine PWA?
Weitere zufällige Ideen
Einige gute Punkte, Chris, aber ich befürchte, dass wir vielleicht zu viel lösen wollen. Persönlich denke ich, wir sollten uns laserartig auf die Formularelemente selbst konzentrieren und den Rest dem Kontext überlassen, in den sie eingefügt werden.
Ich weiß nicht, vielleicht bin ich zu vorsichtig?
Das ist hier ein wenig eingeschlafen. Ich denke, wir sollten vielleicht ein Repository oder etwas einrichten, damit wir ausarbeiten können, was wir von dieser Sache erwarten?
Ich bin bereit, etwas einzurichten, oder vielleicht gründen wir eine Organisation, damit wir ein paar spezialisierte Repos haben können?