表单元素 disabled 和 readonly 辨析

正确答案: B D
分析:
Readonly 和 Disabled 是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别,总结如下:
1)Readonly只针对 input(text/password) 和 textarea 有效,而 disabled 对于所有的表单元素都有效,包括 select, radio, checkbox, button 等。
2)若输入项的 disabled 设为 true,则该表单输入项不能获取焦点,用户的所有操作(鼠标点击和键盘输入等)对该输入项都无效,最重要的一点是当提交表单时,这个表单输入项将不会被提交。
而 readonly 设为true,用户只是不能编辑对应的文本,但是仍然可以聚焦焦点,并且在提交表单的时候,该输入项会作为form的一项提交。
使用:
JS
document.getElementById("xxx").disabled=true;
document.getElementById(“xxx”).setAttribute(“disabled”,”true”);
jQuey
$("#xxx").attr({ "disabled": "disabled" });
$("#xxx").removeAttr("disabled");
常见场景:
- 在某个表单中为用户 预填 了某个唯一识别代码,不允许用户改动,但是在提交时需要传递该值,此时应该将它的属性设置为readonly 。
- 经常遇到当用户正式提交了表单后需要等待管理员的信息验证,这就不允许用户再更改表单中的数据,而是只能够查看,由于disabled的作用元素范围大,所以此时应该使用disabled,但同时应该注意的是要将 submit button 也 disabled 掉,否则只要用户按了这个按钮,如果在数据库操作页面中没有做完整性检测的话,数据库中的值就会被清除。如果说在这种情况下用 readonly 来代替 disabled 的话,若表单中只有 input (text/password) 和 textarea 元素,那还是可以的,如果存在其他发元素,比如select,用户可以在重新改写值后按回车键进行提交(回车是默认的submit触发按键)
- 我们常常在用户按了提交按钮后,利用 JS 将提交按钮 disabled 掉,这样可以防止网络条件比较差的环境下,用户反复点提交按钮导致数据冗余地存入数据库。
参考:html中input只读属性readonly 和 disable的区别
表单元素 disabled 和 readonly 辨析的更多相关文章
- 表单元素disabled禁用后不能自动提交到服务器
表单元素disabled禁用后不能自动提交到服务器,项目中需要一个元素只展示不修改,所以把一个input元素设置成了disabled="disabled",但是提交的时候改数据值是 ...
- form表单元素中disabled的元素的值不会提交到服务器
1.表单元素中disabled的元素的值不会提交到服务器,后台获取的值为null <form id="myForm" action="#" method= ...
- IOS-<input>表单元素只能读,设置readonly时光标仍然可见的解决办
在HTML中,如果把一个<input>的readonly属性设置为"readonly",表示这个表单元素不能编辑. 但是,鼠标点击之后,这个表单元素还是有光标存在的. ...
- 9月8日HTML表单元素(form、文本、按钮、选择)
表单元素 一.form form代表表单,功能:用于申明表单,定义采集数据的范围,也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里.<for ...
- HTML之表单元素
A.表单元素都是放在<form></form>标签内的.来看看表单的属性 属性 值 描述 accept MIME_type 规定通过文件上传来提交的文件的类型 accept- ...
- 第六十七节,html表单元素
html表单元素 学习要点: 1.表单元素总汇 2.表单元素解析 本章主要探讨HTML5中表单元素,表单元素用于获取用户的输入数据. 一.表单元素总汇 HTML5的表单中,提供了各种可供用户输入的 ...
- HTML 表单元素、 输入类型、Input 属性
<input> 元素 最重要的表单元素是 <input> 元素. <input> 元素根据不同的 type 属性,可以变化为多种形态. 注释:下一章讲解所有 HTM ...
- html5表单元素详解
表单是Html中获取用户输入的手段.此文对表单的元素进行了详细整理. 表单基本元素 form input button form元素 html4中,form元素相当于表单的外包装,其他都要在里面.ht ...
- HTML知识点总结之表单元素
网页不可能是纯静态的,没有任何的交互功能:绝大多数的网站都有表单元素的使用.表单提供了一个浏览者和网站交互的途径,比如用户注册登录,用户留言等功能. form form元素只是一个数据获取元素的容器, ...
随机推荐
- PHP.40-TP框架商城应用实例-后台15-商品属性与库存量1-不同商品(唯一属性、可选属性),属性类型
思路: 1.不同商品属于不同的类型,如:手机.服装.电脑等类型 2.不同的类型有不同的属性,其中分为唯一属性和可选属性,如服装:可选属性{尺寸:S,M,L……;颜色:白色,黑色……}唯一属性:材质 首 ...
- bootstrap重新设计checkbox样式
文章采集于: https://www.cnblogs.com/GumpYan/p/7845445.html#undefined 在原文基础上修改了勾勾的内容,直接采用bootstrap字体库.修改了横 ...
- 6 wireshark 安装使用 数据包抓取
1.wireshark安装 2.开始使用 3.界面详情 4. 数据包抓取 5.过滤数据
- Mac上配置Cocos2d-x开发环境(多平台:Android/iOS)
下载以下资源: Cocos2d-x (http://www.cocos2d-x.org) Android NDK(http://developer.android.com/tools/sdk/ndk/ ...
- Linux-Shell脚本编程-学习-3-Shell编程-shell脚本基本格式
前面两篇文章基本介绍了一部分linux下的基本命令,后面还需要大家自行了解下linux的文件系统的磁盘管理部分,这里就不在写了. 什么是shell编程,我也解释不来,什么是shell脚本了,我理解就是 ...
- Python简要标准库(5)
hashlib Python的hashlib提供了常见的摘要算法,如MD5,SHA1等等. 基本的生成MD密匙的函数 import hashlib md5 = hashlib.md5() md5.up ...
- create subnet
子网相关功能点: 模块 功能 描述 备注 子网 创建子网 创建一个子网 设置子网网段范围 设置子网网关IP/不开启网关 给子网开启/关闭dhcp 设置子网dns 修改子网 修改子网 ...
- Python 学习笔记之—— PIL 库
PIL,全称 Python Imaging Library,是 Python 平台一个功能非常强大而且简单易用的图像处理库.但是,由于 PIL 仅支持到Python 2.7,加上年久失修,于是一群志愿 ...
- Linux 简单socket实现UDP通信
服务器端 #include <stdio.h> #include <stdlib.h> #include <sys/types.h> #include <sy ...
- 并查集——poj1703(带权并查集入门)
传送门:Find them, Catch them 题意:警察抓获N个罪犯,这些罪犯只可能属于两个团伙中的一个,现在给出M个条件(D a b表示a和b不在同一团伙),对于每一个询问(A a b)确定a ...