在JS中修改form的action属性

本文探讨了HTML表单中如何通过JavaScript修改表单的action属性,并提供了具体实现方法及示例代码。介绍了一种利用form对象的attributes属性来设置表单提交地址的技术。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

[quote]转载于:http://topic.youkuaiyun.com/t/20020801/13/916158.html [/quote]

如:
<form   action="test12.asp"   method="get"   onsubmit="_submit()"   name='frm'>   

<INPUT type="text" id=text1 name=action>
<INPUT type="submit" value="Submit" id=submit1 name=submit1>
</form>

<script>
function _submit(){
frm.action.value="ddddddddd"
}
</script>


[color=darkred]这段代码执行的结果将会是input名为action的值,而不是form的action属性值。[/color]
[color=green]此情况下如仍要使用,可使用attributes [/color]
即:
[quote]frm.attributes[83].value="test2.asp" [/quote]

至于83如何得到,可用以下程序获取:
  for(i=0;i<frm.attributes.length;i++){   
document.write(frm.attributes[i].name+"-------Index:"+i+"<br>");
}


结果:
[list]
[*]language-------Index:0
[*] dataFld-------Index:1
[*] onmouseup-------Index:2
[*] class-------Index:3
[*] oncontextmenu-------Index:4
[*] onrowexit-------Index:5
[*] onbeforepaste-------Index:6
[*] onactivate-------Index:7
[*] lang-------Index:8
[*] onmousemove-------Index:9
[*] onmove-------Index:10
[*] onselectstart-------Index:11
[*] oncontrolselect-------Index:12
[*] onkeypress-------Index:13
[*] oncut-------Index:14
[*] onrowenter-------Index:15
[*] onmousedown-------Index:16
[*] onpaste-------Index:17
[*] id-------Index:18
[*] onreadystatechange-------Index:19
[*] onbeforedeactivate-------Index:20
[*] hideFocus-------Index:21
[*] dir-------Index:22
[*] onkeydown-------Index:23
[*] onlosecapture-------Index:24
[*] ondrag-------Index:25
[*] ondragstart-------Index:26
[*] oncellchange-------Index:27
[*] onfilterchange-------Index:28
[*] onrowsinserted-------Index:29
[*] ondatasetcomplete-------Index:30
[*] onmousewheel-------Index:31
[*] ondragenter-------Index:32
[*] onblur-------Index:33
[*] onresizeend-------Index:34
[*] onerrorupdate-------Index:35
[*] onbeforecopy-------Index:36
[*] ondblclick-------Index:37
[*] onkeyup-------Index:38
[*] onresizestart-------Index:39
[*] onmouseover-------Index:40
[*] onmouseleave-------Index:41
[*] onmoveend-------Index:42
[*] title-------Index:43
[*] onresize-------Index:44
[*] contentEditable-------Index:45
[*] dataFormatAs-------Index:46
[*] ondrop-------Index:47
[*] onpage-------Index:48
[*] onrowsdelete-------Index:49
[*] style-------Index:50
[*] onfocusout-------Index:51
[*] ondatasetchanged-------Index:52
[*] ondeactivate-------Index:53
[*] onpropertychange-------Index:54
[*] ondragover-------Index:55
[*] onhelp-------Index:56
[*] ondragend-------Index:57
[*] onbeforeeditfocus-------Index:58
[*] disabled-------Index:59
[*] onfocus-------Index:60
[*] accessKey-------Index:61
[*] onscroll-------Index:62
[*] onbeforeactivate-------Index:63
[*] onbeforecut-------Index:64
[*] dataSrc-------Index:65
[*] onclick-------Index:66
[*] oncopy-------Index:67
[*] onfocusin-------Index:68
[*] tabIndex-------Index:69
[*] onbeforeupdate-------Index:70
[*] ondataavailable-------Index:71
[*] onmovestart-------Index:72
[*] onmouseout-------Index:73
[*] onmouseenter-------Index:74
[*] onlayoutcomplete-------Index:75
[*] implementation-------Index:76
[*] onafterupdate-------Index:77
[*] ondragleave-------Index:78
[*] name-------Index:79
[*] onreset-------Index:80
[*] accept-charset-------Index:81
[*] onsubmit-------Index:82
[*] action-------Index:83
[*] method-------Index:84
[*] target-------Index:85
[*] encType-------Index:86
[/list]
<think>我们正在讨论HTML form标签的action属性。根据引用内容,action属性用于指定表单数据提交的URL。以下是对其作用的详细解释: 1. **基本作用**:action属性定义了当用户提交表单时,数据将被发送到哪个URL进行处理。这通常是一个服务器端脚本(如PHP、Python或Java Servlet)的地址,用于处理表单数据[^1][^4]。 2. **默认行为**:如果未设置action属性,表单默认将数据提交到当前页面的URL(即刷新当前页面)[^2]。 3. **特殊值**: - `action=""` 和 `action="#"` 的效果相同,都表示提交到当前页面[^2]。 - 也可以指定一个具体的URL,如`action="login"`(相对路径)或`action="https://example.com/login"`(绝对路径)[^4]。 4. **与method属性配合**:action通常与method属性(如GET或POST)一起使用,以确定如何发送数据[^1][^3]。 5. **HTML5扩展**:在HTML5中,表单控件可以脱离`<form>`标签,只需通过`form`属性关联到表单的id(如`<input ... form="myform">`),此时action属性仍然作用于整个表单[^3]。 **示例代码**: ```html <!-- 提交到当前页面 --> <form action="#" method="post"> 用户名: <input type="text" name="username"> <input type="submit"> </form> <!-- 提交到相对路径“/login” --> <form action="/login" method="post"> <!-- 表单控件 --> </form> <!-- HTML5:控件在表单外部 --> <form action="/submit" method="post" id="myform"></form> <input type="email" name="email" form="myform"> ``` **注意事项**: - 使用GET方法时,表单数据会附加在action的URL后(如`/login?username=abc`),适合非敏感数据。 - 使用POST方法时,数据通过HTTP请求体发送,适合敏感信息或文件上传(需配合`enctype="multipart/form-data"`)[^3][^4]。 综上所述,**action属性的核心作用是定义表单数据的接收地址**,控制数据在服务器端的处理入口。 §§相关问题§§ 1. 如何动态修改表单的action属性(例如通过JavaScript)? 2. 表单提交后如何防止页面刷新(使用AJAX)? 3. HTML5中还有哪些新的表单属性和功能?</think>### HTML form标签的`action`属性的作用详解 `action`属性HTML表单中最核心的属性之一,它定义了表单数据提交的目标地址。以下是其详细作用说明: #### 1. **核心功能:数据提交目标** - **定义表单数据接收端** 指定表单数据提交后由哪个服务器端程序处理,值可以是绝对路径或相对路径: ```html <!-- 提交到当前服务器的/login路径 --> <form action="/login" method="post">...</form> <!-- 提交到外部API --> <form action="https://api.example.com/submit">...</form> ``` - **默认行为** 未设置时表单提交到当前页面URL(相当于`action=""`或`action="#"`)[^2] #### 2. **与HTTP方法的配合** - **GET请求**(默认) 数据附加在URL后(`?name=value&...`),适合非敏感数据: ```html <!-- 提交后URL变为:/search?keyword=HTML --> <form action="/search" method="get"> <input type="text" name="keyword"> </form> ``` - **POST请求** 数据通过HTTP请求体发送,适合敏感信息或文件上传: ```html <form action="/register" method="post" enctype="multipart/form-data"> <input type="file" name="avatar"> </form> ``` #### 3. **特殊场景处理** - **锚点跳转** `action="#section"`可使提交后页面跳转到指定锚点: ```html <form action="#result"> <!-- 提交后跳转到页面id="result"的元素处 --> </form> ``` - **HTML5扩展** 支持跨表单控件关联(通过`form="form-id"`): ```html <form action="/save" id="main-form"></form> <!-- 脱离form标签的控件仍可提交到main-form --> <input type="text" name="email" form="main-form"> ``` #### 4. **实际应用注意事项** - **路径解析规则** - 相对路径:基于当前页面URL解析(`action="login"` → `当前页路径/login`) - 绝对路径:从根目录开始(`action="/api/submit"`) - **安全实践** 涉及敏感操作(如支付)时,务必使用HTTPS: ```html <!-- 安全示例 --> <form action="https://example.com/payment" method="post">...</form> ``` - **动态修改** 可通过JavaScript在提交前动态修改: ```javascript document.querySelector("form").action = "/backup-path"; ``` > **总结**:`action`属性是表单的"目的地指令",控制数据提交位置,需与`method`、`enctype`配合使用以实现完整的数据传输逻辑[^1][^2][^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值