首先这两种属性都会使显示出来的文本框不能输入。

  disabled 属性:规定禁用 input 元素。被禁用的 input 元素既不可用,也不可点击和编辑,使用 tab 键时将会被跳过,用户的所有操作对该输入项都无效。会使文本框变灰。

  此属性对所有的表单元素都有效,但是表单元素在使用了 disabled 后,当我们将表单以 POST 或 GET 的方式提交的话,这个表单元素值不会被提取,也不会被提交。

注意:disabled 属性无法与 <input type="hidden"> 一起使用。

  readonly 属性:规定输入字段为只读。此时我们不能编辑对应的文本,但可以聚焦焦点或使用 tab 键切换到该字段,还可以选中或拷贝其文本。外观没有变化。

  只对文本输入框有效 ( input: text / password  和 textarea )。表单元素的 value 值仍能提取,在提交表单的时候,也会被提交。

常用情况:

  1. 某个表单不允许用户改动,但是在提交时需要传递该值,此时应该将它的属性设置为 readonly 。
  2. 在用户点击提交按钮后,防止用户反复点击提交按钮导致数据重复多次存入数据库,可以利用 js 将按钮 disabled。

input 标签的 disabled 和 readonly 属性的更多相关文章

  1. HTML input 标签不可编辑的 readonly 属性

    1 <form action="form_action.asp" method="get"> Name:<input type="t ...

  2. input文本框禁止修改文本——disabled和readonly属性的作用及区别

    1.input文本框禁止修改文本 disabled属性:<input type="text" name="name" value="xxx&qu ...

  3. input中的disabled 和 readonly的区别

    1.Readonly只针对input(text / password)和textarea有效, 而disabled对于所有的表单元素都有效, 2.但是表单元素在使用了disabled后,当我们将表单以 ...

  4. input中的disabled、readonly和hidden

    最近开发项目的时候,遇到一个问题,就是我希望某个input中的值不能被修改,刚开始的时候,我想到的是disabled属性!但是,发现表单提交后,值无法传递过来! 解决方法: 可以设置其readonly ...

  5. Angular学习笔记 ——input 标签上的【name属性】和【ngModelOptions属性】

    利用“@angular/forms" 创建<form>表单的时候,系统默认会创建一个”FormGroup"的对象. 使用带有“ngModel"的”<in ...

  6. selenium 获取页面<input>标签的个数和各个属性的值

    获取页面某个标签的数量.id.name.class的值,来辅助定位         List<WebElement> lw =driver.findElements(By.tagName( ...

  7. easyui input设置为disabled提交后获取不到属性值

    在做网站管理后台的用户修改功能时,由于当前用户修改个人信息时规定用户名不能修改,故使用了input标签的disabled属性,但是在提交数据后却发现用户名显示为空了.后 来一查才知道input设置为d ...

  8. 了解HTML表单之input元素的30个元素属性

    目录 传统属性 name type accept alt checked disabled readonly maxlength size src value 新增属性 autocomplete au ...

  9. mvc涉及到input设置了disabled

    在做网站管理后台的用户修改功能时,由于当前用户修改个人信息时规定用户名不能修改,故使用了input标签的disabled属性,但是在提交数据后却发现用户名显示为空了.后来一查才知道input设置为di ...

随机推荐

  1. ES6 函数

    函数参数的扩展 默认参数 基本用法 function fn(name,age=17){ console.log(name+","+age); } fn("Amy" ...

  2. 001-CPU多级缓存架构

    一.基本概念 大致关系: CPU Cache --> 前端总线 FSB (下图中的Bus) --> Memory 内存 CPU 为了更快的执行代码.于是当从内存中读取数据时,并不是只读自己 ...

  3. GIT仓库如何恢复到前一次提交

    GIT仓库如何恢复到前一次提交   通过使用Git版本恢复命令reset,可以回退版本.reset命令有3种方式: git reset –mixed:此为默认方式,不带任何参数的git reset,即 ...

  4. Redis入门到高可用(十八)—— 主从复制

    一.单机有什么问题 1.机器故障 2.容量瓶颈 3.QPS瓶颈 二.主从复制 1.数据副本(高可用.分布式基础) 2.拓展读性能(读写分离)  简单总结: 三.主从复制配置 四.主从复制配置-实验演示 ...

  5. JMeter上架标的(yyb-csg)

    yyb-csg 1.登录时一直提示用户名不能为空,可是明明已经传值了呀 解决:添加cookie管理器 2.怎么获取到待受理的项目, 在python脚本的实现过程中发现,在平台受理一步中传的lid值就是 ...

  6. 2018-2019-1 20189203《Linux内核原理与分析》第八周作业

    第一部分 课本学习 ELF文件(目标文件)格式主要三种: 1)可重定向文件:文件保存着代码和适当的数据,用来和其他的目标文件一起来创建一个可执行文件或者是一个共享目标文件.(目标文件或者静态库文件,即 ...

  7. python中列表中元素的增删改查

    增: append : 默认添加到列表的最后一个位置 insert : 可以通过下标添加到列表的任意位置 extend: a.extend[b] --将b列表的元素全加入到列表b中 删; remove ...

  8. matlab之导入txt文件并取其中一列数据

    1.我想导入下面这个文件的内容,并且获取这个文件中的两列数据. 2.首先确保Matlab当前所在文件夹为txt文件所在文件夹,然后命令行执行: X = load('2019_03_21_08_59_0 ...

  9. nginx根据CPU配置多线程运行

    转自:Nginx使用教程(二):Nginx配置性能优化之worker配置 配置Nginx workers <br\>NGINX根据指定的配置运行固定数量的工作进程. 这些工作进程负责处理所 ...

  10. scanperiod 不生效

    注意:要改 target 目录下的,真正运行时加载的 logback-spring.xml