html表单提交后跳转页面
时间: 2023-08-16 07:05:21 浏览: 48
当HTML表单提交后,可以通过设置表单的 "action" 属性,来指定表单提交的URL地址。例如:
```
<form action="http://example.com/submit" method="post">
...
</form>
```
上面的代码表示,当表单提交时,会将表单数据POST到 "http://example.com/submit" 这个URL地址。
当表单提交后,浏览器会自动跳转到指定的URL地址,如果需要在提交后停留在当前页面,可以在表单中添加 "target" 属性,例如:
```
<form action="http://example.com/submit" method="post" target="_self">
...
</form>
```
上面的代码表示,当表单提交时,会将表单数据POST到 "http://example.com/submit" 这个URL地址,但是在提交后会停留在当前页面。
相关问题
html提交表单跳转新页面
在 HTML 中,可以使用 `<form>` 元素来创建一个表单,并通过设置 `action` 属性来指定表单提交后跳转的页面。以下是一个简单的示例:
```html
<form action="new_page.html" method="post">
<!-- 表单内容 -->
<input type="text" name="username" placeholder="用户名" />
<input type="password" name="password" placeholder="密码" />
<!-- 提交按钮 -->
<input type="submit" value="提交" />
</form>
```
在上面的示例中,当用户点击提交按钮时,表单数据将被发送到 `new_page.html` 页面。你可以根据实际情况将 `new_page.html` 替换为你希望跳转的页面的 URL。
注意,`method` 属性被设置为 `post`,这意味着表单数据将通过 POST 方法发送到目标页面。如果你希望使用 GET 方法,可以将 `method` 属性设置为 `get`。
另外,如果你不想让表单提交后跳转到新页面,而是在当前页面进行处理,可以在 `action` 属性中设置为一个空值或者使用 JavaScript 来处理表单提交操作。
表单提交后跳转新页面并刷新
要实现表单提交后跳转到新页面并刷新,你可以在表单的提交事件中添加相关代码。以下是一个示例:
```html
<!-- 表单页面 -->
<form id="myForm" action="submit.php" method="post">
<!-- 表单内容 -->
<input type="text" name="name" placeholder="姓名">
<input type="email" name="email" placeholder="邮箱">
<button type="submit">提交</button>
</form>
<script>
document.getElementById("myForm").addEventListener("submit", function() {
// 在表单提交时执行以下代码
// 这里可以添加一些数据验证的逻辑
// 刷新页面
location.reload();
});
</script>
```
在这个示例中,我们给表单元素添加了一个 id 属性为 "myForm",然后通过 JavaScript 获取到该表单元素,并为它的提交事件添加了一个监听器。当用户点击提交按钮时,监听器会执行相关的代码。
在代码中,你可以添加一些数据验证的逻辑,确保用户输入的数据符合要求。然后,通过 `location.reload()` 方法刷新页面,这将导致页面跳转到新页面并刷新。
请注意,这只是一个简单示例,实际应用中你可能需要更多的逻辑处理和页面跳转方式。