JavaScript中的表单编程

表单编程

1获取表单相关信息

1.什么是表单元素

1.什么是表单元素
在H TML中表单就是指form标签，它的作用是将用户输入或选择的数据提交给指定的服务器
2.如何获取表单元素
<form id="form1" name="form1">
</form>
<script>
//方法一：
let fm = document.getElementbyId("fm");
//方法二：
let fm = document.forms[0];
//方法三：
let fm = document.fo rms["fo rml"];// 其中的 forml 可以是 id 或 name 的值
//方法四：
let fm = document.fo rml;// 其中的 forml 只能是 name 的值
</script>
3什么是表单字段(域)
首先表单字段应该包含在form元素中，但并不意味着f orm中的所有元素都是表单字段。实际上表单字段主要是指六个元素：
•input -类型众多，主要是定义输入域
•textarea -多行文本
•select -定义下拉或多选列表
•fieldset -将相关的表单用外框包含起来
•button -默认带提交功能的按钮
•output -显加输出结果
还有些元素虽然不属于表单字段，但是也具备一些和表单字段交互的功能：
•label -为input元素定义标注
•datalist -为input元素提供选项列表
input 的 type 类型
input元素比较特殊，它有个属性type，可以将input呈现出不同的效果。如:
•text -文本框
•password -密码框
•radio -单选框
•checkbox -多选框
•file -文件上传控件
•hidden -隐藏表单
•submit -提交按钮
•image -带图片的提交按钮
•reset -重置按钮
•button -普通按钮
|注意：submit、image和button标签都具备提交功能。
HTML5新增的type类型：
•email
•url
•number
•range
•date
•time
•datetime-local
•month
•week
•search
•tel
•color

2获取表单字段

<form id="form1" name="form1">
<input type="text" id="phone" name="phone" /> </form>
<script>
//获取表单元素：

let fm = document.getElementbyId("fm");
//方法一：
let field = document.getElementById("phone");
//方法二：
let field = fm.elements[0];// elements是获取表单元素中所有表单域对象，通过下标值访问
某一个表单字段
//方法三：
let field = fm.elements["phone"];// 其中的phone可以是id或name的值
//方法四：
let field = fm.phone;// 其中的 phone 可以是 id 或 name 的值
//方法五：
let field = fm["phone"];// 其中的 phone 可以是 id 或 name 的值
//方法六：
let field = fm[0];//其中的下标值表示表单字段在表单元素中的序号
</script>

3获取表单字段的值

可以通过value属性来获取表单字段的值

<body>
<form action="">
<input type="text" name="" id="test" value="this is a test">
<textarea name="" id="test2" cols="30" rows="10">this is a test,too< /textarea>
<script>
console.log(test.value); // this is a test console.log(test2.value); // this is a test,too //如果是文本域，还可以通过inne rH TML来获取值 console.log(test2.innerHTML); // this is a test,too </script>
</form>
</body>

2 表单属性介绍

1.form
•action -提交的地址
•autocomplete -是否启用表单的自动完成功能，默认为启用(on)
•enctype -数据传递的方式
•method -提交方法
•name -表单名
•target -规定在何处打开actio n指定的地址
2.input
•autocomplete -规定i nput元素输入字段是否应该启用自动完成功能。默认on
•autofocus -规定当页面加载时i nput元素应该自动获得焦点
•checked -规定type=checkbox/radio时是否为选中状态
•disabled -禁用该元素
•list -指向引用的datalist，值为datalist的id
•maxlength -规定i nput元素中允许的最大字符数
•name -表单字段的名称
•placeholder -规定可描述输入i nput字段预期值的简短的提示信息
•readonly -规定输入字段是只读的
•type -规定要显示的input元素的类型
•value -指定input元素value的值
3.textarea
•autofocus -规定当页面加载时i nput元素应该自动获得焦点
•disabled -禁用该元素
•maxlength -规定i nput元素中允许的最大字符数
•name -表单字段的名称

