form 表单中 disabled 属性的元素不参与表单提交
2018-01-26 本文已影响0人
低至一折起
示例代码:
<form id="saveForm">
<input id="saveForm-age" name="age" disabled="disabled" />
<input id="saveForm-age" name="age" disabled="true" />
</form>
当上述两种写法出现时,表单提交的数据中,将不包括 age
这个属性,这是因为 input
被设置为了 disabled
。
若想将 age
属性随 form
表单提交,个人推荐解决办法是不设置 disabled
,改为 readonly
,具体参照 W3C 的规范。
input 设置 disabled 和 readonly 的区别
disabled 的限制:
- 不能接收焦点
- 使用 tab 键时将被跳过
- 可能不是 successful 的
readonly 的限制:
- 可以接收焦点但不能被修改
- 可以使用 tab 键进行导航
- 可能是 successful 的
只有 successful 的表单元素才是有效数据,也即是可以进行提交。
disabled
和readonly
的文本输入框只能通过脚本进行修改value
属性。
disabled 和 readonly 两个 HTML 属性的区别
-
readonly
是要锁定这个控件,通过在界面上无法修改他(但是通过javascript
可以修改它)。 -
disabled
和readonly
有相同的地方也是可以锁定这个控件用户不能改变他的值,但是disabled
的更彻底一些,这是要使控件完全不能使用,彻底失效,包括改变它的背景颜色(不信,你去修改一个被disabled
掉的input
文本框,发现这是徒劳的),如果是checkbox
则不能选中它。 -
所有控件都有
disabled
属性,但是不一定有readonly
属性,如select
下拉框。