在HTML中,action是用于指定在提交表单时将数据发送到的目标位置的属性。它通常与元素一起使用。action属性的值是一个URL,可以是相对路径或绝对路径。当用户提交表单时,浏览器将将表单数据发送到action属性所指定的URL。这通常是一个服务器端的脚本文件或处理表单数据的URL。
![html中action的用法](/d/file/2023090112/html5232122-6.webp)
在 HTML 中,action 是 元素的属性之一,用于指定在提交表单时将数据发送到的目标位置。action属性的值是一个 URL,可以是相对路径或绝对路径,action属性有以下几种常见的用法。
1、提交表单到服务器端脚本:当用户点击提交按钮时,表单数据将被发送到指定的 URL。通常,服务器端脚本会接收这些数据并进行处理,例如将数据存储到数据库、发送电子邮件等。
<form action="/submit-form" method="POST"> <!-- 表单字段 --> <input type="text" name="name"> <input type="email" name="email"> <button type="submit">提交</button></form>
上述示例中的表单数据将被提交到相对路径为 “/submit-form” 的 URL 上,并使用 POST 方法发送。
2、跳转到其他页面:action 属性可以用于指定用户提交表单后要跳转的页面。在这种情况下,可以使用 GET 方法或不指定 method 属性。
<form action="/thank-you.html"> <!-- 表单字段 --> <input type="text" name="name"> <input type="email" name="email"> <button type="submit">提交</button></form>
上述示例中的表单数据将被提交到相对路径为 “/thank-you.html” 的页面,然后浏览器将跳转到该页面显示感谢消息或其他内容。
3、JavaScript 函数调用:action 属性可以指定一个 JavaScript 函数,在提交表单时会调用该函数进行处理。这种情况下,需要使用 JavaScript 来处理表单数据。
<script> function handleSubmit(event) { event.preventDefault(); // 处理表单数据 // ... }</script><form action="javascript:void(0)" onsubmit="handleSubmit(event)"> <!-- 表单字段 --> <input type="text" name="name"> <input type="email" name="email"> <button type="submit">提交</button></form>
上述示例中的表单数据将被传递给JavaScript函数handleSubmit进行处理,而不会向服务器发送数据。
这些是action属性的常见用法,根据具体需求,可以根据这些用法进行调整和扩展。