•placeholder -规定可描述输入i nput字段预期值的简短的提示信息
•readonly -规定输入字段是只读的
•rows -规定文本区域内可见的行数
•cols -规定文本区域内可见的列数
textarea是通过cols和rows属性来规定textarea的尺寸大小，不过更好的办法是使用CSS的 height 和 width 属性。
4.select
•autofocus -规定当页面加载时i nput元素应该自动获得焦点
•disabled -禁用该元素
•name -表单字段的名称
•multiple -当指定了该属性时下拉列表变多选列表
5.option
|注意：option只能包含在select或datalist中。
・disabled -规定此选项应在首次加载时被禁用
・selected -规定选项（在首次显示在列表中时）表现为选中状态
・value -定义送往服务器的选项值
6.button
•autofocus -规定当页面加载时自动获得焦点
•disabled -规定此选项应在首次加载时被禁用
•type -只有三个值,button表示普通按钮；submit表示提交按钮；reset表示重置按钮；
•value -按钮中的文本值，可以写在开始和结束标签之间
7.特殊属性
上面介绍的属性中有些是比较特殊的，它们特殊之处在于可以不需要属性值，只需要有属性名即可生效。
当然也可以定义属性值
如果是通过JS来设置这些属性，值就需要通过boolean类型来设定，true表示生效、false反之。
在表单元素中这类属性有：
•autofocus
•readonly
•disabled
•multiple
•checked
•selected

3 表单相关事件

1.提交事件
表单元素中有三种类型的标签具备提交功能：
<input type="submit" >
<input type="image" >
<button type="submit">提交</button>
当点击提交按钮后，会触发form元素上的o nsubmit事件，通过为它绑定事件处理方法，可以在提交到服务器之前做一些操作：比如验证表单。
如果想要阻止表单提交，可以使用事件对象中的阻止事件默认行为的方法：preventDefault()
2.重置事件
重置是指将表单中的字段都还原到默认的状态值，而并不是清空内容。表单元素中有两种类型的标签具备重置功能：
<input type="reset" >
<button type=" reset">重置 </button>
当点击重置按钮后，会触发form元素上的o nreset事件，通过为它绑定事件处理方法，可以在重置之前做一些操作。
如果想要阻止表单重置，可以使用事件对象中的阻止事件默认行为的方法：preventDefault()
3.其他的提交和重置方法
除了可以使用标签提交表单外，form元素还提供了两个方法：submit()和reset()，它们也具备提交的功能。
4.焦点事件
焦点事件，顾名思义就是当表单里面的控件获取到焦点时所触发的事件。点到输入框，会触发焦点事件，当鼠标离开某个控件时，同样可以触发焦点事件。在JavaScript中，对应的焦点事件有如下两个：
• focus：获取焦点时触发的事件的名称
• blur :失去焦点时触发的事件的名称
5.改变事件
在实际开发中，表单元素中有两个控件也用的比较多，就是radio和checkbox控件，与这两个控件经常绑定的有一个事件叫做change事件，这个事件会在表单的内容发生变化时被触发，同样适用于text, select和textare等表单控件
6.input 事件
在文本框(text)中使用change事件，需要失去焦点，并改变了输入框中内容时才会触发。但有的时候要求在输入框中每输入或删除一个字符都能响应事件，这就需要input事件。

4 表单验证

1验证长度
<input>标签元素提供了 maxlength属性可以设置可输入的最大长度
2正则表达式验证

<head>
<meta charset="UTF-8"> <title>Document</title> <style>
span{ font-size: 12px; color: red
} </style> </head> <body>
<form action="" id="myForm">
<h3 >正则表达式验证表单数据</h3>
<div>
用户名：
<input type="text" οnchange="userNameCheck()">
</div>
<span></span>
vdivxbutton> 提交信息 v/buttonx/div> </form> vscript>
let userNameCheck = function(){
//获取<span>标签
let span = document.getElementsByTagName("span")[0];
//创建正则表达式
let reg = /入[a-z]{1}\w{5,9}$/i;
//获取到文本框里面的内容
let value = document.getElementsByTagName("input")[0].value; if(value.length === 0){ span.innerText = "";
}else if(reg.test(value)){
span.inne rText ="验证通过"；
}else{
span.inne rText ="首字符为字母，长度为6-10个字符的数字字母和下划线"
;
}
}
</script> </body>
效果：当输入内容不符合要求时，＜span＞标签的内容会被填充为,,首字符为字母，长度为6-10 个字符的数字字母和下划线"

5 HTML5中的表单控件

