HTML中Readonly和Disabled的区别

最新推荐文章于 2020-12-23 22:37:05 发布
原创 最新推荐文章于 2020-12-23 22:37:05 发布 · 227 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#HTML #JavaScript #Blog #ViewUI

本文详细对比了HTML中ReadOnly和Disabled属性的功能与应用场景。ReadOnly适用于限制输入框内容修改但仍需提交的情况；Disabled则广泛用于所有表单元素，阻止用户更改且不参与提交。
ReadOnly和Disabled的作用是使用户不能够更改表单域中的内容，但是二者还是有着一些区别的：
1、Readonly只针对input(text/password)和textarea有效，而disabled对于所有的表单元素有效，包括select，radio,checkbox,button等。
在表单元素使用了disabled后，我们将表单以POST或者GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去

常用情况：
1、在某个表单中为用户预填了某个唯一识别代码，不允许用户改动，但是在提交时需要传递该值，此时将属性设置为readonly
2、当用户正式提交了表单后需要等待管理员的信息验证，不允许用户再更改表单中的数据，而是只能够查看，由于disabled的作用元素范围大，所以此时应该使用disabled，但同时应该注意的是要将submit button也disabled掉，否则只要用户按了这个按钮，如果在数据库操作页面中没有做完整性检测的话，数据库中的值会被清除。
3、在用户按了提交按钮后，利用javascript将提交按钮disabled掉，可防止在网络条件比较差的环境下，用户反复点击提交按钮导致数据冗余地存入数据库

