表单编程

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" onchange="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> 元素。

JavaScript中的表单编程的更多相关文章

  1. 【Flask】 WTForm表单编程

    WTForm表单编程 在网页中,为了和用户进行信息交互总是不得不出现一些表单.flask设计了WTForm表单库来使flask可以更加简便地管理操作表单数据.WTForm中最重要的几个概念如下: Fo ...

  2. react实战系列 —— React 中的表单和路由的原理

    其他章节请看: react实战 系列 React 中的表单和路由的原理 React 中的表单是否简单好用,受控组件和非受控是指什么? React 中的路由原理是什么,如何更好的理解 React 应用的 ...

  3. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  4. django中form表单的提交：

    一,关于表单: 表单在百度百科的解释:   表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域 ...

  5. javascript自动填写表单小技巧

    javascript自动填写表单小技巧 在平时开发过程中,或者在访问某些站点,经常要频繁地填写一大堆表单时,我们可以利用javascript,写一段脚本,预先把要填的信息准备好,然后模拟点击按钮的动作 ...

  6. Python的Django框架中forms表单类的使用方法详解

    用户表单是Web端的一项基本功能,大而全的Django框架中自然带有现成的基础form对象,本文就Python的Django框架中forms表单类的使用方法详解. Form表单的功能 自动生成HTML ...

  7. JavaScript 小实例 - 表单输入内容检测，对页面的增删改

    JavaScript 小实例 - 表单输入内容检测,对页面的增删改 效果体验地址:https://xpwi.github.io/js/JavaScript01/jsForm.html 功能: 1.向页 ...

  8. html5中form表单新增属性以及改良的input标签元素的种类

    在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...

  9. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

随机推荐

  1. Django 框架之前

    返回主目录:Django框架 内容目录: 一.Django框架之前的内容 1.1 web应用程序的架构 1.2 HTTP协议 1.3 纯手写简单web框架 一.Django框架之前d的内容 1.1 w ...

  2. C#操作Word的+ CKEditor 輸出成Word文件(包含圖案上傳)

    C#操作Word 参考博文: C#操作word类文件 https://www.cnblogs.com/walking/p/3571068.html C#中的Office操作专栏(21) http:// ...

  3. 2019-4-15-VisualStudio-如何在-NuGet-包里面同时包含-DEBUG-和-RELEASE-的库

    title author date CreateTime categories VisualStudio 如何在 NuGet 包里面同时包含 DEBUG 和 RELEASE 的库 lindexi 20 ...

  4. WordTEX

    https://www.andrew.cmu.edu/user/twildenh/wordtex/

  5. 笔记39 Spring Web Flow——订单流程（收集顾客信息）

    如果你曾经订购过披萨,你可能会知道流程.他们首先会询问你的电 话号码.电话号码除了能够让送货司机在找不到你家的时候打电话给 你,还可以作为你在这个披萨店的标识.如果你是回头客,他们可以 使用这个电话号 ...

  6. mysql和postgresql查询数据库中哪些表包含某个字段

    想知道数据库中哪表含有edu_status字段   mysql> select table_name,column_name from information_schema.columns wh ...

  7. top.location.href

    window.location.href.location.href是本页面跳转   parent.location.href是上一层页面跳转   top.location.href是最外层的页面跳转 ...

  8. MySQL主从复制&读写分离&分库分表

    MySQL主从复制 MySQL的主从复制只能保证主机对外提供服务,从机是不提供服务的,只是在后台为主机进行备份数据 首先我们说说主从复制的原理,这个是必须要理解的玩意儿: 理解: MySQL之间的数据 ...

  9. 27 和为S的两个数字

    0 引言 题目描述:输入一个递增排序的数组和一个数字S,在数组中查找两个数,使得他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 1 抽象问题具体化 举例: 序列为{1,2,3,4 ...

  10. 「THUSC 2016」成绩单 & 方块消除 （区间dp）

    成绩单 $f[l][r][mi][mx]$表示从l到r发到还没发的部分的最小值为mi最大值为mx时的最小代价. $f[l][r][0][0]$表示从l到r全部发完的代价. 自己写的无脑dp,枚举中转点 ...