html form标签的action属性是什么意思？又有哪些用法？（附实例）

本篇文章主要的介绍HTML form表单标签的action属性的用法，用法介绍和实例等都在里面，现在让我们一起来看吧

首先我们先来介绍一下关于HTML form标签的action属性的意思：

form标签的action属性是一个表单当中必须的属性，action属性规定当提交表单时，向何处发送表单数据。

先看个第一个关于form标签action属性的实例：

下面的表单拥有两个输入字段以及一个提交按钮，当提交表单时，表单数据会提交到名为 “form_action.asp” 的页面：

<form action="form_action.asp" method="get">

<p>输入用户名: <input type="text" name="fname" /></p>

<p>再输用户名: <input type="text" name="lname" /></p>

<input type="submit" value="提交" />

</form>

这个的效果图在下方：

效果很明显，基本上每个表单都需要action属性。

现在说说form标签action属性的用法介绍：

form表单中的action属性的值是表单提交给的url，如果我们没有设置action属性，那么默认的表单还是提交给当前页面，以下是action属性的三种用法介绍：

action=""和action="#"、没有action属性的作用相同，都是提交到当前页面(也就是document.location.href)

action="[http://currentPage.xxx](https://links.jianshu.com/go?to=https%3A%2F%2Flink.zhihu.com%2F%3Ftarget%3Dhttp%253A%2F%2FcurrentPage.xxx)"如果[http://currentPage.xxx](https://links.jianshu.com/go?to=https%3A%2F%2Flink.zhihu.com%2F%3Ftarget%3Dhttp%253A%2F%2FcurrentPage.xxx)表示当前页面，则提交到当前页面，同事跳转到当前页面，当然就看不到url的变化；如果[http://currentPage.xxx](https://links.jianshu.com/go?to=https%3A%2F%2Flink.zhihu.com%2F%3Ftarget%3Dhttp%253A%2F%2FcurrentPage.xxx)是非当前页面，则提交到非当前页面，也跳转到非当前页面

表单提交到自身时 action=""与action="[http://currentPage.xxx](https://links.jianshu.com/go?to=https%3A%2F%2Flink.zhihu.com%2F%3Ftarget%3Dhttp%253A%2F%2FcurrentPage.xxx)"的区别：

通常为了省事,我们一般将表单的action属性设为action=""/action="#"或者干脆不写,但是这会造成一个问题,就是其实将action设为action=""时 , 表单提交时真正提交的页面是action="currentPage.xxx?arguments=values&….",也就是如果当前页面带有参数,参数也一并会提交,而且参数的优先级会高于<form>控件提交的参数，即如果action="currentPage.xxx?arguments=values&…."中的arguments有与<form>元素名相同的时候,获取值时action=”currentPage.xxx?arguments=values&….”值会将<form>的值覆盖，从页得到不正确的值.

例:SpecTop.asp 页面是表单要提交的页面,且有从上级页面传递过来参数

action=""真正提交时的页面:SpecTop.asp?ClassID=000100200005&SpeID=947&SpeType=3

如果<form>中有<input type=”text” name=”SpeID” value=”1000”/>,提交时得到的值将会是947,而不是1000,而action=”currentPage.xxx”就能得到1000

好了，以上就是关于HTML form标签的action属性的全部介绍了

专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（网页制作，网站开发，web开发，从0基础开始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移动端HTML5的项目实战【视频＋工具＋系统路线图】全栈工程师学习路线以及规划都有整理，分享给小伙伴）点：学习前端，我们是认真的