Contact Form with Draft Saving
This form demonstrates html★'s persistence feature. As you type, your input is automatically saved to localStorage. Try filling in some fields, then refresh the page — your draft will still be there!
html★ Features Used
data-target="#contact-result"— Specifies where to inject the server responsedata-disable— Disables the form during submission to prevent double-submitdata-persist="key"— Auto-saves input values to localStorage under the given key
Newsletter Subscription
A minimal inline form showing how html★ handles simple form submissions. The response replaces the content inside the output element.
html★ Features Used
data-target="#subscribe-result"— Target element for the responsedata-swap="inner"— Replace innerHTML (default behavior)
How Form Handling Works
html★ intercepts form submissions and converts them to AJAX requests. The response HTML is injected into the target element, enabling partial page updates without full reloads.
Key Concepts
- Progressive Enhancement — Forms work without JavaScript; html★ enhances them
- URL Inference — The form's
actionattribute becomes the request URL - Method Inference — The form's
methodattribute sets GET or POST - Loading States — The
[data-loading]attribute is added during requests