摘自：
[url]http://hi.baidu.com/zidone/blog/item/78ae2cdd91fb06d88d10295e.html[/url]
Readonly和Disabled的区别
12-12
总结如下： Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去(这种情况出现在我们将某个表单中的textarea元素设置为disabled或readonly，但是submit button却是可以使用的)。 一般比较常用的情况是： ①在某个表单中为用户预填了某个唯一识别代码，不允许用户改动，但是在
readonly和disabled的区别
09-06
要慎用readonly和disabled, 指定了disabled的表单,在submit时,不会把它的值传出去, 如下所示,有两个text,一个是readonly一个是disabled,submit后,只能发送那个不是disabled的,注意地址栏的值. 要保存到本地,因为submit了,不然,看不到效果.
html input readonly 和 disable的区别
weixin_33853827的博客
03-30 575
Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：      Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会...
表单中Readonly和Disabled的区别
aokf71635的博客
12-29 180
1、readonly是要锁定这个控件，通过在界面上无法修改他（但是通过javascript可以修改他）。 2、disabled和readonly有相同的地方也是可以锁定这个控件用户不能改变他的值，但是disabled的更彻底一些，他是要使你完全不能使用他，包括改变他的背景颜色，如果是checkbox则不能选中他。 3、所有控件都有disabled 属性，但是不一定有readonly属...
表单中Readonly和Disabled的区别详解
10-24
在HTML表单中，`readonly` 和 `disabled` 是两个重要的属性，它们都可以用来限制用户对表单元素的交互，但它们之间的区别在于作用范围、提交表单时的行为以及用户体验等方面。 首先，`readonly` 属性主要用于`...
javascript中input中readonly和disabled区别介绍
11-30
在JavaScript中，`readonly`和`disabled`是两个用于HTML表单中控制用户交互的属性。它们虽然都能防止用户修改表单元素的内容，但具体的行为和影响却有所不同。 `readonly`属性主要应用于`<input>`（如`type="text"`...
html表单属性readonly和disabled的使用方法
09-28
两者之间的关键区别在于，`readonly`字段在提交表单时仍会传递其值，而`disabled`字段则不会。此外，`readonly`字段保持可点击和高亮状态，用户可以选中，而`disabled`字段则完全不可选中，视觉上表现出被禁用的状态...
css readonly和disabled的区别
qq_47776536的博客
12-23 8566
一、两者的联系 1、两个属性都可以作用于input等表单元素上，都使得元素成为“不可用”的状态； 2、两者的字面意义： （1）readonly表示“只读”，一般表示对于文字内容只读，即不可更改内容，对于非文字的表单“只读”与“不只读”似乎没有啥区别； （2）disabled表示“使残废，使无效”，都残废了，不管是什么内容，都是无效的。 二、两者的区别： 1、readonly和disabled作用元素的范围不同： 由上图可见，readonly并没有对input[type=“button”]产生作用，按钮效果
只读（Readonly）与禁用（Disable）的区别与使用
热门推荐
weixin_44544716的博客
01-19 2万+
作者：吴晓佩 撰写时间：2019年1月18日 区别： （1） 表面上可看到的区别就是当这两个词都设置为true时，都为禁用状态，当鼠标移上时使用disable的相关控件时鼠标出现禁用样式，并且不可做任何操作，而Readonly还可以获取文本框里的焦点。 （2） Disable比readonly的使用范围比广，适用文本框、文本域、下拉框、button按钮、单选框…….而readonly只适用于inp...
readonly 和 disable的区别
漂浮
09-15 950
Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：      Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonl
readonly和disable的区别
dehunying8835的博客
11-22 204
<form action="a.php" method="get"><input type="text" value="readonly_" readonly /><input type="text" value="disabled_" disabled /><input type="submit"/></form> ...
表单元素中Readonly和Disable的区别
WannaRunning的博客
05-04 584
Readonly只针对input(text/ password)和textarea有效，而disabled对于所有的表单元素都有效，包括select,radio, checkbox, button等。但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去。而readonly会将该值传递出去，这种情况出现在我们将某个表单中的textarea元...
除了readonly和disabled，还有什么属性
最新发布
07-23
### HTML input 元素的其他属性 除了 `readonly` 和 `disabled` 之外，HTML 的 `<input>` 元素还提供了许多其他属性，用于控制输入框的行为和外观。以下是一些常用的属性及其用途： #### `type` `type` 属性定义了输入框的类型，常见的值包括 `text`、`number`、`password`、`email`、`date` 等。不同类型的输入框适用于不同的数据输入场景。 ```html <input type="text" name="username" placeholder="请输入用户名"> <input type="password" name="password" placeholder="请输入密码"> ``` #### `value` `value` 属性用于设置输入框的默认值。当用户未输入内容时，该属性定义的内容将显示在输入框中。 ```html <input type="text" name="username" value="defaultUser"> ``` #### `placeholder` `placeholder` 属性提供了一个提示信息，当输入框为空时，会显示该提示内容。它通常用于指导用户输入正确的数据。 ```html <input type="text" name="username" placeholder="请输入用户名"> ``` #### `required` `required` 属性用于指定输入框不能为空。在表单提交时，如果输入框为空，浏览器会提示用户输入内容。 ```html <input type="text" name="username" required> ``` #### `min` 和 `max` `min` 和 `max` 属性用于限制输入框的最小值和最大值。它们通常与 `type="number"` 或 `type="date"` 一起使用。 ```html <input type="number" name="age" min="18" max="99"> ``` #### `step` `step` 属性定义了输入框的步长值，通常与 `type="number"` 一起使用。它控制输入框中数值的递增或递减步长。 ```html <input type="number" name="quantity" min="0" max="10" step="2"> ``` #### `pattern` `pattern` 属性用于指定输入框内容的正则表达式规则。在表单提交时，输入内容必须符合该规则，否则会提示错误。 ```html <input type="text" name="username" pattern="[A-Za-z]{3,10}" title="用户名必须为3-10个字母"> ``` #### `autocomplete` `autocomplete` 属性用于控制输入框是否启用自动填充功能。常见的值包括 `on` 和 `off`。 ```html <input type="text" name="username" autocomplete="on"> ``` #### `autofocus` `autofocus` 属性用于指定页面加载时，输入框是否自动获得焦点。 ```html <input type="text" name="username" autofocus> ``` #### `maxlength` `maxlength` 属性用于限制输入框中允许输入的最大字符数。 ```html <input type="text" name="username" maxlength="10"> ``` #### `size` `size` 属性用于定义输入框的可见宽度（以字符数为单位）。 ```html <input type="text" name="username" size="30"> ``` #### `list` `list` 属性用于关联 `<input>` 元素和 `<datalist>` 元素，提供一个下拉列表供用户选择。 ```html <input type="text" name="browser" list="browsers"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> </datalist> ``` #### `multiple` `multiple` 属性允许用户在单个输入框中输入多个值，通常与 `type="email"` 或 `type="file"` 一起使用。 ```html <input type="email" name="emails" multiple> ``` #### `name` 和 `id` `name` 和 `id` 属性用于标识输入框，在表单提交或 JavaScript 操作中非常有用。 ```html <input type="text" name="username" id="username"> ``` #### `class` 和 `style` `class` 和 `style` 属性用于为输入框应用 CSS 样式。 ```html <input type="text" name="username" class="form-control" style="width: 200px;"> ``` ### 总结 HTML 的 `<input>` 元素提供了丰富的属性，用于控制输入框的行为、外观和交互。通过合理使用这些属性，可以满足各种表单输入需求。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值