"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 8267 15
Posts

Umlüx

Huge Metal Fan
Avatar
Registered: Jun 2001
Location: Kärnten
Posts: 8897
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: Lima
Posts: 193
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: 1237
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: 8897
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: 1482
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: 1482
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: 8897
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: 1482
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: 8897
daran arbeite ich bereits. geht halt durch die gewünschte anordnung der felder auch nur teilweise.

COLOSSUS

Administrator
Frickler
Avatar
Registered: Dec 2000
Location: ~
Posts: 11899
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: 2742
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: 48856
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.

hynk

Super Moderator
like totally ambivalent
Avatar
Registered: Apr 2003
Location: Linz
Posts: 10906
Irgendwie passts zum Thema.

Was würdet ihr empfehlen um ein Formular als Input und eine PDF als Output zu generieren? Geht um sehr einfache aufbereitete Lebensläufe. Zielgruppe: Menschen ohne PC/Laptop. Also das soll auf Handy und Tablet laufen und DAU-freundlich.
Meine fünfzehn Jahre alten HTML/CSS Kenntnisse reichen hier leider nicht mehr aus.

Hab mir mal die Angular Doku angesehen, schmeckt aber nach Overkill. Bootstrap ist mir auch noch untergekommen, da hatte ich aber noch keine Zeit/Muse mich einzulesen.

*edit
Soetwas wünscht sich der Kunde, nur in "simpler":
https://www.cvmaker.de/

Snoop

Here to stay
Registered: Jun 2002
Location: Gablitz
Posts: 1075
Zitat aus einem Post von hynk
Irgendwie passts zum Thema.

Was würdet ihr empfehlen um ein Formular als Input und eine PDF als Output zu generieren? Geht um sehr einfache aufbereitete Lebensläufe. Zielgruppe: Menschen ohne PC/Laptop. Also das soll auf Handy und Tablet laufen und DAU-freundlich.
Meine fünfzehn Jahre alten HTML/CSS Kenntnisse reichen hier leider nicht mehr aus.

Hab mir mal die Angular Doku angesehen, schmeckt aber nach Overkill. Bootstrap ist mir auch noch untergekommen, da hatte ich aber noch keine Zeit/Muse mich einzulesen.

*edit
Soetwas wünscht sich der Kunde, nur in "simpler":
https://www.cvmaker.de/

naja du wirst ein frontend und ein backend brauchen. wichtigste lesson learned meinerseits: don´t use puppeteer for pdf generation. Nimm dann lieber browserless.

However: frontend ist meines erachtens für eine wirklich langfristig wartungsfreundliche umgebung angular + material packages die beste wahl. Es ist zwar ein major pain da mal reinzukommen, weil es eine strikte unterteilung hat. das machts dann für später super wartungsfreundlich, da man anhand der nomenklatur in der regel schon weiß wo das file liegt etc. Alternativ (falls du schon mit bootstrap vertraut bist) gibt es auch ngx-bootstrap

berndy2001

Komasäufer
Avatar
Registered: Feb 2003
Location: Vienna
Posts: 1947
pdfmake.org fällt mir noch zum clientseitigen pdf erstellen ein, aber ich würds auch serverseitig erstellen. zB tcpdf für php; aber es gibt natürlich viele andere libraries.
Bearbeitet von berndy2001 am 18.01.2022, 09:46
Kontakt | Unser Forum | Über overclockers.at | Impressum | Datenschutz