前端之 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种赋值:
// $("#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
上一篇: python学习之对象的三大特性