1新增的表单控件
1.email 类型
主要用于用户输入emaiI地址的，在提交表单时，会自动验证email输入框的值，如果不是一个有效的email，则会报错
2.url类型
主要用于输入url地址的，在提交表单的时候，会自动验证url输入框里面的值，如果不是一个有效的ur I地址，则会报错
3.number 类型
该类型控件只允许输入数值，并且我们还可以设置能够接受数字的范围
除此之外，还可以通过step属性来设置数值的间隔
4. range类型
用于输入包含一定数字范围的文本框，和number控件的作用大致一致，只不过表现形式是以滚动条的形式来展现的。和number控件一样，同样存在min , max以及step属性。
5.日期检查类型类型
日期控件 date
该控件类型支持设置最值属性
时间控件 time
本地日期事件控件 datetime-local
月控件month
周控件week
6.search 类型
提供用于搜索关键字的文本框，虽然外观看起来和text控件差不多，但是却带来了语义上的不同。
7.teI类型
tel类型主要用于输入电话号码
8.color 类型
专门用于设置颜色的控件
2新增的表单属性
1. autocomplete 属性
新增的autocomplete属性可以帮助用户在input类型的输入框中实现自动完成内容的输入。支持的控件包括： text , sea rch , url , tel , email , passw ord , datepicke rs , r ange 以及color。autocomplete属性的值有2种：on和off，可以将该属性设置到form表单上，因为该属性是可以继承的。可以将autocomplete属性和datalist配合着使用
2.autofocus 属性
该属性可以让某些控件自动的获取光标焦点，常用于某些需要自动获取焦点的控件，例如向用户展示许可协议时，默认的焦点就聚焦在同意这个按钮上面
3.form属性
通过form属性，我们可以采集到处于<form＞以外的表单控件的内容，只需要在表单的form属性里面填写表单的id便可以和该表单进行绑定
如果一个form属性要引用两个或者两个以上的表单，只需要用空格将表单的id间隔开即可
4.表单重写属性
新增的表单重写属性是一套属性，包括下面的属性：
form action、form enctype、form method、
form novalidate、formtar get。这里讲一个for maction，其他的属性用法是一样的。之前的form表单，action属性表示将表单内容提交到哪一个页面，但是有一个缺点就是所有的信息都会被提交到一个固定的页面，有了 for maction以后，就可以将不同的信息提交到不同的页面。
5.list属性
该属性主要是和HTML5新增的＜datalist＞标签配合使用的，list属性里面写上＜datalist＞标签的id即可
6.最值属性
主要用于number , range , date等控件里面。
max：输入框允许的最大值
min：输入框允许的最小值
step：输入框输入数字时的数字间隔
7.multiple属性
这个属性可以用于设置下拉列表显示多个选项，或者上传文件时上传多个文件。
8.pattern 属性
直接将正则表达式作为该属性的属性值即可
9.占位符属性
placeholder属性用于给文本框一个默认的内容
10.required 属性
为表单控件书写上该属性表示此项目为必须填写项目
11.novalidate 属性
该属性用于在提交表单时取消整个表单的验证，关闭对表单内所有元素的检查，如果只想取消一个，那么就可以使用前面所讲的for mnovalidate属性单独用于表单里的某一个控件里面。

6 下拉列表和多选列表的使用

在select中加上multiple属性就变成多选列表。
1.增加元素
let newOption = new Option（"深圳","SZ"）;
其中第一个参数是option标签中间的文本，第二个参数是option的value值。

<select id="citySelect">
<option> 成都 </option>
<option> 北京 </option>
<option> 上海 </option>
</select>
<script>
let citySelect = document.getElementById("citySelect");
let newOption = new Option("深圳","SZ");
citySelect.options.add(newOption); console.log(citySelect.options);
</script>
citySelect.options获取的是列表中option的集合，这个集合不是数组，它是重新封装的集合对象。所以增加元素的方法是add，而不是push。
2.修改元素
修改元素可以通过指定的下标找到要修改的option,然后通过value或text修改其中的内容。
citySelect.options[0].value = "GZ";
citySelect.options[0].text ="广州"；
3.删除元素
删除使用的是remove方法，同样通过下标指定要删除的项。
citySelect.options.remove(0);
如果要删除所有，可以直接将options的length属性设置为0。
citySelect.options.length = 0;
4.获取选中的元素
如果是下拉列表，由于只能选中一项，可以使用select元素的value属性来获取选中项的value 值，如：
console.log("你选中的是：",citySelect.value);
这个方法只能获取选中项的value，如果想要获取当中的文本，可以使用selectedlndex属性，它得到的是获取选中项的下标，然后再利用该下标到o ption集合中找到对应的项，如：
console.log你选中的是：",citySelect.options[citySelect.selectedIndex].text);
如果是多选列表，由于选中的可能有多个，那还是需要循环集合，然后判断option的selected属性是否为真。
let options = citySelect.options;
for(let i = 0;i < options.length;i++){
if(options[i].selected){
console.log("你选中的是："，options[i].text);
}
}

7 表单常见操作

1全选和反选

<body>

