表单元素 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元素只是一个数据获取元素的容器, ...
随机推荐
- 在linux使用锐捷客户端上网(华中科技大学)
第一步:下载锐捷客户端linux版本,下载网址为http://ncc.hust.edu.cn/cyxz/rzkhd.htm 第二步:解压该包,进入目录 #unzip RG_Supplicant_For ...
- WPF中的线程使用
原文:WPF中的线程使用 简介 但凡涉及到图形界面,往往的设计都是不支持或者不推荐使用多个线程操作界面内容.而且通常会有一个专门的线程调度器来处理任务线程和界面线程的问题.下面提供两个两个方案. 使用 ...
- KMP python实现
首先去 https://blog.csdn.net/starstar1992/article/details/54913261/ 这里看下思想: 然后代码实现,一定要多调试几遍方能看懂: def ge ...
- 活动的生命周期 Android
1.运行程序 onCreate().onStart()和 onResume() 2.跳转到非弹框视图控制器 onPause()和 onStop() 返回上一个视图控制器(没被回收) onRestart ...
- Java Web前后端分离的思考与实践
第一节 Java Web开发方式的变化 Web开发虽然是我们常说的B/S模式,其实本质上也是一种特殊的C/S模式,只不过C和S的选择余地相对要窄了不少,而且更标准化.不论是采用什么浏览器和后端框架,W ...
- React切换显示和隐藏
1 {radioChange >= 0 && 2 <div> 3 {radioChange === 0 ? ( 4 <div className={style. ...
- 安装QC的心(新)路历程 纯记录 无技术
之前就只是看来软件测试原书第二版学习力理论知识,关于书中提到的缺陷管理工具,测试管理工具等也没有亲自去安装使用,感觉太不应该了.于是我就上网了解了一些测试管理工具后,决定先选择QC来学习.说实话,当初 ...
- flask中static_folder与static_url_path的区别与联系
# -*- coding:utf-8 -*- from flask import Flask, url_for app1 = Flask(__name__, static_folder='mystat ...
- JavaScript调试中Console命令
JS调试中,用console.log 感觉比 alert 好用,不用弹出窗口,还要关闭.除了console.log()其他命令没怎么用过,先在这里记一下,用到时在看看 一.显示信息的命令 consol ...
- 官方文档 恢复备份指南八 RMAN Backup Concepts
本章内容 Consistent and Inconsistent RMAN Backups Online Backups and Backup Mode Backup Sets Image Copie ...