html怎么让重置禁用,css怎么禁用表单

css怎么禁用表单

我们经常会遇到需求，需要禁用div中或者form元素中一堆表单控件元素，如，，元素。下面介绍两种css设置禁用表单的方法。

1、设置pointer-events:none。例如：form {

pointer-events: none;

}

2、使用::before伪元素创建一个浮层该在所有的表单元素上，例如：form {

position: relative;

}

form::before {

content: '';

position: absolute;

z-index: 999;

left: 0; right: 0; top: 0; bottom: 0;

background-color: rgba(0,0,0,.001);

}

利用js来禁用表单

以上两个方法虽然可以让点击无效，但是并没有阻止键盘访问，也就是Tab键索引，或者回车都能触发表单行为，使用new FormData(form)也能获取表单控件值，并不是真正意义上禁用，问题很大。

那有没有什么简单方法轻松禁用所有表单元素呢？难道真要遍历所有的控件元素再设置[disabled]属性吗？

其实，要真正意义上禁用所有的表单元素很简单，嵌套在

元素中，然后设置元素disabled就可以了，代码示意如下：

表单标题

js代码：document.querySelector('fieldset ').setAttribute("disabled", "disabled");

更多CSS相关技术文章，请访问CSS3答疑栏目进行学习！