HTML 中按钮作为form表单元素提交特性两则 --- 参HTML考标准分析
相同name的submit 类型的input提交行为
描述
这种情况，
<input type="submit" name="ACTION" value="Apply"/>
<input type="submit" name="ACTION" value="Cancel"/>
其能够作为提交内容， 发送到服务器段的参数的按钮， 对应被点击激活的按钮。
这表示多个 同名的name， 一次提交只能激活一个。
例如点击了 apply， ACTION=Apply会被传送到服务器端。 这样服务器端就可以判断对于同样提交的一份数据，
需要执行什么样的操作， 是修改， 还是删除？
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>phpStudy 探针 2014 </title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<form method="post">
<textarea>
<?php
echo "IF_ACTION=" . $_POST['IF_ACTION'];
echo "data=" . $_POST['data'];
?>
</textarea>
<input type="text" name="data" value="data"/>
<input type="submit" name="IF_ACTION" value="Apply"/>
<input type="submit" name="IF_ACTION" value="Cancel"/>
</form>
</body>
</html>
标准解读
https://www.w3.org/TR/html4/interact/forms.html#current-value
见下面段落中（关于form表单中 successful control的定义），这一句：
If a form contains more than one submit button, only the activated submit button is successful.
所有的 提交按钮中， 只能被激活的那个按钮， 是successful的， 即可以提交到服务器端。
段落：
17.13.2 Successful controls
A successful control is "valid" for submission. Every successful control has its control name paired with its current value as part of the submitted form data set. A successful control must be defined within a FORM element and must have a control name.
However:
- Controls that are disabled cannot be successful.
- If a form contains more than one submit button, only the activated submit button is successful.
- All "on" checkboxes may be successful.
- For radio buttons that share the same value of the name attribute, only the "on" radio button may be successful.
- For menus, the control name is provided by a SELECT element and values are provided by OPTION elements. Only selected options may be successful. When no options are selected, the control is not successful and neither the name nor any values are submitted to the server when the form is submitted.
- The current value of a file select is a list of one or more file names. Upon submission of the form, the contents of each file are submitted with the rest of the form data. The file contents are packaged according to the form's content type.
- The current value of an object control is determined by the object's implementation.
类型为 button 的 input为什么不能提交 ？
描述
如果有一个button类型的按钮存在与form中， 则form被提交， 其提交的参数中， 不会存在 这个按钮的 name 和 value。
如下代码： pushbutton 在请求的数据中不存在。
<form id="fileupload" name="fileupload" method="post" action="/index.php">
<input type="file" name="testfile" multiple="multiple"></br>
<input type="text" name="textinput" value="textinputvalue"></br>
<input type="button" name="pushbutton" value="pushbutton">
<input type="submit" name="submit" value="upload"></br>
</form>
Code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./jquery.js"></script>
<link rel="stylesheet" href="./test.css" />
</head>
<body>
<style>
</style>
<form id="fileupload" name="fileupload" method="post" action="/index.php">
<input type="file" name="testfile" multiple="multiple"></br>
<input type="text" name="textinput" value="textinputvalue"></br>
<input type="button" name="pushbutton" value="pushbutton">
<input type="submit" name="submit" value="upload"></br>
</form>
<script>
document.write("enctype="+document.getElementById("fileupload").getAttribute("enctype").toLowerCase());
</script>
</body>
</html>
标准分析
https://www.w3.org/TR/html401/interact/forms.html#buttons
标准对button的解释， 很清楚了， 包括三种类型：
1、 提交类型 ( 用于提交表单数据， 用户点击提交按钮 ， 或者光标表单内点击键盘的enter键盘 -- IE实现是第一个submit按钮提交被触发 )
2、 重置类型( reset button - 不用与后台交互， 就可以将页面控件的默认值， 现实出来， 即HTML value attribute的值。 )
3、 推送类型（push button - 不执提交和重置， 需要绑定js处理事件， 例如将表单参数校验成功后再提交form）
鉴于它的类型作用， 其确实没有必要提交， reset按钮也类似。
buttons Authors may create three types of buttons:
- submit buttons: When activated, a submit button submits a form. A form may contain more than one submit button.
- reset buttons: When activated, a reset button resets all controls to their initial values.
- push buttons: Push buttons have no default behavior. Each push button may have client-side scripts associated with the element's event attributes. When an event occurs (e.g., the user presses the button, releases it, etc.), the associated script is triggered.
Authors should specify the scripting language of a push button script through a default script declaration (with the META element).
Authors create buttons with the BUTTON element or the INPUT element. Please consult the definitions of these elements for details about specifying different button types.
Note. Authors should note that the BUTTON element offers richer rendering capabilities than the INPUT element.
HTML 中按钮作为form表单元素提交特性两则 --- 参HTML考标准分析的更多相关文章
- Form表单元素
Form表单元素 action method input: name value type: text password button radio checkbox file submit reset ...
- jQuery操作Form表单元素
Web开发中常常须要操作表单,form表单元素有select.checkbox.radio.textarea.button.file.text.hidden.password等. 当中checkbox ...
- 【jQuery】form表单元素序列化为json对象
序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head&g ...
- form表单 无法提交js动态添加的表单元素问题。。
第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url ...
- form表单元素的值序列化成对象
/** * 将form表单元素的值序列化成对象 * param: form jquery form对象 */ var serializeObject = function(form) { var o ...
- 将form表单元素的值序列化成对象
/**jQuery * 将form表单元素的值序列化成对象 * @returns object */ var serializeObject = function(form) { var o = {} ...
- form表单元素设置只读
form表单元素设置只读 CreateTime--2017年5月5日11:42:41 Author:Marydon 1.设置文本框只读 <!-- 方法一:简写 --> <inpu ...
- form表单的提交方式
开发中表单提交是很常见的,表单的提交方式也多种方式. 1.使用submit按钮提交表单 <input type="submit"/> <!DOCTYPE htm ...
- 使用ajax方法实现form表单的提交(附源码)
写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...
随机推荐
- 关于GC垃圾回收的原理
.NET Framework 并不需要担心垃圾回收.但我们还是需要了解它的原理.才能让我们写出更高效的应用程序. .Net Framework 有一个GC(垃圾回收器),它会自动的帮我们把不需要的数据 ...
- JS性能优化笔记搜索整理
通过网上查找资料了解关于性能优化方面的内容,现简单整理,仅供大家在优化的过程中参考使用,如有什么问题请及时提出,再做出相应的补充修改. 一. 让代码简洁:一些简略的表达方式也会产生很好的优化 eg:x ...
- Javascript 多浏览器兼容性问题及解决方案
一.document.formName.item(”itemName”) 问题 问题说明:IE下,可以使用 document.formName.item(”itemName”) 或 document. ...
- [深入浅出Windows 10]应用实战：Bing在线壁纸
本章介绍一个使用Bing搜索引擎背景图接口实现的一个应用——Bing在线壁纸,讲解如何使用网络的接口来实现一个壁纸下载,壁纸列表展示和网络请求封装的内容.通过该例子我们可以学习到如何使用网络编程的知识 ...
- 【BZOJ1051】1051: [HAOI2006]受欢迎的牛 tarjan求强连通分量+缩点
Description 每一头牛的愿望就是变成一头最受欢迎的牛.现在有N头牛,给你M对整数(A,B),表示牛A认为牛B受欢迎. 这种关系是具有传递性的,如果A认为B受欢迎,B认为C受欢迎,那么牛A也认 ...
- BZOJ3992: [SDOI2015]序列统计
Description 小C有一个集合S,里面的元素都是小于M的非负整数.他用程序编写了一个数列生成器,可以生成一个长度为N的数列,数列中的每个数都属于集合S. 小C用这个生成器生成了许多这样的数列. ...
- linux修改系统编码
Windows的默认编码为GBK,Linux的默认编码为UTF-8.在Windows下编辑的中文,在Linux下显示为乱码.一种方法是在windows进行转码,比如使用ue工具在文件-->转换 ...
- App如何适应 iPhone 5s/6/6 Plus 三种屏幕的尺寸？
来自//www.cocoachina.com/ 初代 iPhone 2007 年,初代 iPhone 发布,屏幕的宽高是 320 x 480 像素.下文也是按照宽度,高度的顺序排列.这个分辨率一直到 ...
- 去掉tppabs冗余代码，怎样批量去掉tppabs代码
去掉tppabs冗余代码,怎样批量去掉tppabs代码 刚用teleport pro拉了一个整站到本地 所有的超链都被强行加了一句tppabs=" 就玩了一把dw的替换功能 查找范围:整 ...
- Hibernate笔试总结
1．在Hibernate中,以下关于主键生成器说法错误的是(AC). A．increment可以用于类型为long.short或byte的主键. B．identity用于如SQL Server.DB2 ...