前端之 form 详解

认识表单

1. 在一个页面上可以有多个form表单，但是向web服务器提交表单的时候，一次只可以提交一个表单。
2. 要声明一个表单，只需要使用 form 标记来标明表单的开始和结束，若需要向服务器提交数据，则在form标签中需要设置action属性（用来设置提交表单的位置）、method属性（用来定义浏览器将表单中的信息提交给服务器端程序的处理方式）、target属性（用来指定服务器返回结果所显示的目标窗口或目标框架）；但是，对于客户端脚本编程来说，并不需要这些属性来帮助提交表单信息，form标签存在的意义是在于方便在脚本中编程的时候进行引用。
3. 表单的引用可以利用from标签的name属性或者也可以利用document的forms[]数组中调用到对应的数组。
4. 可以利用form表单的elements[]数组来遍历除了<input type=image >元素之外的所有元素
5. form表单的submit()方法用于将表单提交给服务，但我们点击submit按钮的时候，submit按钮会相应的调用onsubmit事件处理器从而调用Form对象的submit事件
6. 如何在浏览器中使用页面中的信息，我们称之为“客户端脚本编程”，而如何把信息提交给Web服务，并将数据库保存在数据库中，我们通常称为“服务器端脚本编程”
7. 在早期，所有可交互的HTML元素都应该放在HTML表单中，但是现在的定义是，需要提交到web服务器的数据，才必须要放在表单内，可是前一种理解的方式也不是完全错误的，因为一般可以交互的HTML元素，都是表单元素（在前期），即：浏览器需要处理的数据都是表单元素，因此需要将其放在HTML表单中。

认识表单元素

1. 大部分的表单控件元素都是由<input>标记创建的，<input>标记具有一个type属性，该属性决定了<input>标记所创建的表单控件的类型。
2. 所有的单控件对象都具有一个 nam e属性，JavaScript 脚本通过 name 属性的值来引用特定的表单控件元素，同时这也是表单提交到服务器时，每个表单控件元素的值 value 所对应的 key 值。
3. 绝大部分对象都具有 value 属性，该属性返回当前表单控件的值。
4. 所有的表单控件对象都具有一个 form 属性，该属性返回包含当前控件的 Form 对象。对于一个通用的表单数据检查程序来说，用这个属性来标明哪些控件属于哪个表单。
5. 所有的表单元素对象都具有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"> 我喜欢汽车：<input type="checkbox" name="Car"> 备注：name 可以不同
radio	单选框	男性：<input type="radio" checked="checked" name="Sex" value="male" /> 女性：<input type="radio" name="Sex" value="female" /> 备注：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 元素定义标注（标记）。

说明：

1. label 元素不会向用户呈现任何特殊效果。
2. <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种赋值:
// $("#cb1″).prop("checked",true); //很简单就不说了哦
// $("#cb1″).prop({checked:true}); //map键值对


// 判断是否已经打勾
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;

本文地址：https://blog.csdn.net/fenglepeng/article/details/112546265