Bisher hab ich meistens einfach ein paar JS Checks angehängt, aber bei hundert Inputs wirst ja zum Grammerl
URL: https://www.overclockers.at/coding-stuff/handling-von-groszen-html-forms_258837/page_1 - zur Vollversion wechseln!
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
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/
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
Framework.. 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.
Auweh, ja mit HTML allein wirst da fix zum Schwammerl (wtf is Grammerl? )
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
jQuery auf jeden Fall mal ersetzen. Super replacements dafür sind alpine.js oder das neue petite-vue.
Und VS Code statt Notepad
Das wäre da wohl das einfachste und schnellste, um dir schon enorm viel zu erleichtern.
ich sollte erwähnen ich bin KEIN programmierer . 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.
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.
daran arbeite ich bereits. geht halt durch die gewünschte anordnung der felder auch nur teilweise.
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.
Zitat aus einem Post von Umlüxdaran arbeite ich bereits. geht halt durch die gewünschte anordnung der felder auch nur teilweise.
Zitat aus einem Post von DaedaDIY 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.
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/
Zitat aus einem Post von hynkIrgendwie 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/
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.
overclockers.at v4.thecommunity
© all rights reserved by overclockers.at 2000-2024