"Christmas - the time to fix the computers of your loved ones" « Lord Wyrm

Handling von großen HTML Forms

Umlüx 19.10.2021 - 08:40 705 11
Posts

Umlüx

Huge Metal Fan
Avatar
Registered: Jun 2001
Location: Kärnten
Posts: 8411
hat jemand ein paar Links oder Tuts bezüglich eleganten Handling von großen HTML Forms mit mehreren dutzend verschiedenen Inputs? Vor allem Richtung Umgang mit Pflichtfeldern, Formatprüfungen, Warnung bei verlassen der Form.. etc..
Bisher hab ich meistens einfach ein paar JS Checks angehängt, aber bei hundert Inputs wirst ja zum Grammerl :D

sts


Registered: Feb 2008
Location: Graz
Posts: 187
Mhm, könntest du vielleicht etwas detailierter beschreiben wie es aktuell gemacht wird? wohin soll die Reise gehen? Kommt schon eine Library zum Einsatz? nach Framework ala Angular/React hört sich das ja so gar nicht an (und wäre nur für Fomulare natürlich umsonst) Das "einfach ein paar JS Checks angehängt" macht mir etwas Angst haha (wie geht es dir dabei mit der Wartbarkeit? gibs es häufig Anpassungen?)

Große, umfangreiche Formulare wirken halt meiner Erfahrung nach großteils leider immer hingerotzt und sind deshalb auch schlecht zu warten und für Endbenutzer kaum zu bedienen. Für gute Formulare kommt halt auch viel zusammen: Design, Strukturierung, Wahl der korrekten Controls, Validierung / Fehlermeldung, Unterschied Desktop vs Mobile, Mehrsprachig, ...
Das ist schon irgendwie eine Kunst für sich und wirklich Spaß machts halt auch nicht als Entwickler.

Falls Bootstrap zum Einsatz kommt wird einem hier ja schon einige Punkte abgenommen: https://getbootstrap.com/docs/5.0/forms/overview/

Generell bin ich ein Fan, umfangreiche Formulare via Wizard/Stepper aufzusplitten: https://material.io/archive/guideli.../steppers.html#

Ich verwende jetzt doch schon einige Jahre das Angular Framework und auch wenn wenn beim Thema Reactive-Forms noch sehr viel Raum für Verbesserungen vorhanden ist: die Kombination Bootstrap und Material-Komponenten bzw. Custom-Komponenten hat sich schon ganz gut bewährt

Anregungen:
https://www.smashingmagazine.com/20...gn-masterclass/
https://www.smashingmagazine.com/20...te-time-picker/
Bearbeitet von sts am 19.10.2021, 10:10

X3ll

╰(*°▽°*)╯
Avatar
Registered: Mar 2002
Location: /dev/null
Posts: 1215
Ich mach das gerne mit Vue.js und Custom Checks. Ist die Frage ob du für das Projekt ein Framework lernen möchtest, falls ja: https://laracasts.com/series/learn-vue-2-step-by-step

Umlüx

Huge Metal Fan
Avatar
Registered: Jun 2001
Location: Kärnten
Posts: 8411
Framework.. :D zum einsatz kommen aktuell ich + notepad. maximal JQuery nutze ich für einige kleinigkeiten bereits.

ich muss mehr oder weniger ziemlich umfangreiche datensätze aus einer datenbank im intranet bearbeitbar zur verfügung stellen.
design und bedienbarkeit ist nebensache, ich bau das ding nach wünschen auf. (und wenn meine vorschläge auf taube ohren stoßen, wirds eben blind so umgesetzt).
ich möchte mir nur selber programmiertechnisch das leben etwas leichter machen, daher die frage.

Daeda

Here to stay
Registered: Aug 2007
Location: Solzburg
Posts: 956
Auweh, ja mit HTML allein wirst da fix zum Schwammerl (wtf is Grammerl? :D)

Bissl mehr Infos wie von sts gefragt wären nice. Serverseitige Validierung oder Eventhandling nötig? Session speichern und später weitermachen?

Bei so langen Forms muss ich immer an Umfragen denken. Ein fertiges Tool dafür verwenden is keine Option? zB Limesurvey gibts auch self-hosted.

