HTML Formular zum Bearbeiten und Speichern?

McMoneysack91 · 19. Januar 2023

Liebe Freunde,

ich möchte im Offline-Betrieb ein HTML Dokument erstellen, das aufgebaut ist wie ein Formular, wo der Anwender eigene Eingaben in bestimmte Felder machen darf.

Wichtig ist, dass ich diese Eingaben permanent machen möchte. Z.B. durch einen Speicher-Button. Ist es möglich, durch eine bestimmte Funktion die Quelldatei permanent zu verändern, zu speichern?

Ich rede nicht davon, dass auf einem Server oder einer Datenbank ein Eintrag abgelegt wird, sondern wirklich nur die vom Nutzer geöffnete Datei selbst.

Ziel ist:

Statt die .html Datei mit Rechtsklick im Editor zu öffnen wo der ganze chaotische Quelltext steht, soll der Anwender bereits eine schöne HTML/CSS Seite in seinem Browser sehen, nur einige wenige ausgesuchte Felder bearbeiten können und anschließend diese Datei permanent speichern können.

Ist das umsetzbar mit HTML allein? Oder muss da schon PHP/JavaScript-Magie angewandt werden?

netzgestaltung · 19. Januar 2023

hi, das wird mit HTML nicht möglich sein, da es keine programmiersprache ist. deine eingabe wird nach dem senden entweder: an die seite geschickt, die im form attribut "action" eingetragen ist, das kann zb ein PHP oder auch anderes script sein, das die werte speichert, ob nun in eine datenbank oder deine original html datei, ist beides möglich.

alternativ kann javascript das event "submit" abfangen und mit den daten etwas in die seite schreiben. das wird aber nicht gespeichert. javascript kann aber auch etwas in deinem browser speichern im "localstorage". deine html seite kann beim aufrufen ein javascript laufen lassen, das daten aus dem localstorage ausließt. Deine html datei bleibt dabei unberührt und die daten sind nur auf diesem browser anzeigbar.

S.Kara · 19. Januar 2023

Ich frage mal "wieso?" und "wozu?".
Möchtest du die "HTML über HTML programmieren"? Lieber mit der Materie beschäftigen. Ansonsten gibt es auch Programme wie HTML-Builder.

Falls du nur Informationen speichern möchtest:
Die HTML-Seite müsste im Browser geöffnet werden. Von daher könntest du Informationen im localStorage ablegen, die beim nächsten Öffnen wieder da sind.

Diese Informationen bleiben allerdings im Cache des jeweiligen PCs, werden beim Versenden der Datei also nicht mit übertragen.

Das Verändern über HTML an sich selbst dürfte nicht möglich sein.

dermoritz · 19. Januar 2023

Die Frage ist für mich was permanent heißt. Soll der Benutzer einfach "speichern unter" im browser klicken und dann die html Seite speichern? das könnte auch ohne Javascript funktionieren - bin mir nicht 100% sicher ob dann auch ausgefülltes html gespeichert wird.

Das kannst sehr schnell ausprobieren. Eine seite mit einem input feld, das ausfüllen und "strg-s" (speichern unter) und dann seite wieder öffenen.

cnubby · 19. Januar 2023

Über welche Anzahl an Anwendern reden wir hier?

Bei einer überschaubaren Anzahl könnte man versuchen, über WORD/EXCEL entsprechende Dateien für den Anwender freizugeben, die er dann online bearbeiten kann. WORD/EXCEL sind in der Lage, online jede Änderung zu speichern.

mibbio · 19. Januar 2023

netzgestaltung schrieb:
javascript kann aber auch etwas in deinem browser speichern im "localstorage"

Man kann per JavaScript theoretisch auch Daten aus einer externen Datei lesen und wieder in eine solche schreiben. Man baut in die Seite einfach ein "Upload-Feld" ein, ließt die dort angegebene Datei aber einfach direkt per JavaScript clientseitig ein und arbeitet dann mit den eingelesenen Daten, statt diese zu einem Server zu senden. Daten in einer Datei speichern geht dann über den Weg, dass man die Daten per JavaScript quasi in einen Download schreibt. Der Download kommt dann in dem Fall nicht von einem Server, sondern wird clientseitig vom JavaScript Code erzeugt.

Yuuri · 19. Januar 2023

Du könntest mit JS die komplette aktuelle Seite duplizieren und als neuen "Download" anbieten. Musst vorher aber die Werte ins HTML schreiben.

HTML:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="input" value="">

    <button id="download" type="button">Download</button>
    <script>
        const persistData = element =>
        {
            /**
             * Prüfung auf
             * - Typ (<input>, <textarea>, <select>, <input type="checkbox">)
             * - spezielle Behandlung einiger Felder
             * - ...
             */
            element.setAttribute("value", element.value)
        }
        document.querySelector("#download").addEventListener("click", function ()
        {
            // Felder manuell persistieren
            const input = document.querySelector("#input")
            persistData(input)

            /**
             * Download als Umweg über <a>, da nur somit ein Dateiname gesetzt
             * werden kann
             */
            const download = document.createElement("a")
            download.setAttribute("href", `data:application/octet-stream;base64,${btoa(document.documentElement.innerHTML)}`)
            download.setAttribute("download", `test - ${input.value}.html`)
            download.style.display = "none"
            document.body.appendChild(download)
            download.click()
            document.body.removeChild(download)
        })
    </script>
