程序员

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 的限制:

  1. 不能接收焦点
  2. 使用 tab 键时将被跳过
  3. 可能不是 successful 的

readonly 的限制:

  1. 可以接收焦点但不能被修改
  2. 可以使用 tab 键进行导航
  3. 可能是 successful 的

只有 successful 的表单元素才是有效数据,也即是可以进行提交。disabledreadonly 的文本输入框只能通过脚本进行修改 value 属性。

disabled 和 readonly 两个 HTML 属性的区别

  1. readonly 是要锁定这个控件,通过在界面上无法修改他(但是通过 javascript 可以修改它)。

  2. disabledreadonly 有相同的地方也是可以锁定这个控件用户不能改变他的值,但是 disabled 的更彻底一些,这是要使控件完全不能使用,彻底失效,包括改变它的背景颜色(不信,你去修改一个被 disabled 掉的 input 文本框,发现这是徒劳的),如果是 checkbox 则不能选中它。

  3. 所有控件都有 disabled 属性,但是不一定有 readonly 属性,如 select 下拉框。

上一篇下一篇

猜你喜欢

热点阅读