Inline Forms

Based on a Twitter discussion about optimizing the performance of web apps, I implemented a very crude polyfill for an idea I recently had.

HTML forms support multiple target values, i.e. where should the result of submitting the form be displayed, but there is no value for of target for inline, that is, you submit the form and instead of the whole page refreshing the server returns HTML that takes the place of the Form contents.

The idea is that there would be a new target type for HTML Forms, an attribute of target=_inline would mean the that Form would be processed by the server and the contents of the Form would be replaced with the HTML returned by the server. That is, on submit the form values would be sent to the server, either POST or GET, and the response should be HTML that the browser will simply .innerHTML on the form that was submitted.

Code

Online Demo

Also huge props to the team behind the Cloud Run Button which made this insanely simple to deploy.