JavaScript 表单及表单事件
一、JavaScript 表单
1.1 JavaScript 表单概述
1.1.1 表单介绍
一个表单有三个基本组成部分:
- 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
- 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
- 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。
1.1.2 JavaScript与表单
JS最初的应用就是用于分担服务器处理表单的责任,打破依赖服务器的局面,尽管目前web和javascript都有了长足的发展,web表单依然没有为许多常见的任务提供现成的解决方案,很多开发人员不仅会在验证表单的时候使用javascript,而且还会用来增强一些标准表单控件的默认行为。
1.2 JavaScript 表单语法
1.2.1 语法格式
表单内部可以使用input
、menus
、textarea
、fieldset
、legend
和label
等元素
<form>
标签的语法格式如下
<body>
<form action="" method="get" id="form1" name="form1">
<fieldset style="width: 250px;">
<legend align="center">账户信息</legend>
账 户: <input type="text" name="account" placeholder="请输入账户名"/><br />
密 码: <input type="password" name="password" placeholder="请输入密码"/><br />
</fieldset>
<br />
<fieldset style="width: 250px;">
<legend align="center">个人资料</legend>
姓 名: <input type="text" name="name" placeholder="请输入姓名"/><br />
性 别: <input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女<br />
年 龄: <input type="text" name="age" placeholder="请输入年龄"/><br />
电 话: <input type="text" name="tel" placeholder="请输入电话"/><br />
邮 箱: <input type="text" name="mail" placeholder="请输入邮箱"/><br />
爱 好: <input type="checkbox" name="sing"/>唱
<input type="checkbox" name="dance"/>跳
<input type="checkbox" name="rap"/>Rap
<input type="checkbox" name="ball"/>篮球<br />
地 址: <select name="address">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="GZ" selected="selected">广州</option>
<option value="SZ">深圳</option>
</select><br />
简介: <textarea name="show" rows="5" cols="20" placeholder="请输入简介"></textarea>
</fieldset><br />
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
</body>
页面展示如下
1.2.2 常见表单标签属性
在HTML中,表单由form标签,在javascript中,表单对应HTMLFormElement类型,HTMLFormElement类型继承HTMLElement类型,所有它和其他的Element元素有相同的默认属性,同时它也有自己的属性
- acceptCharset:服务器能够处理的字符集,等价于 HTML 中的 accept-charset 特性。
- action:接受请求的 URL,等价于 HTML 中的 action 特性,规定了提交表单是向何处发送表单数据。
- autocomplete:只有on和off两种状态,规定是否启用表单的自动完成功能。
- elements:表单中所有控件的集合(HTMLCollection)。
- enctype:请求的编码类型,;等价于 HTML 中的 enctype 特性。
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
- length:表单中控件的数量。
- method:要发送的 HTTP 请求类型,通常是"get"或"post",等价于 HTML 的 method 特性。
- name:表单的名称,等价于 HTML 的 name 特性。
- target:用于发送请求和接收响应的窗口名称,等价于 HTML 的 target 特性。
- _blank
- _self
- _parent
- _top
- framename
- style:设置标签的相关元素的CSS 样式。
- novalidate:如果使用该属性,则提交表单时不进行验证。
1.2.2 常用获取表单方法
通过id获取
var form=document.getElementById('id1');
通过document.forms获取
通过document.forms来取得页面中的所有表单元素,通过索引值’0‘,取得第一个表单元素
//通过document.forms来取得页面中的所有表单元素,通过索引值'0‘,取得第一个表单元素
var firstForm = document.forms[0];
//通过document.forms来取得页面中的所有表单元素,通过name值取得特定的表单元素
var form2 = document.forms['name1'];
二、JavaScript 表单事件
2.1 JavaScript 表单事件示例
2.1.1 表单事件介绍
<form>
标签表单提交时,可以触发事件,将表单信息提交单指定的url地址。
<form>
标签支持HTML的全局事件
2.1.2 表单事件示例
页面显示代码
<body>
<form action="" method="get" id="form1" name="form1">
<fieldset style="width: 250px;">
<legend align="center">账户信息</legend>
账 户: <input type="text" name="account" placeholder="请输入账户名"/><br />
密 码: <input type="password" name="password" placeholder="请输入密码"/><br />
</fieldset>
<br />
<fieldset style="width: 250px;">
<legend align="center">个人资料</legend>
姓 名: <input type="text" name="name" placeholder="请输入姓名"/><br />
性 别: <input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女"/>女<br />
年 龄: <input type="text" name="age" placeholder="请输入年龄"/><br />
电 话: <input type="text" name="tel" placeholder="请输入电话"/><br />
邮 箱: <input type="text" name="mail" placeholder="请输入邮箱"/><br />
爱 好: <input type="checkbox" name="hobby" value="唱"/>唱
<input type="checkbox" name="hobby" value="跳"/>跳
<input type="checkbox" name="hobby" value="Rap"/>Rap
<input type="checkbox" name="hobby" value="篮球"/>篮球<br />
地 址: <select name="address">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="GZ" selected="selected">广州</option>
<option value="SZ">深圳</option>
</select><br />
</fieldset><br />
<button type="button" onclick="test()">提交</button>
<button type="reset">重置</button>
</form>
</body>
当输入信息,并点击提交时,就会将表单信息提交,通过按钮点击事件调用test()方法
JS代码
<script>
function test(){
//通过id属性获取表单信息
var form1 = document.getElementById("form1");
//获取表单中的元素值
var account = form1.account.value;
var password = form1.password.value;
console.log("account = " + account + " password = " + password);
//通过forms获取所有表单信息,再通过[index]获取第几个表单的信息
var form2 = document.forms[0];
//获取表单中的元素值
var name = form2.name.value;
var sex = form2.sex.value;
console.log("name = " + name + " sex = " + sex);
//通过标签名获取表单信息
var form3 = document.getElementsByTagName("form")[0];
//获取表单中的元素值
var tel = form3.tel.value;
console.log("tel = " + tel);
var hobbys = form3.hobby;
for(var i = 0; i < hobbys.length; i++){
console.log("hobby = " + hobbys[i].value);
}
}
</script>
输入以下表单信息,并点击提交按钮
下面是几种方式获取到的表单信息,通过上述方法就成功的获取到了form表单以及表单的具体元素的信息。
2.1.3 elements 属性示例
通过elements可以获取到表单中所有元素,并组成一个集合,如下示例
<body>
<form action="" method="get" id="form1" name="form1">
<fieldset name="fieldset1" style="width: 250px;">
<legend align="center">账户信息</legend>
账 户: <input type="text" name="account" placeholder="请输入账户名"/><br />
密 码: <input type="password" name="password" placeholder="请输入密码"/><br />
</fieldset>
<br />
<fieldset name="fieldset2" style="width: 250px;">
<legend align="center">个人资料</legend>
姓 名: <input type="text" name="name" placeholder="请输入姓名"/><br />
性 别: <input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女"/>女<br />
年 龄: <input type="text" name="age" placeholder="请输入年龄"/><br />
电 话: <input type="text" name="tel" placeholder="请输入电话"/><br />
邮 箱: <input type="text" name="mail" placeholder="请输入邮箱"/><br />
爱 好: <input type="checkbox" name="hobby" value="唱"/>唱
<input type="checkbox" name="hobby" value="跳"/>跳
<input type="checkbox" name="hobby" value="Rap"/>Rap
<input type="checkbox" name="hobby" value="篮球"/>篮球<br />
地 址: <select name="address">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="GZ" selected="selected">广州</option>
<option value="SZ">深圳</option>
</select><br />
</fieldset><br />
<button type="button" onclick="test()">提交</button>
<button type="reset">重置</button>
</form>
</body>
<script>
function test(){
var form = document.getElementById("form1");
var elements = form.elements;
for(var i = 0; i < elements.length; i++){
console.log("elements元素有 = " + elements[i].name + " 元素value = " + elements[i].value + " 元素type = " + elements[i].type)
}
}
</script>
输入表单信息并提交后得到如下结果
2.1.4 reset 属性示例
一般情况下,表单信息在提交之后需要将页面显示的内容清除掉,这时除了用按钮点击清楚外,还可以利用属性reset自动删除。
//获取表单对象
var form = document.getElementById("form1");
//进行表单内容的提取
....
//将页面表单显示内容清除
form.reset();
2.1.5 表单的其他属性操作
获取表单的属性
<body>
<form accept-charset="ISO-8859-1" action="index.jsp" enctype="application/x-www-form-urlencoded" method="get" id="form1" name="form1" target="_blank">
<fieldset name="fieldset1" style="width: 250px;">
<legend align="center">账户信息</legend>
账 户: <input type="text" name="account" placeholder="请输入账户名"/><br />
密 码: <input type="password" name="password" placeholder="请输入密码"/><br />
</fieldset>
<br />
<fieldset name="fieldset2" style="width: 250px;">
<legend align="center">个人资料</legend>
姓 名: <input type="text" name="name" placeholder="请输入姓名"/><br />
性 别: <input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女"/>女<br />
年 龄: <input type="text" name="age" placeholder="请输入年龄"/><br />
电 话: <input type="text" name="tel" placeholder="请输入电话"/><br />
邮 箱: <input type="text" name="mail" placeholder="请输入邮箱"/><br />
爱 好: <input type="checkbox" name="hobby" value="唱"/>唱
<input type="checkbox" name="hobby" value="跳"/>跳
<input type="checkbox" name="hobby" value="Rap"/>Rap
<input type="checkbox" name="hobby" value="篮球"/>篮球<br />
地 址: <select name="address">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="GZ" selected="selected">广州</option>
<option value="SZ">深圳</option>
</select><br />
</fieldset><br />
<button type="button" onclick="test()">提交</button>
<button type="reset">重置</button>
</form>
</body>
<script>
function test(){
var form = document.getElementById("form1");
console.log(" acceptCharset = " + form.acceptCharset);
console.log(" action = " + form.action);
console.log(" enctype = " + form.enctype);
console.log(" id = " + form.id);
console.log(" length = " + form.length);
console.log(" method = " + form.method);
console.log(" target = " + form.target);
}
</script>
2.1.6 其他属性
- onreset:在重置表单元素之前调用
- onsubmit:在提交表单之前调用