JavaScript（五）—— JavaScript 表单及表单事件

其他 2020-03-31 10:21:03 阅读次数: 0

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：在提交表单之前调用
敖了个丙
发布了104 篇原创文章 · 获赞 58 · 访问量 7497
私信 关注

猜你喜欢

转载自blog.csdn.net/baidu_27414099/article/details/104882225
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
static方法和非static方法的区别（java）
如何查找计算机专业paper
java.lang.ClassFormatError: Incompatible magic value 0 in class file com/sitecha
跳跃游戏II
stm32_之【建立工程】
TeaWeb v0.0.9 发布，统计底层优化、主机监控功能改进
事件分发 -----控制字体大小
JavaScript DOM练习（动态表格添加） December 25，2019
JSF Scope & CDI
实现从零搭建一个登录注册页面（附源代码）
每日归档
更多
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022