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

  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. Spring Boot 2.0 新特性和发展方向

    以Java 8 为基准 Spring Boot 2.0 要求Java 版本必须8以上, Java 6 和 7 不再支持. 内嵌容器包结构调整 为了支持reactive使用场景,内嵌的容器包结构被重构了 ...

  2. spring BeanFactory VS FactoryBean

    一.FactoryBean示例 public class DateStringFactoryBean implements FactoryBean<Object> { private bo ...

  3. 20.0-uC/OS-III移植

    1.CPU移植要求: 1) 处理器有对应的能产生可重入代码的C编译器2) 处理器支持中断且能提供周期性的中断(通常介于10到1000Hz之间). 3) 可以关中断和开中断4) 处理器支持存储和载入堆栈 ...

  4. 接口测试工具-Jmeter使用笔记(六:从文本读取参数)

    使用场景:测试一个接口并发处理数据的能力,并且每次请求传入的参数都要不同. 解决方法--- CSV Data Set Config 列举一个实例,步骤中会侧重读取参数操作的说明,其他有疑问的步骤请查阅 ...

  5. java框架之SpringCloud(1)-微服务及SpringCloud介绍

    微服务概述 是什么 业界大牛 Martin Fowler 这样描述微服务: 参考[微服务(Microservices)-微服务原作者Martin Flower博客翻译]. 下面是关于上述博客中的部分重 ...

  6. python框架之Flask(4)-上下文管理

    知识储备 偏函数 作用 偏函数,帮助开发者自动传递参数. 使用 import functools def index(a1, a2): return a1 + a2 # 原来的调用方式 # ret = ...

  7. CentOS6.10安装redis5.0

    1.以安装redis5.0.0为例 下载安装包:http://redis.io 安装非常简单! [root@centos6 ~]#yum install gcc #需要先安装GCC,如果已安装请忽略 ...

  8. python常用函数总结

    原文地址https://www.cnblogs.com/nice107/p/8118876.html 我们在学习python的时候,接触最多的往往则是那些函数,对于python函数,在这里为大家总结归 ...

  9. [渣译文] 使用 MVC 5 的 EF6 Code First 入门 系列:建立一个EF数据模型

    英文渣水平,大伙凑合着看吧…… 这是微软官方教程Getting Started with Entity Framework 6 Code First using MVC 5 系列的翻译,这里是第一篇: ...

  10. CentOS 7 服务端口表

    # Note that it is presently the policy of IANA to assign a single well-known# port number for both T ...