前端之 form 详解
卜飞鸣
认识表单
- 在一个页面上可以有多个form表单，但是向web服务器提交表单的时候，一次只可以提交一个表单。
- 要声明一个表单，只需要使用 form 标记来标明表单的开始和结束，若需要向服务器提交数据，则在form标签中需要设置action属性（用来设置提交表单的位置）、method属性（用来定义浏览器将表单中的信息提交给服务器端程序的处理方式）、target属性（用来指定服务器返回结果所显示的目标窗口或目标框架）；但是，对于客户端脚本编程来说，并不需要这些属性来帮助提交表单信息，form标签存在的意义是在于方便在脚本中编程的时候进行引用。
- 表单的引用可以利用from标签的name属性或者也可以利用document的forms[]数组中调用到对应的数组。
- 可以利用form表单的elements[]数组来遍历除了<input type=image >元素之外的所有元素
- form表单的submit()方法用于将表单提交给服务，但我们点击submit按钮的时候，submit按钮会相应的调用onsubmit事件处理器从而调用Form对象的submit事件
- 如何在浏览器中使用页面中的信息，我们称之为“客户端脚本编程”，而如何把信息提交给Web服务，并将数据库保存在数据库中，我们通常称为“服务器端脚本编程”
- 在早期，所有可交互的HTML元素都应该放在HTML表单中，但是现在的定义是，需要提交到web服务器的数据，才必须要放在表单内，可是前一种理解的方式也不是完全错误的，因为一般可以交互的HTML元素，都是表单元素（在前期），即：浏览器需要处理的数据都是表单元素，因此需要将其放在HTML表单中。
认识表单元素
- 大部分的表单控件元素都是由<input>标记创建的，<input>标记具有一个type属性，该属性决定了<input>标记所创建的表单控件的类型。
- 所有的单控件对象都具有一个 nam e属性，JavaScript 脚本通过 name 属性的值来引用特定的表单控件元素，同时这也是表单提交到服务器时，每个表单控件元素的值 value 所对应的 key 值。
- 绝大部分对象都具有 value 属性，该属性返回当前表单控件的值。
- 所有的表单控件对象都具有一个 form 属性，该属性返回包含当前控件的 Form 对象。对于一个通用的表单数据检查程序来说，用这个属性来标明哪些控件属于哪个表单。
- 所有的表单元素对象都具有focus()和blur()方法，同时所有的表单元素对象还具有onfocus和onblur事件处理器。
表单元素的分类
常见的表单控件有：
1、Text Input Elements:<input type="text"> 、<input type="password">、<textarea></textarea>
2、Tick Box Elements:<input type="checkbox"> 、<input type="radio">
3、Select Elements:<select size=1><option></option></select>、<select size=5 multiple><option></option></select>（下拉大框、多选）
4、Button:<input type="button">、<input type="submit">、<input type="reset">
表单form属性
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
input
<input type=""> 元素会根据不同的 type 属性，变化为多种形态。
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框 | <input type="password" /> |
| date | 日期输入框 | <input type="date" /> |
| checkbox | 复选框 | 我喜欢自行车：<input type="checkbox" name="Bike"> 备注：name 可以不同 |
| radio | 单选框 | 男性：<input type="radio" checked="checked" name="Sex" value="male" /> 备注：name 必须一样 |
| submit | 提交按钮 | <input type="submit" value="提交" /> |
| reset | 重置按钮 | <input type="reset" value="重置" /> |
| button | 普通按钮 | <input type="button" value="普通按钮" /> |
| hidden | 隐藏输入框 | <input type="hidden" /> |
| file | 文本选择框 | <input type="file" method='post' enctype='multipart/form-data' /> |
属性说明
- name：表单提交时的“键”，注意和id的区别
- value：表单提交时对应项的值
- type 是 "button", "reset", "submit"时，为按钮上显示的文本内容
- type 是 "text","password","hidden"时，为输入框的初始值
- type 是 "checkbox", "radio", "file"，为输入相关联的值
- checked：radio和checkbox默认被选中的项
- readonly：text和password设置只读
- disabled：所有input均适用
select标签
<form action="" method="post">
<select name="city" id="city" multiple=true>
<option value="1">北京</option>
<option selected="selected" value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</form>属性说明
- multiple：布尔属性，设置后为多选，否则默认单选
- disabled：禁用
- selected：默认选中该项
- value：定义提交时的选项值
label标签
定义：
<label> 标签为 input 元素定义标注（标记）。
说明：
- label 元素不会向用户呈现任何特殊效果。
- <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form action="">
<label for="username">用户名</label>
<input type="text" id="username" name="username">
</form>
// 也可以写成这样
<form>
<input type='text' id='username' name='username'>
</form>textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10">默认内容</textarea>属性说明
- name：名称
- rows：行数
- cols：列数
- disabled：禁用
jQuery 操作 from
input 的文本框
// 获取值
$("#txt").attr("value")；
$("#txt").val()
// 设置值
$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');//填充内容input 的多选框 checkbox
// 获取值
$("#chk1").attr("value")；
// 设置值，所有的jquery版本都可以这样赋值
$("#chk1").attr("checked",''); //不打勾
$('#chk1').attr("checked", false); //不打勾
$("#chk2").attr("checked",true); //打勾
$("#chk2").attr("checked","checked"); //打勾
// 设置值，jquery1.6+:prop的4种赋值，强推下列的赋值方法，prop()函数的结果:匹配到的是属性；attr()函数的结果:匹配到的是属性值；
$("#cb1″).prop("checked",true);
$("#cb1″).prop("checked",false);
$("#cb1″).prop({checked:true});
$("#cb1″).prop({checked:false});
// 判断是否已经打勾
if ($("#chk1").attr('checked')==undefined){} //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
if ($("#chk1").is(':checked')){} //所有版本:true/false//别忘记冒号哦
if ($("#chk1").get(0).checked) {}
if ($("#chk1")[0].checked) {}
if ($('#chk1').prop('checked')) {} //16+:true/false
//设置checkbox为禁用状态(jquery<1.6用attr,jquery>=1.6建议用prop)
$("input[type='checkbox']").attr("disabled", "disabled");//or
$("input[type='checkbox']").attr("disabled", true);//or
$("input[type='checkbox']").prop("disabled", true);//or
$("input[type='checkbox']").prop("disabled", "disabled");
//设置checkbox为启用状态(jquery<1.6用attr,jquery>=1.6建议用prop)
$("input[type='checkbox']").removeAttr("disabled");//or
$("input[type='checkbox']").attr("disabled", false);//or
$("input[type='checkbox']").prop("disabled", "");//or
$("input[type='checkbox']").prop("disabled", false);input 的单选框 radio
//获取radio被选中项的值
$('input:radio:checked').val()；
$("input[type='radio']:checked").val();
$("input[name='items']:checked").val();
$(“input[@name=items]：checked”).val();
$("input[@type=radio][@checked]").val();
// radio单选组的第二个元素为当前选中值
$('input:radio').eq(索引值).attr('checked', 'true');索引值=0,1,2....
$('input:radio').slice(1,2).attr('checked', 'true');
$('input[@name=items]').get(1).checked = true;
//设置value=2的项目为当前选中项
$("input[@type=radio]").attr("checked",'2');
$("input:radio[value=http://www.2cto.com/kf/201110/'rd2']").attr('checked','true');
$("input[value=http://www.2cto.com/kf/201110/'rd2']").attr('checked','true');
// 设置第一个Radio为选中值：
$('input:radio:first').attr('checked', 'checked');
$('input:radio:first').attr('checked', 'true');
$('input:radio:first').attr('checked', true);
注：attr("checked",'checked')= attr("checked", 'true')= attr("checked", true)
// 删除Value值为rd2的Radio
$("input:radio[value=http://www.2cto.com/kf/201110/'rd2']").remove();
// 删除第几个Radio
$("input:radio").eq(索引值).remove();索引值=0,1,2....
// 如删除第3个Radio:
$("input:radio").eq(2).remove();
//遍历Radio
$('input:radio').each(function(index,domEle){
//写入代码
});
select 标签
// 获取选中项
$('#sel option:selected').val();
$('select#sel').find('option:selected').val();
// 获取选中项的Text值：
$('select#seloption:selected').text();
$('select#sel').find('option:selected').text();
$("select[@name=items] option[@selected]").text();
// 设置第一个option为选中值：
$('select#sel option:first').attr('selected','true')
$('select#sel')[0].selectedIndex = 0;
$("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
$("<optionvalue='1'>1111</option><optionvalue='2'>2222</option>")
.appendTo("#sel")//添加下拉框的option
$("#sel").empty()；//清空下拉框
// 获取当前选中项的索引值：
$('select#sel').get(0).selectedIndex;
// 获取当前option的最大索引值：
$('select#sel option:last').attr("index")
// 获取DropdownList的长度：
$('select#sel')[0].options.length;
$('select#sel').get(0).options.length;
类似资料：