html disabled 和readonly,disabled 引起的form表单提交问题

本文探讨了HTML表单中readonly与disabled属性的区别,包括它们如何影响用户交互及表单提交行为。disabled不仅禁止用户更改字段值,还使得这些字段在表单提交时不被发送。


先看看这两个属性在效果和使用上的区别

READONLY and DISABLED both remove the functionality of the input field, but to different degrees. READONLY locks the field: the user cannot change the value. DISABLED does the same thing but takes it further: the user cannot use the field in any way, not to highlight the text for copying, not to select the checkbox, not to submit the form. In fact, a disabled field is not even sent if the form is submitted.


对于diabled掉的form 表单,

<form id="product_form">
<fieldset id="static_fields" disabled="disabled">
<div class="form-group">
<label class="col-lg-2 control-label" for="product_name">产品名称</label>
<div class="input-group col-lg-6 ">
<input class="form-control static" id="product_name" name="projectName" title="" data-toggle="tooltip" data-placement="bottom" data-original-title="产品名称">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="capital">募集金额</label>
<div class="input-group col-lg-6 ">
<span class="input-group-addon"><i class="fa">¥</i></span>
<input type="number" min="1" max="100000000" class="form-control static" id="capital" title="" name="capital" data-toggle="tooltip" data-placement="bottom" data-original-title="募集金额">
<span class="input-group-addon"><span>.00</span></span>
</div>
</div>

</fieldset>

</form>

1,我们会发现 input 里的value 在调试时候不能像原来那样查看,必须去prpperties中去查看


2,用js 获取表单内容,会获取到空值,input的值也不会被传到服务器

var form = $('#product_form').serialize();
$.post(url, form, function(data) {
if (data && data.code) {
if (data.code == 0) {
console.log('goto product info page.');
// 刷新页面
alert('修改成功');
} else {
alert(data.message + "[" + data.code + "]");
}
} else {
alert("内部错误");
}
});

调试会发现 form="projectID=&projectName=&capital=" 类似的空值,

所以,我们必须在用js提交表单时候,主动将diabled属性去掉  $('#static_fields').removeAttr("disabled");


### 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>` 元素提供了丰富的属性,用于控制输入框的行为、外观交互。通过合理使用这些属性,可以满足各种表单输入需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值