苹果<input type="checkbox" name="fruit" value="苹果">
香蕉<input type="checkbox" name="fruit" value="香蕉">
橘子<input type="checkbox" name="fruit" value="橘子">
榴莲<input type="checkbox" name="fruit" value="榴莲">
<div style="margin-top:5px;">
<button id="all">全选</button>
<button id="not">全不选</button>
<button id="reverse">反选</button>
</div>
<script>
let obj = document.getElementsByName("fruit");
//全选绑定事件
all.onclick = function(){
for(let i=0;i<obj.length;i++){
obj[i].checked = true;
}
}
//全不选绑定事件
not.onclick = function(){
for(let i=0;i<obj.length;i++){
obj[i].checked = false;
}
}
//反选绑定事件
reverse.onclick = function(){
for(let i=0;i<obj.length;i++){
if(obj[i].checked ===true){
obj[i].checked = false;
}else{
obj[i].checked = true;
}
//更简便的方法直接取反,true变为false，false变为true
obj[i].checked = !obj[i].checked;
}
}
</script>
</body>

2下拉框特效

<body>
<h3>队伍配置</h3>
<select name="" id="sel1" size="8" multiple>
<option value="">赵信</option>
<option value="">泰达mier</option>
<option value="">希瓦娜</option>
<option value="">金克丝</option>
<option value="">索拉卡</option>
</select> <button id="toRight">>></button>
<button id="toLeft"><<</button>
<select name="" id="sel2" size="8" multiple>
<option value="">菲奥娜</option>
<option value="">伊芙琳</option>
<option value="">卡西奥胚芽</option>
<option value="">爱惜</option>
<option value="">莎娜</option>
</select>
<script>
//获取两个下拉列表
let sel1 = document.getElementById("sel1");
let sel2 = document.getElementById("sel2");
//为两个按钮添加事件
toRight.onclick = function(){
let childs = sel1.childNodes;
for(let i=0;i<childs.length;i++){
if(childs[i].selected){
sel2.appendChild(childs[i]);
}
}
}
toLeft.onclick = function(){
let childs = sel2.childNodes;
for(let i=0;i<childs.length;i++){
if(childs[i].selected){
sel1.appendChild(childs[i]);
}
}
}
</script>
</body>

3下拉列表联动

<body>

<select name="" id="province">
<option value=""> 请选择国家 </option> </select>
<select name="" id="city">
<option value=""> 请选择城市</option〉 v/select>
<select name="" id="county">

<option value=""> 请选择区县 </option>
</select>
<script>
//模拟从服务器端获取到的数据
let pr ovinceData =["中国"，"日本”];
let cityData = [
["北京","上海","广州","深圳","成都"],
["东京","大阪","京都","名古屋","北海道"],
];
let countyData = [
[
["东城区"，”西城区"，”朝阳区"，”丰台区"，”石景山区"],
["黄浦区"，”徐汇区"，”长宁区"，”静安区"，”虹口区"],
["越秀区"，”荔湾区"，”海珠区"，”花都区"，”南沙区"],
["福田区"，”罗湖区"，”南山区"，”龙华区"，”宝安区"],
["锦江区"，”武侯区"，”青羊区"，”金牛区"，”高新区"]
],
[
["千代田区"，”新宿区"，”墨田区"，”中野区"，”品川区"],
["大正区","港区","鹤见区","旭区","天王寺区"],
["右京区"，”左京区"，”上京区"，”下京区"，”京都市"],
["热田区","北区","昭和区","中村区","守山区"],
["深川市","北广岛市","江别市","千岁市","惠庭市"] ]
];
//获取三个下拉列表的对象
let provinceObj = document.getElementById("province");
let cityObj = document.getElementById("city");
let countyObj = document.getElementById("county");
//首先将国家的信息新添加到第一个下拉列表里面
for(let i=0;ivprovinceData.length;i++){
//创建空的option选项
let newOption = document.createElement("option"); newOption.value = i;//设置option的属性值从0开始 newOption.inne rText = pr ovinceData[i];//设置 option 的文本值 pr ovinceObj.appendChild(newOption);//将 option 添加到第一个下拉列表 }
//监测第一个下拉列表，一旦选项有改变，做如下的操作
provinceObj.onchange = function(){
//清空后面两个下拉列表的内容
cityObj.innerHTML = ""; countyObj.innerHTML = "";
//将第一个下拉列表的v alue值作为id号
let provinceID = provinceObj.value;
//如果id号为空，则后面两个下拉列表显示如下内容
if(provinceID === ""){
let newOption = document.createElement("option");
newOption.inne rText ="请选择城市"；

cityObj.appendChild(newOption);
let newOption2 = document.createElement("option"); new0ption2.inne rText ="请选择区县"； countyObj.appendChild(newOption2);
}else{ //否则显示相应的城市和区域信息
//将城市添加到第二个下拉列表里面
let citys = cityData[provinceID]；
for(let i=0；i<citys.length；i++){
let newOption = document.createElement("option")；
newOption.value = i；
newOption.innerText = citys[i]；
cityObj.appendChild(newOption)；
}
//因为默认是第一个城市，所以默认出现第一个城市所对应的区县 let counties = countyData[provinceID][0]； for(let i=0；i<counties.length；i++){ let newOption = document.createElement("option")； newOption.value = i； newOption.innerText = counties[i]； countyObj.appendChild(newOption)；
}
}
}
//监测第二个下拉列表 cityObj.onchange = function(){
//清空第三个下拉列表的内容
countyObj.innerHTML = ""；
//得到当前选择的国家ID和城市ID
let provinceID = provinceObj.value；
let cityID = cityObj.value；
//通过前面两个ID定位到对应的区县数组
let counties = countyData[provinceID][cityID]；
//遍历然后添加节点
for(let i=0；i<counties.length；i++){ let newOption = document.createElement("option")； newOption.value = i； newOption.innerText = counties[i]； countyObj.appendChild(newOption)；
}
}
</script>
</body>
效果：
请选择国家0 请选择城市0 请选择区县0
选择"中国"以后，自动出现第一个城市和与第一个城市相关的区县

