`

关于html表单元素的readonly和disabled属性

阅读更多

    readonly属性规定输入字段为只读。只读字段是不能修改的。不过,用户仍然可以使用tab键切换到该字段,还可以选中或拷贝其文本。readonly只对text、password以及textarea有效。将其设置在select、radio、checkbox等表单元素上不会起效果,用户仍然可以更改表单元素选中的值。

 

    readonly只用于阻止用户修改表单元素的值,并不会在提交表单时阻止表单元素的提交。disabled属性表示禁用该表单元素。被禁用的表单元素既不可用,也不可点击,不可接收焦点,也无法选中其中的文本内容。该属性对text、password、textarea、select、radio、checkbox、hidden、option等表单元素都有效。disabled属性不仅会阻止用户操作该元素,并且在提交表单时会阻止该表单元素的提交。例如:

 

<input name="test" type="text" disabled="disabled" value="hello"/>

     由于该表单元素test具备disabled属性,在提交表单时,该表单元素不会跟随表单一起提交,因此我们在后台服务器接收到的请求中不会包含名称为test的参数。

 

 

属性名称 针对元素 只读 可获得焦点 跟随表单提交
readonly 仅text、password和textarea元素
disabled 所有<input>、 <button>、 <select>、
<optgroup>、 <option>、 <textarea>标签


 

 

 

.

分享到:
评论

相关推荐

    html表单属性readonly和disabled的使用方法

    这时,`readonly` 和 `disabled` 这两个属性就显得尤为重要。 1. **只读属性(readonly)** - `readonly` 属性用于设置表单元素为只读状态。这意味着用户可以看到元素中的文本,但不能修改它。当用户尝试改变只读...

    Readonly和Disabled的区别

    Readonly和Disabled是HTML表单中的两个重要的属性,它们都可以限制用户对表单元素的交互操作。尽管它们有共同的功能,即防止表单数据被修改,但它们之间存在着本质的区别。 首先,Readonly属性主要应用于input元素...

    表单元素属性readonly和disabled使用对比

    1)适应范围: readonly:input[type="text"],input[type="password"],input[type="teaxtarea"] disabled:所有的表单元素,如select, radio, checkbox, button等 2)操作: readonly:不允许用户修改操作,不影响...

    表单中Readonly和Disabled的区别详解

    在HTML表单中,`readonly` 和 `disabled` 是两个重要的属性,它们都可以用来限制用户对表单元素的交互,但它们之间的区别在于作用范围、提交表单时的行为以及用户体验等方面。 首先,`readonly` 属性主要用于`...

    readonly和disabled属性的区别

    1.readonly属性只对表单元素的文本框、密码框和多行文本框有效,而disabled属性对所有的表单元素都会有效。 2.设置两个属性的外观不一样,这个自己可以观察一下。 3.设置readonly的表单元素value值依然会被提交,而...

    jquery设置元素的readonly和disabled的写法

    总结一下,jQuery 提供了灵活的方式来处理 `input` 元素的 `readonly` 和 `disabled` 属性,允许开发者根据业务场景动态改变这些状态。在实际开发中,确保理解这些属性的区别及其对用户体验的影响至关重要。

    怎样通过disabled和readonly将input设置为只读效果.docx

    Disabled 属性会使 Input 元素的值无法被传递给服务器端程序,而 Readonly 属性则不会影响其值的传递。 因此,在实际开发中,需要根据具体情况选择合适的方法来实现 Input 只读效果。如果需要使 Input 元素的值无法...

    readonly和disabled的区别

    在网页表单设计中,`readonly` 和 `disabled` 是两个非常常见的属性,它们都用于限制用户对输入字段的编辑,但它们之间存在着显著的区别。理解这些差异对于创建功能完整且用户体验良好的表单至关重要。 首先,`...

    jquery批量设置属性readonly和disabled的方法

    例如,某些情况下我们希望用户不能修改表单的输入值,或是整个表单暂时不可交互,这时就需要用到readonly和disabled属性。本文将详细介绍如何使用jQuery库来批量设置input元素的readonly和disabled属性。 ### 使用...

    浅谈html中input只读属性readonly和disable的区别

    HTML中的`readonly`和`disabled`属性都是用来限制用户对表单元素的交互,但它们在实际应用中具有不同的效果和使用场景。 首先,`readonly`属性主要用于`&lt;input&gt;`(如`text`、`password`)和`&lt;textarea&gt;`元素。它...

    Readonly和Disabled之间的微小区别详解

    首先,我们要明确的是,readonly和disabled属性都可以防止用户更改表单中的内容。然而,readonly是针对输入框(text/password)和文本区域(textarea)设计的,这些元素的值在表单提交时会被包含在数据中并发送到服务器...

    html表单控件禁用属性readonly VS disabled介绍

    在html中有两种禁用表单提交的方法,他们分别是:  1.给控件标签加\u4e0areadonly='readonly'属性  2.给控件标签加\u4e0adisabled='disabled'属性  例如:  &lt;input type=text value= readonly=readonly /&gt;...

    javascript中input中readonly和disabled区别介绍

    在JavaScript中,`readonly`和`disabled`是两个用于HTML表单中控制用户交互的属性。它们虽然都能防止用户修改表单元素的内容,但具体的行为和影响却有所不同。 `readonly`属性主要应用于`&lt;input&gt;`(如`type="text"`...

    html form表单input使用disabled后提交不能获取表单值的解决方法

    form表单输入框input设置disable属性提交后,得不到该输入框的值,解决该类问题可以参考下面两个方法: 方法一: 使用readonly带替代disabled,即把 ...disabled和readonly的文本输入框只能通过脚本进

Global site tag (gtag.js) - Google Analytics