Repository: sveltejs/kit (js)

Issue:
Automatically reset form with use:enhance
### Describe the bug

> Without an argument, ```use:enhance``` will emulate the browser-native behaviour, just without the full-page reloads.

Native browser behaviour clears form inputs after submit (or rather the associated page reload does that).

The progressively enhanced forms do not. This would require resetting the form in the enhance callback. This works:
```js
<form
	method="post"
	action="?/doSomething"
	use:enhance={({ form }) => {
		return async ({ update }) => {
			form.reset();
			await update();
		};
	}}
>
```

But is still a hassle.

### Reproduction

This applies to all SvelteKit installs.

### Logs

_No response_

### System Info

```shell
System:
    OS: macOS 12.6
    CPU: (10) arm64 Apple M1 Pro
    Memory: 7.58 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.9.0 - ~/.nvm/versions/node/v18.9.0/bin/node
    npm: 8.19.1 - ~/.nvm/versions/node/v18.9.0/bin/npm
  Browsers:
    Chrome: 105.0.5195.125
    Firefox: 105.0.1
    Safari: 16.0
  npmPackages:
    @sveltejs/adapter-auto: ^1.0.0-next.76 => 1.0.0-next.80 
    @sveltejs/adapter-node: ^1.0.0-next.96 => 1.0.0-next.96 
    @sveltejs/adapter-vercel: ^1.0.0-next.77 => 1.0.0-next.77 
    @sveltejs/kit: ^1.0.0-next.489 => 1.0.0-next.507 
    svelte: ^3.50.1 => 3.50.1 
    vite: ^3.1.4 => 3.1.4
```


### Severity

annoyance

### Additional Information

_No response_

Pull request:
[fix] reset form in use:enhance after successful submit
Fixes #7163

### Please don't delete this checklist! Before submitting the PR, please make sure you do the following:
- [x] It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
- [x] This message body should clearly illustrate what problems it solves.
- [x] Ideally, include a test that fails without this PR but passes with it.

### Tests
- [x] Run the tests with `pnpm test` and lint the project with `pnpm lint` and `pnpm check`

### Changesets
- [x] If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running `pnpm changeset` and following the prompts. All changesets should be `patch` until SvelteKit 1.0


Patch:
diff --git a/.changeset/rotten-trees-brush.md b/.changeset/rotten-trees-brush.md
new file mode 100644
index 000000000..5265a930e
--- /dev/null
+++ b/.changeset/rotten-trees-brush.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+[fix] reset form in use:enhance after successful submit
diff --git a/.changeset/rude-berries-rush.md b/.changeset/rude-berries-rush.md
new file mode 100644
index 000000000..c0ef80487
--- /dev/null
+++ b/.changeset/rude-berries-rush.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/amp': patch
+---
+
+Amend boilerplate to match current recommendations
diff --git a/documentation/docs/06-form-actions.md b/documentation/docs/06-form-actions.md
index d87effa24..401e09f14 100644
--- a/documentation/docs/06-form-actions.md
+++ b/documentation/docs/06-form-actions.md
@@ -134,7 +134,7 @@ export const actions = {
 
 #### Validation errors
 
-If the request couldn't be processed because of invalid data, you can return validation errors — along with the previously submitted form values — back to the user so that they can try again. The `invalid` function lets you return an HTTP status code (typically 400, in the case of validation errors) along with the data:
+If the request couldn't be processed because of invalid data, you can return validation errors — along with the previously submitted form values — back to the user so that they can try again. The `invalid` function lets you return an HTTP status code (typically 400 or 422, in the case of validation errors) along with the data:
 
 ```diff
 // @errors: 2339 2304
@@ -366,4 +366,4 @@ const response = await fetch(this.action, {
 
 ### Alternatives
 
-Form actions are the preferred way to send data to the server, since they can be progressively enhanced, but you can also use [`+server.js`](/docs/routing#server) files to expose (for example) a JSON API.
\ No newline at end of file
+Form actions are the preferred way to send data to the server, since they can be progressively enhanced, but you can also use [`+server.js`](/docs/routing#server) files to expose (for example) a JSON API.
diff --git a/packages/amp/index.js b/packages/amp/index.js
index 5b54cb891..41fb0c55a 100644
--- a/packages/amp/index.js
+++ b/packages/amp/index.js
@@ -1,8 +1,8 @@
 // https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/
 const boilerplate = `
-	<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
-	<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
+	<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js" />
 	<script async src="https://cdn.ampproject.org/v0.js"></script>
+	<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
 `;
 
 /** @param {string} html */
diff --git a/packages/kit/src/runtime/app/forms.js b/packages/kit/src/runtime/app/forms.js
index b77770b96..4a93d633d 100644
--- a/packages/kit/src/runtime/app/forms.js
+++ b/packages/kit/src/runtime/app/forms.js
@@ -25,6 +25,7 @@ export function enhance(form, submit = () => {}) {
 	 */
 	const fallback_callback = async ({ action, result }) => {
 		if (result.type === 'success') {
+			form.reset();
 			await invalidateAll();
 		}
 


Test patch:
diff --git a/packages/kit/test/apps/basics/test/test.js b/packages/kit/test/apps/basics/test/test.js
index 4522ee30b..e563c01ca 100644
--- a/packages/kit/test/apps/basics/test/test.js
+++ b/packages/kit/test/apps/basics/test/test.js
@@ -1873,6 +1873,7 @@ test.describe('Actions', () => {
 
 		await expect(page.locator('pre.formdata1')).toHaveText(JSON.stringify({ result: 'foo' }));
 		await expect(page.locator('pre.formdata2')).toHaveText(JSON.stringify({ result: 'foo' }));
+		await expect(page.locator('input[name=username]')).toHaveValue('');
 	});
 
 	test('use:enhance abort controller', async ({ page, javaScriptEnabled }) => {