时候我们会希望表单上的控件是不可修改的,比如在修改密码的网页中,显示用户名的文本框就应该是不可修改状态的,下面与大家分享下禁用表中控件的两种方法

在网页的制作过程中,我们会经常使用到表单。但是有时候我们会希望表单上的控件是不可修改的,比如在修改密码的网页中,显示用户名的文本框就应该是不可修改状态的。

在html中有两种禁用的方法,他们分别是:

1.给控件标签加上readonly='readonly'属性
2.给控件标签加上disabled='disabled'属性

举例:

复制代码

代码如下:

<input type="text" value="只读的" readonly="readonly" />
<input type="text" value="不可用的" disabled="disabled" />

举例中的两个控件都是不可修改的。但是他们也有一些区别!

从字面意思我们可以知道,试用readonly属性的控件是"只读"的,而试用disabled是"被禁用"的。那么他们的区别是什么呢?

只读的控件(使用了readonly属性的控件)是用户不可以用鼠标和键盘修改其值的,但是程序员可以用javascript来修改,当提交表单的时候这个控件的名和值会提交到服务器,也就是说对服务器是可见的。

而被禁用的控件(使用了disabled属性的控件)不但用户不可以用鼠标和键盘修改,而且是对服务器不可见的,即提交表单的时候其名和值不会提交到服务器,当然,程序员也可以用javascript来修改其值。

这就是他们的区别,知道了区别之后咱们就应该知道什么时候使用哪种方法了,切不可盲目!

HTML中禁用表单控件的两种方法readonly与disabled的更多相关文章

  1. Excel中的表单控件和active控件

    EXCEL中有两种控件:表单控件和active控件 表单控件是excel5和excel95开始使用的,从excel97开始,active控件开始出现 关于表单控件和active控件的区别和使用范围,网 ...

  2. struts中jsp表单控件命名注意

    在jsp页面中写了这样的一个表单控件 <td>维修任务码</td><td><input type="text" id="mTas ...

  3. asp.net.mvc 中form表单提交控制器的2种方法和控制器接收页面提交数据的4种方法

    MVC中表单form是怎样提交? 控制器Controller是怎样接收的? 1..cshtml 页面form提交 (1)普通方式的的提交

  4. bootstrap学习之利用CSS属性pointer-events禁用表单控件

    参考链接: CSS3 pointer-events:none应用举例及扩展 首先pointer-events在除去SVG中的应用只有两个值:AUTO | NONE pointer-events:non ...

  5. Jsp页面中使用fckeditor控件的两种方法 [转]

    fckeditor控件请到官方网站下载http://www.fckeditor.net,本例主要用到FCKeditor_2.6.3.zip.fckeditor-java-demo-2.4.1.zip. ...

  6. ios 中在容器中移除单个控件的两个方法Subview

    我们知道[parentView removeFromSuperView];  会把全部的view都移除.以下我们可以通过给subView设一个tag,然后遍历所有的subView,找到目标subVie ...

  7. js防止表单重复提交的两种方法

    第一种:用flag标识,下面的代码设置checkSubmitFlg标志: 复制代码代码如下: <script language=""javascript"" ...

  8. Angular 从入坑到挖坑 - 表单控件概览

    一.Overview angular 入坑记录的笔记第三篇,介绍 angular 中表单控件的相关概念,了解如何在 angular 中创建一个表单,以及如何针对表单控件进行数据校验. 对应官方文档地址 ...

  9. 基于Extjs的web表单设计器 第二节——表单控件设计

    这一节介绍表单设计器的常用控件的设计. 在前面两章节的附图中我已经给出了表单控件的两大分类:区域控件.常用控件.这里对每个分类以及分类所包含的控件的作用进行一一的介绍,因为它们很重要,是表单设计器的基 ...

随机推荐

  1. hdu5432 二分

    Pyramid Split Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tot ...

  2. 我的c++学习(8)运算符重载和友元

    运算符的重载,实际是一种特殊的函数重载,必须定义一个函数,并告诉C++编译器,当遇到该运算符时就调用此函数来行使运算符功能.这个函数叫做运算符重载函数(常为类的成员函数). 方法与解释 ◆ 1.定义运 ...

  3. 我的c++学习(1)hello world!

    // texthello.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> using na ...

  4. soapui中文操作手册(一)----创建一个新的项目

    1) 创建一个新的项目 点击项目,选择新建项目SOAP.这将打开一个新的SOAP项目对话框. 注意:你也可以做CTRL + N(WIN)或CMD+ N(MAC)来创建一个新的SOAP项目. 在新的SO ...

  5. OpenResty 平滑升级

    1.先去下载新版,当前最新版为“ngx_openresty-1.7.0.1” 2.开始升级 tar zxvf ngx_openresty-1.7.0.1.tar.gz cd ngx_openresty ...

  6. Leetcode Median of Two Sorted Arrays

    There are two sorted arrays A and B of size m and n respectively. Find the median of the two sorted ...

  7. ACM: 强化训练-Inversion Sequence-线段树 or STL·vector

    Inversion Sequence Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%lld & %llu D ...

  8. HDU 4749 Parade Show(贪心+kmp)

    题目链接 题目都看不懂,做毛线...看懂了之后就是kmp出,所有的匹配区间,然后DP可以写,贪心也可以做把,DP应该需要优化一下,直接贪,也应该对的,经典贪心问题. #include<iostr ...

  9. 【异常】java.lang.NoClassDefFoundError: com/lowagie/text/pdf/PdfContentByte

    异常信息:   java.lang.NoClassDefFoundError: com/lowagie/text/pdf/PdfContentByte  at com.star.sms.busines ...

  10. 获取UILabel宽度的方法

    - (CGFloat)labelLength:(NSString *)str font:(CGFloat)font{ str = ISSTRING(str) ? str : @"" ...