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

  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. caffe报错:cudnn.hpp:86] Check failed: status == CUDNN_STATUS_SUCCESS (3 vs. 0) CUDNN_STATUS_BAD_PARAM 原因

    在实际项目中出现的该问题,起初以为是cudnn版本的问题,后来才定位到在网络进行reshape操作的时候 input_layer->Reshape({(), input_layer->sh ...

  2. Oracle启动关闭

    启动: [oracle@oracleSigle ~]$ sqlplus / as sysdba   SQL*Plus: Release 11.2.0.1.0 Production on Wed Nov ...

  3. 32位ubuntu16.4编译android4.1.1

    安装所需库 sudo apt-get install build-essential sudo apt-get install make sudo apt-get install gcc sudo a ...

  4. fiddler学习总结--fiddler抓包篡改数据请求

    操作步骤: 步骤一.在fiddler的命令行中输入需要拦截的地址:bpu https://www.baidu.com 记得按一下回车键 步骤二.在百度搜索栏中,输入“火影忍者”,页面会一直处于加载的状 ...

  5. Android Studio 添加已经移除的Module

    Android Studio 删除Module时,需要先在Project Structure中点击“-”来移除,此时小手机图标消失,但是这个时候Module并没有在硬盘中删除,只是和这个Project ...

  6. EasyUI相关知识点整理

    EasyUI相关知识整理 EasyUI是一种基于jQuery.Angular..Vue和React的用户界面插件集合.easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能.也就 ...

  7. jquery单击事件的写法

    方式一: //点击要素,修改URL $(document).on('click',"#modUrlYs" ,function (){ //$("#modUrlYs&quo ...

  8. 51nod1432贪心

    n个人,已知每个人体重.独木舟承重固定,每只独木舟最多坐两个人,可以坐一个人或者两个人.显然要求总重量不超过独木舟承重,假设每个人体重也不超过独木舟承重,问最少需要几只独木舟? Input 第一行包含 ...

  9. laravel中empty(),is_null() 以及isEmpty()

    PHP中 empty() empty() 函数用于检查一个变量是否为空. if(empty($result->order)){ //操作 } is_null() is_null() 函数用于检测 ...

  10. mysql获取随机字符串和随机数的方法

    在我们开发的过程中,我们可能会需要在表中随机生成一些数据以供我们进行相应的测试. 就像我之前发的“mysql创建存储过程向数据表中加入规定条数的数据” 那么我们应该怎样生成随机的字符串和随机数字呢? ...