Forms API – Full FormData + Form Submission + Validation Pipeline #122

New issue

Open

opened 2026-06-20 08:19:57 +00:00 by Artur · 0 comments

Artur commented

2026-06-20 08:19:57 +00:00

Owner

Gap

Form submission ist eine unserer groessten Luecken. 11 Tests failen aktuell wegen Form-Action/SubmitEvent-Problemen. Fuer korrekte Webseiten-Interaktion brauchen wir die volle Forms API.

Was fehlt

1. FormData (vollstaendig)

FormData Konstruktor: FormData(form) - initialisiert aus Form-Elementen
.append(name, value) / .append(name, blob, filename)
.delete(name)
.get(name) / .getAll(name)
.has(name)
.set(name, value)
.entries() / .keys() / .values() / [Symbol.iterator]()
.forEach()

2. HTMLFormElement (vollstaendig)

.elements - HTMLFormControlsCollection (lebt, aktualisiert bei DOM-Aenderungen)
.length - Anzahl Controls
.name / .method / .action / .enctype / .target / .acceptCharset
.submit() - Programmgesteuerter Submit
.requestSubmit(submitter) - Spec-konformer Submit (feuert submit event, formdata event)
.reset() - Reset auf default values
.checkValidity() / .reportValidity() - Constraint Validation
.novalidate / .encoding

3. HTMLInputElement (Form-relevante Properties)

.form - Assoziiertes Form (readonly, live)
.value / .defaultValue / .valueAsDate / .valueAsNumber
.checked / .defaultChecked / .indeterminate
.name / .type / .accept / .multiple / .files
.validity / .validationMessage / .willValidate
.setCustomValidity(message)
.step / .stepUp() / .stepDown() / .min / .max
.selectionStart / .selectionEnd / .selectionDirection
.select() / .setRangeText() / .setSelectionRange()
.labels - Assoziierte Label-Elemente

4. Constraint Validation API

ValidityState Interface: valueMissing, typeMismatch, patternMismatch, tooLong, tooShort, rangeUnderflow, rangeOverflow, stepMismatch, badInput, customError, valid
.checkValidity() auf form/input/select/textarea/button/fieldset
.reportValidity() - wie checkValidity + feuert invalid event
invalid Event

5. Submit-Event Pipeline

User klickt Submit-Button (oder JS ruft .requestSubmit() auf)
submit Event feuert auf form (kann preventDefault() werden)
formdata Event feuert (kann FormData modifizieren)
FormData wird serialisiert (application/x-www-form-urlencoded oder multipart/form-data)
HTTP Request wird gesendet (bei action != "")
Response wird geladen (Seite navigiert oder fetch)

6. Button/Input Type Behavior

<input type="submit"> - Submit-Trigger
<input type="reset"> - Reset-Trigger
<input type="button"> - Noop
<button type="submit"> vs <button type="button">
form Attribut auf Button/Input (form-Attribut, nicht nur Parent-Form)

Labels

feature, html-spec

Architektur

src/dom/forms.ts (neu) - FormData, FormSubmission, FormEncoding
HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement in html-elements/forms.ts
Submit-Event-Pipeline in runtime-isolation oder forms/module
Constraint Validation: simple Regeln, kein echtes Pattern-Matching fuer Crawling noetig

Tests

FormData CRUD
form.submit() fuehrt durch Event-Pipeline
requestSubmit() feuert formdata event
Constraint Validation returns spec-defaults
Alle 11 bisher failenden Tests muessen green werden

## Gap Form submission ist eine unserer groessten Luecken. 11 Tests failen aktuell wegen Form-Action/SubmitEvent-Problemen. Fuer korrekte Webseiten-Interaktion brauchen wir die volle Forms API. ## Was fehlt ### 1. FormData (vollstaendig) - `FormData` Konstruktor: FormData(form) - initialisiert aus Form-Elementen - `.append(name, value)` / `.append(name, blob, filename)` - `.delete(name)` - `.get(name)` / `.getAll(name)` - `.has(name)` - `.set(name, value)` - `.entries()` / `.keys()` / `.values()` / `[Symbol.iterator]()` - `.forEach()` ### 2. HTMLFormElement (vollstaendig) - `.elements` - HTMLFormControlsCollection (lebt, aktualisiert bei DOM-Aenderungen) - `.length` - Anzahl Controls - `.name` / `.method` / `.action` / `.enctype` / `.target` / `.acceptCharset` - `.submit()` - Programmgesteuerter Submit - `.requestSubmit(submitter)` - Spec-konformer Submit (feuert submit event, formdata event) - `.reset()` - Reset auf default values - `.checkValidity()` / `.reportValidity()` - Constraint Validation - `.novalidate` / `.encoding` ### 3. HTMLInputElement (Form-relevante Properties) - `.form` - Assoziiertes Form (readonly, live) - `.value` / `.defaultValue` / `.valueAsDate` / `.valueAsNumber` - `.checked` / `.defaultChecked` / `.indeterminate` - `.name` / `.type` / `.accept` / `.multiple` / `.files` - `.validity` / `.validationMessage` / `.willValidate` - `.setCustomValidity(message)` - `.step` / `.stepUp()` / `.stepDown()` / `.min` / `.max` - `.selectionStart` / `.selectionEnd` / `.selectionDirection` - `.select()` / `.setRangeText()` / `.setSelectionRange()` - `.labels` - Assoziierte Label-Elemente ### 4. Constraint Validation API - `ValidityState` Interface: valueMissing, typeMismatch, patternMismatch, tooLong, tooShort, rangeUnderflow, rangeOverflow, stepMismatch, badInput, customError, valid - `.checkValidity()` auf form/input/select/textarea/button/fieldset - `.reportValidity()` - wie checkValidity + feuert invalid event - `invalid` Event ### 5. Submit-Event Pipeline 1. User klickt Submit-Button (oder JS ruft .requestSubmit() auf) 2. `submit` Event feuert auf form (kann preventDefault() werden) 3. `formdata` Event feuert (kann FormData modifizieren) 4. FormData wird serialisiert (application/x-www-form-urlencoded oder multipart/form-data) 5. HTTP Request wird gesendet (bei action != "") 6. Response wird geladen (Seite navigiert oder fetch) ### 6. Button/Input Type Behavior - `<input type="submit">` - Submit-Trigger - `<input type="reset">` - Reset-Trigger - `<input type="button">` - Noop - `<button type="submit">` vs `<button type="button">` - `form` Attribut auf Button/Input (form-Attribut, nicht nur Parent-Form) ## Labels feature, html-spec ## Architektur - src/dom/forms.ts (neu) - FormData, FormSubmission, FormEncoding - HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement in html-elements/forms.ts - Submit-Event-Pipeline in runtime-isolation oder forms/module - Constraint Validation: simple Regeln, kein echtes Pattern-Matching fuer Crawling noetig ## Tests - FormData CRUD - form.submit() fuehrt durch Event-Pipeline - requestSubmit() feuert formdata event - Constraint Validation returns spec-defaults - Alle 11 bisher failenden Tests muessen green werden

Artur added the

feature

html-spec

labels

2026-06-20 08:19:57 +00:00