DIY allgemein:
Laravell (eh schon erwähnt) oder Symfony (https://symfonycasts.com/screencast/symfony-forms) fürs serverseitige handling und im Frontend vue/svelte/react/angular mit entsprechender Library die ordentliche Forms unterstützt (a11y, i18n, responsive, error handling, validation, ...).
Bei Vue hab ich mit Vuetify (material design) sehr gute Erfahrungen gemacht. Die von sts erwähnten Stepper zusammen mit den Forms sind da schon wirklich fein.

/edit
autsch.. notepad + jquery klingt schmerzhaft :D

Daeda

Here to stay
Registered: Aug 2007
Location: Solzburg
Posts: 956
jQuery auf jeden Fall mal ersetzen. Super replacements dafür sind alpine.js oder das neue petite-vue.

Und VS Code statt Notepad :D

Das wäre da wohl das einfachste und schnellste, um dir schon enorm viel zu erleichtern.

Umlüx

Huge Metal Fan
Avatar
Registered: Jun 2001
Location: Kärnten
Posts: 8411
ich sollte erwähnen ich bin KEIN programmierer :D. die firma hat aber wind bekommen, dass ich php und sql kann, also darf ich nun diverse sonderwünsche umsetzen.
bisher waren sie klein, es reichte also handarbeit. dies ist aber nun das erste wirklich größere projekt.

keine sessions, kein eventhandling, keine extrawürste.
einfach einen riesen satz an sql daten in ein form laden, editieren lassen, clientside form validation auf pflichtfelder und formate beim speichern. mit einer warnung wenn er was ändert und dann einfach wegklickt/schließt. egal ob JS oder HTML5

einziges "problem" ist wirklich nur die anzahl der inputs. und ich will was dazulernen.

Daeda

Here to stay
Registered: Aug 2007
Location: Solzburg
Posts: 956
Würd die Daten aus der Datenbank so aufbereiten, dass du einfach loops machen kannst, um je nach Feld-Typ ein entsprechendes Formularfeld (Text, Zahl, Datum, Dropdown, Checkbox, ...) auszugeben. Dann wär die Anzahl an Feldern ja ganz egal.

Umlüx

Huge Metal Fan
Avatar
Registered: Jun 2001
Location: Kärnten
Posts: 8411
daran arbeite ich bereits. geht halt durch die gewünschte anordnung der felder auch nur teilweise.

COLOSSUS

putzt hier nur
Avatar
Registered: Dec 2000
Location: Wien || Stmk
Posts: 11151
Tu dir einen Gefallen und lern Rails, oder eine der Alternativen fuer andere Sprachen als Ruby, die dir 95%+ dieses Muehsals abnehmen, und zwar in einer sicheren und wartbaren Art und Weise.

JDK

Oberwortwart
Avatar
Registered: Feb 2007
Location: /etc/graz
Posts: 2189
Zitat aus einem Post von Umlüx
daran arbeite ich bereits. geht halt durch die gewünschte anordnung der felder auch nur teilweise.

Dafür gibt‘s CSS.

Klingt für mich aber auch so, als ob ich das Formular direkt programmatisch generieren würde (inkl. Attachen von Validierung etc).

Falls dir (auch wenn’s nicht nötig is) eines der genannten Frameworks anlernen willst, hast oft auch schon convenience Gschichten an Board.

Viper780

Er ist tot, Jim!
Avatar
Registered: Mar 2001
Location: Wien
Posts: 44013
Zitat aus einem Post von Daeda
DIY allgemein:
Laravell (eh schon erwähnt) oder Symfony (https://symfonycasts.com/screencast/symfony-forms) fürs serverseitige handling und im Frontend vue/svelte/react/angular mit entsprechender Library die ordentliche Forms unterstützt (a11y, i18n, responsive, error handling, validation, ...).
Bei Vue hab ich mit Vuetify (material design) sehr gute Erfahrungen gemacht. Die von sts erwähnten Stepper zusammen mit den Forms sind da schon wirklich fein.

Formulare und Symfony sind leider kein Freund. Das kann Laravell deutlich besser.
Kontakt | Unser Forum | Über overclockers.at | Impressum | Datenschutz