主要就是对前面两个下拉列表的内容变化进行监听，然后动态的给每个下拉列表添加上 voption> 元素。

转载于:https://www.cnblogs.com/zai1/p/11300116.html

JavaScript中的表单编程相关推荐

JavaScript中的表单验证、正则表达式、数组的使用
表单验证.正则表达式.数组字符串的使用为什么要使用表单验证表单验证的常用步骤提交表单的2种方式文本框对象为什么要使用正则表达式正则表达式的两种创建方法正则表达式的模式正则表达式常用的 ...
javascript中FORM表单的submit()方法经验教训.
@author songfeng 因为JS内对象的方法实际上是存储语句的一个类似于指针的东西. 其指向了内存的一个位置, 也就是其函数的位置,当然也可以让其指向一个变量值 ...
JavaScript中获取表单信息并添加在表格中
效果如下图所示: 填写信息后: <!DOCTYPE html> <html><head><title>添加信息</title><sty ...
html表单 asp验证,ASP中JavaScript处理复杂表单的生成与验证
ASP中JavaScript处理复杂表单的生成与验证更新时间:2007年03月25日 00:00:00 作者: 这里所谓的复杂表单,是指表单中包含多种不同的输入类型,比如下拉列表框.单行文本.多 ...
Python的Django框架中forms表单类的使用方法详解2
用户表单是Web端的一项基本功能,大而全的Django框架中自然带有现成的基础form对象,本文就Python的Django框架中forms表单类的使用方法详解. Form表单的功能自动生成HTML ...
extjs 提交表单给php,JavaScript_Extjs学习笔记之二初识Extjs之Form，Extjs中的表单组件是Ext.form.Basic - phpStudy...
Extjs学习笔记之二初识Extjs之Form Extjs中的表单组件是Ext.form.BasicForm,不过最简单最常用的是Ext.form.FormPanel控件,它继承自Panel,具有一 ...
java 用户名不为空_[Java教程]【关于JavaScript】常见表单用户名、密码不能为空
[Java教程][关于JavaScript]常见表单用户名.密码不能为空 0 2015-05-31 12:00:14 在论坛等系统的用户注册功能中,如果用户忘记填写必填信息,如用户名.密码等,浏览器会 ...
html语言中表格由什么组成,HTML中一个表单由什么组成
在HTML中,一个完整的表单通常由表单元素(也称为表单控件).提示信息和表单域3个部分构成.表单元素包含了具体的表单功能项,如单行文本输入框.密码输入框.复选框.提交按钮.重置按钮等:表单域相当于一个 ...
掌财社:html5中AmazeUI框架中JS表单验证实战案例展示！
今天和大家分享个有关于"html5中AmazeUI框架中JS表单验证实战案例展示!"这方面的相关内容知识,让大家对于html5中AmazeUI框架也可以有所了解! 1.需求做一个 ...

JavaScript中的表单编程

JavaScript中的表单编程相关推荐

最新文章

热门文章