</body>

Ob es schön ist? Es erfüllt seinen Zweck... :O

dermoritz · 19. Januar 2023

wie oben wrwähnt geht es ohne script:

HTML:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="input" value="">
        
</body>

Formular ausfüllen und einfach "speichern unter" im browser benutzen.
Dieses speichern unter als Button in HTML zu bauen erfordert aber JavaScript. Aus meiner Sicht ist das aber nicht nötig, da man al Benutzer ja durchaus gewohnt ist Dokumente mit speichern unter zu speichern.

Yuuri · 19. Januar 2023

Problem sind dann evtl. bloß eingebundene Bilder, Styles, Scripte, ... Mit Speichern unter wandelt der Browser das dann in lokale file://-Links um, was ggf. nicht gewünscht ist.

Ein paar Anläufe sind ja nun vorhanden.

McMoneysack91 · 20. Januar 2023

dermoritz schrieb:
Die Frage ist für mich was permanent heißt. Soll der Benutzer einfach "speichern unter" im browser klicken und dann die html Seite speichern?

Ja so ziemlich.

Das "wieso" muss an dieser Stelle für euch noch gar keinen Sinn ergeben. Ist eine reine proof of concept Übung für mich.

Yuuri schrieb:
Du könntest mit JS die komplette aktuelle Seite duplizieren und als neuen "Download" anbieten.

Ja auch das kommt dem ganzen nahe.

Ziel ist z.B. ein Rückmeldebogen für EINEN Anwender. Ich mache in HTML/CSS also einen schönen Bogen mit Logos, schönem Layout, etc und eben mit einigen vorgegebenen Feldern die der Anwender befüllen kann.

Nachdem er fertig ist, klickt er auf einen Button "Abschicken". Dieser Button speichert alles auf dem Bidschirm befindliche mit dem eingegebenen Text durch den Anwender. Der Auswerter macht also diese gespeicherte Seite auf und sieht den Text des Anwenders. Dieser ist nun aber nicht mehr beschreibbar. Nur lesbar.

User007 · 20. Januar 2023

Hi...

McMoneysack91 schrieb:
Das "wieso" muss an dieser Stelle für euch noch gar keinen Sinn ergeben. [...]

Na ja, m. Mg. n. doch schon - zumind. ein wenig, um auch zielorientiert sinnvolle Hinweise beitragen zu können.
Evtl. wäre ein HTML-Formular denkbar, das mitsamt den Eintragungen einfach über den "Seite speichern unter..."-Dialog als "Webseite, nur HTML" doch durchaus eine Momentaufnahme abbildet - mglw. ließe sich mittels einer Routine jede neue in einem entfernten Verzeichnis gespeicherte Datei automatisiert mit einem Kennwortschutz versehen und so eine nachträgliche Dokumentenänderung verhindern.

Andererseits wird hier vllt. für den Use-Case mittels HTML das falsche Mittel gewählt - für die Umsetzung des Anforderungsprofils mit

McMoneysack91 schrieb:
[...] dass ich diese Eingaben permanent machen möchte. Z.B. durch einen Speicher-Button. Ist es möglich, durch eine bestimmte Funktion die Quelldatei permanent zu verändern, zu speichern?

McMoneysack91 schrieb:
[...] sondern wirklich nur die vom Nutzer geöffnete Datei selbst.

ist eigtl. einfach eine Text- oder Formularvorlage, bspw. als (schreibgeschützte) WORD- oder plattformunabhängige PDF-Datei, für die dann beim Speichervorgang automatisch ein "Speichern unter"-Dialog angeboten wird, bestens prädestiniert.

Btw.:

McMoneysack91 schrieb:
[...] Der Auswerter macht also diese gespeicherte Seite auf und sieht den Text des Anwenders. Dieser ist nun aber nicht mehr beschreibbar. Nur lesbar.

Um ein "manipulationsfreies" Dokument zu erhalten, müssten die eingetragenen Daten unveränderbar im Dokument hinterlegt werden - das ginge nur durch Speichern mit Kennwortschutz oder separierter Ablage der eingetragenen Daten, bspw. in einer DB, an einem nur dem "Auswerter" zugänglichen Speicherort bzw. sogar einer Kombination von beidem.

Suche

HTML Formular zum Bearbeiten und Speichern?

McMoneysack91

Gast

netzgestaltung

Captain

S.Kara

Captain

dermoritz

Lt. Commander

cnubby

Gast

mibbio

Vice Admiral

Yuuri

Fleet Admiral

dermoritz

Lt. Commander

Yuuri

Fleet Admiral

McMoneysack91

Gast

User007

Vice Admiral

Ähnliche Themen