第11章表单编程
11-1获取表单相关信息
11-1-1获取表单
表单由包含输入字段，选择菜单和按钮等表单控件的＜fo rm＞元素组成。这些输入字段可以填充 信息，一旦表单被提交了，这些信息就可以得到处理。传统上，当表单被提交时，表单上的数据会被发送到服务器上面进行处理。一般来讲，服务器端 上使用服务器端脚本语言进行处理，例如PHP或者Ruby等服务器脚本语言。
不过，在当年拨号上网的时代，将所有的表单信息验证都放在服务器端，用户体验是非常之低 的。所以，当初JavaScript被设计出来其中也有为了解决这个问题。在将表单里面的信息发送到 服务器之前，我们经常会通过JavaScript来处理表单中的信息。
但是在利用J avaScript来对表单信息进行处理之前，首先第一步就是要获取到表单以及表单的内 容。
1. 什么是表单元素在H TML中表单就是指form标签，它的作用是将用户输入或选择的数据提交给指定的服务器。比 如：
<form action="#" method="post" enctype="application/x-www-form-urlencoded"> </form>
action -提交的地址 method -提交方式?enctype -数据传递的方式，这是默认的方式，即以键值对的形式提交。
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元素提供选项列表 4. 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 color11-1-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>
11-1-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 testconsole.log(test2.value); // this is a test,too //如果是文本域，还可以通过inne rH TML来获取值console.log(test2.INNERHTML); // this is a test,too</script></form></body>
11-2表单属性介绍
HTML中每个标签都有很多属性，不同功能的标签拥有的属性也是不一样的。比如表单相关的标 签拥有name属性，该属性的作用可以在Js中利用它来对标签进行引用。同时还可以在表单提交 后，对表单数据进行引用。而其他非表单标签就无此功能。下面总结一下表单元素中比较常见的 属性：
注意：以下的属性并不是全部，只是表单特有且较为常见的属性，像ID之类每个标签都有的 属性就不在罗列范围内。更多的属性可以参考相应的api文档。
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. 特殊属性上面介绍的属性中有些是比较特殊的，它们特殊之处在于可以不需要属性值，只需要有属性名即 可生效。比如：
<form ID="fm"><input type="button" value="ok" Disabled><input type="checkBox" name="language" checked></form>当然也可以定义属性值，比如<form ID="fm"><input type="button" value="ok" Disabled="Disabled"><input type="checkBox" name="language" checked="true"></form>
其实，它的值无论是什么都无所谓，只要有这个属性存在功能就会生效。不过如果是通过Js来设 置这些属性，值就需要通过boolean类型来设定，true表示生效、false反之。
<form ID="fm"><input type="button" ID="diableBtn" value="禁用/取消"><input type="text" ID="phone" ></form><script>let phone = document.getElementByID("phone");document.getElementByID("diableBtn").onclick = function(){phone.Disabled = !phone.Disabled;}</script>效果：点击按钮可以切换文本框的禁用状态
在表单元素中这类属性有：
autofocus Readonly Disabled multiple checked selected11-3表单相关事件
表单元素中有很多专属的事件类型，比如提交、重置、获取焦点、失去焦点等等。下面咱们来具 体看看这些事件的用法及特性。
1. 提交事件表单元素中有三种类型的标签具备提交功能：
<input type="submit" ><input type="image" ><button type="submit">提交</button>当点击提交按钮后，会触发form元素上的onsubmit事件，通过为它绑定事件处理方法，可以在提 交到服务器之前做一些 *** 作：比如验证表单。let fm = document.getElementByID("form1");fm.onsubmit = function(){console.log(” 表单提交");}
|注意：onsubmit事件是绑定在form元素上，而不是提交按钮上。
如果想要阻止表单提交，可以使用事件对象中的阻止事件默认行为的方法：pr eventDefault()
let fm = document.getElementByID("form1");fm.onsubmit = function(e){console.log(” 表单提交"); e.preventDefault();} 2. 重置事件
重置是指将表单中的字段都还原到默认的状态值，而并不是清空内容。表单元素中有两种类型的 标签具备重置功能：
<input type="reset" > <button type=" reset"〉重置 </button〉当点击重置按钮后，会触发form元素上的onreset事件，通过为它绑定事件处理方法，可以在重 置之前做一些 *** 作。let fm = document.getElementByID("form1");fm.onreset = function(){ console.log("表单重置");}
|注意：onreset事件是绑定在form元素上，而不是重置按钮上。
如果想要阻止表单重置，可以使用事件对象中的阻止事件默认行为的方法：pr eventDefault()
let fm = document.getElementByID("form1");fm.onreset = function(e){console.log("表单重置");e.preventDefault();} 3. 其他的提交和重置方法
除了可以使用标签提交表单外，form元素还提供了两个方法：submit。和reset。，它们也具备提 交的功能。比如：
<form ID="fm"><input type="button" ID="submitBtn" value="提交"〉<input type="button" ID="resetBtn" value="重置"〉
</form><script>let fm = document.getElementByID("form1");let submitBtn = document.getElementByID("submitBtn");let resetBtn = document.getElementByID("resetBtn"); submitBtn.onclick = function(){ fm.submit(); } resetBtn.onclick = function(){ fm.reset();}</script>
例子中用了两个普通的按钮，在它们各自绑定的点击事件中使用了 form元素
的submit和reset方法，实现了提交和重置的功能。利用方法提交和重置与标签的提交和重置 区别：
submit()方法提交后不会触发o nsubmit事件，点击submit类型的按钮后则会触发。
r eset()方法和reset类型的按钮都会触发onreset事件。
4. 焦点事件焦点事件，顾名思义就是当表单里面的控件获取到焦点时所触发的事件。点到输入框，会触发焦 点事件，当鼠标离开某个控件时，同样可以触发焦点事件。在JavaScript中，对应的焦点事件有 如下两个：
?focus：获取焦点时触发的事件的名称
• blur :失去焦点时触发的事件的名称
示例如下：
<input type="text" ID="phone"><script>let phone = document.getElementByID("phone"); phone.onfocus = function(){ console.log(”文本框被选中”)； } phone.onblur = function(){ console.log(”文本框失去焦点”)；}</script>
效果：当文本被选中时会在控制台显示"文本框被选中"，当点击文本框以外的地方时，会显示"文 本框失去焦点"。foucs和blu r这两个事件是在实际项目开发中最常用的表单事件，常用来在 用户填写完信息触发表单的验证。
5. 改变事件在实际开发中，表单元素中有两个控件也用的比较多，就是radio和checkBox控件，与这两个控 件经常绑定的有一个事件叫做change事件，这个事件会在表单的内容发生变化时被触发，同样适 用于text,select和textare等表单控件。
示例如下：
<select ID="opt"> <option value="CD" > 成都 </option> <option value="BJ"> 北京 </option> <option value="SH" > 上海 </option> <option value="GZ"> 广州 </option> <option value="SZ" > 深圳 </option></select><script>let obj = document.getElementByID("opt");//获取表单元素对象 obj.onchange = function(){ console.log(“选项已经被修改");}</script>
效果：当下拉列表选项被修改时，就会触发事件，在控制台输出"选项已经被修改"。
下面的例子，演示了复选框上面绑定change事件，如下：
<input type="checkBox" ID="HTML5" name="language">HTML5<input type="checkBox" ID="PHP" name="language">PHP<input type="checkBox" ID="Js" name="language">Js <script>let languages = document.getElementsByname("language"); for(let i = 0;i < languages.length;i++){ languages[i].onchange = function(){ console.log(“复选框内容已经改变”)； }}</script>
效果：通过浏览器的运行结果，我们会发现不管是选中还是取消选中，都会触发change事件，这 也是change事件的一个特性，只要表单元素的内容有改变，就会触发该事件。
6. input 事件在文本框(text)中使用change事件，需要失去焦点，并改变了输入框中内容时才会触发。但有的 时候要求在输入框中每输入或删除一个字符都能响应事件，这就需要i nput事件。例如：
<input type="text" ID="phone" ><script>let phone = document.getElementByID("phone");phone.oninput = function(){console.log("文本框的内容："，this.value);}</script>
效果：在输入框中每输入或删除一个字符，控制台都能会显示当前输入框的内容。这在有些要求 实时反馈校验结果的表单中会用到。
11-4表单验证
大部分时候，我们期望用户输入的数据是我们理想中的格式，尤其是在用户注册的时候，一些重 要信息我们是不允许用户乱写的，比如手机号，电子邮箱等。那么我们就需要在表单提交前对用 户输入的数据进行一个验证。
11-4-1验证长度
验证长度是比较简单的，甚至表单元素本身就提供了与长度相关的属性。例如vinput>标签元 素提供了 maxlength属性可以设置可输入的最大长度，如下：
<form action="" ID="myForm"><input type="text" maxlength="8"></form>除了使用maxlength属性以外，我们也可以利用J avaScript来进行长度的验证，示例如下：<body><form action="" ID="myForm"><input type="text"><button> 提交 v/button></form><script> let obj = document.getElementByID("myFo rm");//获取到表单对象obj.onsubmit = function(){//获取文本框内容的长度let length = document.getElementsByTagname("input")[0].value.len gth;console.log(‘ 长度为 ${length}‘);return false;}</script></body>
效果：点击提交按钮时会打印出当前文本框内容的长度
11-4-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><div>
<button> 提交信息 </button>
</div>
</form>
<script>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 个字符的数字字母和下划线"
正则表达式验证表单数据
用户名：X
首字符为字母,长度为6-10个字符的数字字母和下划线
提交信息
当输入的内容符合要求时，vspan＞标签的内容会被填充为11验证通过
正则表达式验证表单数据
用户名：xj123451
验证通过
提交信息
当文本框中无任何内容时，没有提示信息
正则表达式验证表单数据
用户名：
提交信息
这里，我们就实现了使用J avaScript来对表单内容进行验证，这也是JavaScript刚诞生时最被人 津津乐道的一个场景应用，通过客户端来对表单内容进行验证，可以节省用户的时间，大大提升 了用户的体验度。
当然，利用J avaScript实现的表单验证只能简单的验证数据的格式，并不能百分百的保证数据传 到服务器端时就是正确的格式，因为我们有各种各样的办法绕过JavaScript的验证，比如模拟表 单验证等。但是无论如何，在客户端使用J avaScript对表单进行验证都是非常有必要的。这极大 程度的提升了用户的体验。
11-5 HTML5中的表单控件
在前面一小节中所介绍的表单验证，大多都是通过正则表达式来实现的。而在H TML5中，则简化 了表单验证的 *** 作，为许多常用的信息验证添加了默认的验证规则，大大提高了开发人员的开发 效率。如果不是对表单信息验证有非常特殊的要求的话，HTML5所提供的默认的验证规则完全能 够胜任。这一小节，就让我们一起来看一下在H TML5中新添加的这些自带验证规则的表单控件以 及新增的表单属性。
11-5-1新增的表单控件
email 类型主要用于用户输入emai I地址的，在提交表单时，会自动验证email输入框的值，如果不是一个有 效的email，则会报错
<body><form action=""><input type="email" name="" ID=""><button> 提交 </button></form></body>
|
|
效果:
提交
请在电子邮件地址中包括"@"。"123"中缺少"@"。
对于不支持type=email的浏览器，则会将其作为普通文本框来处理，这里也体现了 HTML5中平 稳退化的设计原则。（包括后面新增的类型，不支持的浏览器也是作为普通文本框来显示）
2. url类型
主要用于输入URL地址的，在提交表单的时候，会自动验证url输入框里面的值，如果不是一个有效 的ur I地址，则会报错
<body> vform action=""> vinput type="url" name="" ID="">
<button> 提交 </button>
</form>
</body>
number 类型该类型控件只允许输入数值，并且我们还可以设置能够接受数字的范围
<body>
<form action="">
<input type="number" name="" ID="" min="1" max="20">
<button> 提交</button>
</form>
</body>
除此之外，还可以通过step属性来设置数值的间隔
<body>
<form action="">
<input type="number" name="" ID="" min="1" max="20" step="5">
<button> 提交 </button>
</form>
</body>
@H_419_1040@|3 @H_419_1040@； @H_419_1040@1@H_419_1040@1
@H_419_1040@Q @H_419_1040@请输入有效值。两个最接近的有效值分别为@H_419_1040@1@H_419_1040@和@H_419_1040@6@H_419_1040@。
range 类型用于输入包含一定数字范围的文本框，和number控件的作用大致一致，只不过表现形式是以滚
动条的形式来展现的。和number控件一样，同样存在min,max以及step属性。
<body>
<form action="">
<input type="range" name="" ID="" min="1" max="20" step="5">
<button> 提交 </button>
</form>
</body>
日期检查类型类型以前检测日期需要利用插件来实现，现在在HTML5里面也出现了和日期相关的控件，一共有5 个，介绍如下
日期控件date
<body>
<form action="">
<input type="date" name="" ID="">
<button> 提交 </button>
</form>
</body>
| □□□ |
提交
| 周日 | 周_ | 周二 | 周三 | 周四 | 周五 | 周六 |
| 31 | 1 | 2 | 3 | 4 | 5 | 6 |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 | 1 | 2 |
|
| 2018年01 月▼ |
该控件类型支持设置最值属性，如下：
<body>
<form action="">
<input type="date" min="2015-03-23" max="2015-03-30">
<button> 提交 </button>
</form>
</body>
时间控件time
<body>
<form action="">
<input type="time" name="" ID="">
<button> 提交 </button>
</form>
</body>
上午01:59 c 提交
本地日期事件控件datetime-local
<body>
<form action="">
<input type="datetime-local"> <button> 提交 </button>
</form>
</body>
月控件month
<body>
<form action="">
<input type="month">
<button> 提交 </button>
</form>
</body>
年--月 o ▼ 提交
2018年01 月▼ < • ?
| 2018 | |||
| 1月 | 2月 | 3月 | 4月 |
| 5月 | 6月 | 7月 | 8月 |
| 9月 | 10月 | “月 | 12月 |
周控件week
<body>
<form action="">
<input type="week">
<button> 提交 </button>
</form>
</body>
| 周 | 周日 | 周_ | 周二 | @H_3_1502@ 周四 | 周五 | 周六 | |
| 1 | 31 | 1 | 2 | 3 | 4 | 5 | 6 |
| 2 | 7 | 8 | 9 | @H_3_1502@ 11 | 12 | 13 | |
| 3 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 4 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 5 | 28 | 29 | 30 | 31 | 1 | 2 | 3 |
| 2018年01 月▼ |
| □□□ |
提供用于搜索关键字的文本框，虽然外观看起来和text控件差不多，但是却带来了语义上的不 同。
<body>
<form action="">
<input type="search">
<button> 提交 </button>
</form>
</body>
实际上和普通文本还是有细微的区别，当我们在搜索框中输入内容后，可以通过右边的小叉进行 删除，但是普通文本框则没有这一功能。（当然这取决于不同浏览器的实现）
te I类型tel类型主要用于输入电话号码
vbody>
<form action="">
<input type="tel">
<button> 提交 </button>
</form>
</body>
效果虽然看上去和普通文本框是一样的，但是却有了语义的不同。
color 类型专门用于设置颜色的控件
<body>
<form action="">
<input type="color">
<button> 提交 </button>
</form>
</body>
11-5-2新增的表单属性
input元素不仅新增了控件类型，还新增了几个属性，用于指定输入类型的行为和限制。下面 依次介绍这些属性。
1. autocomplete 属性
新增的autocomplete属性可以帮助用户在input类型的输入框中实现自动完成内容的输入。 支持的控件包
括： text,sea rch,url,tel,email,passw ord,datepicke rs,r ange 以
及colo r。autocomplete属性的值有2种：on和off，可以将该属性设置到form表单上，因 为该属性是可以继承的。可以将autocomplete属性和dataList配合着使用，例子如下：
<body><form action="" autocomplete="on"><input type="text" List="city"><dataList ID="city"><option value="Tokyo">Tokyo</option><option value="NewYork">NewYork</option><option value="BeiJing">BeiJing</option><option value="ChengDU">ChengDU</option><option value="London">London</option><option value="Paris">Paris</option><option value="Singapore">Singapore</option><option value="HongKong">HongKong</option><option value="LosAngeles">LosAngeles</option><option value="Chicago">Chicago</option><option value="Sydney">Sydney</option><option value="SEOul">SEOul</option> </dataList></form></body>
autofocus 属性
该属性可以让某些控件自动的获取光标焦点，常用于某些需要自动获取焦点的控件，例如向用户 展示许可协议时，默认的焦点就聚焦在同意这个按钮上面，如下：
<body>
<h3>请认真阅读许可协议</h3> <textarea name="" ID="" cols="30" rows="10">
本许可协议允许其他人发行、再混合、调整、以您的作品为基础进行创作。 即使出于商业性目的，只要他们指明您的原创身份。
这是我们提供的最具有适应性的许可协议。推荐用于最大程度散布和使用被授权作品。 </textarea>
<div>
<button autofocus="on" > 同意 </button> <button> 不同意 </button>
</div>
</body>
请认真阅读许可协议
本许可协议允许其他人发 行、再混合、调整、以您的作品为 基础进行创作。
即使出于商业性目的，只要 他们指明您的原创身份。
这是我们提供的最具有适应 性的许可协议。推荐用于最大程度 散布和使用被授权作品。
同意 不同意
属性值有两个，分别是on和off，设置为on代表开启自动焦点，off代表不开启。当然不开 启自动焦点的话直接不书写该属性就可以了。
form属性在以前提交表单的时候，只能提交位于vfo rm＞标签以内的表单控件的内容，如果是处
于<fo rm＞标签以外的表单控件，内容是无法被提交到的。通过form属性，我们可以采集到处 于vfo rm＞以外的表单控件的内容，只需要在表单的form属性里面填写表单的ID便可以和该 表单进行绑定，示例如下：
<body>
<form action="#" ID="myForm">
<input type="text" name="test1">
<button〉提交 </button>
</form>
<input type="text" name="test2" form="myForm"> </body>
如果一个form属性要引用两个或者两个以上的表单，只需要用空格将表单的ID间隔开即可
＜input type="text" name="test2" form="myForm1 myForm2 myForm3"＞
表单重写属性新增的表单重写属性是一套属性，包括下面的属
性： form action、form enctype、form method、form novalIDate、formtar get。这里 讲一个for maction，其他的属性用法是一样的。之前的form表单，action属性表示将表单内 容提交到哪一个页面，但是有一个缺点就是所有的信息都会被提交到一个固定的页面，有 了 for maction以后，就可以将不同的信息提交到不同的页面。
这里除了 testl文本框被提交给l.PHP以外，其他的文本框内容就被提交给了不同的页面。
List属性该属性主要是和HTML5新增的＜dataList＞标签配合使用的，List属性里面写
上＜dataList＞标签的ID即可，前面在演示autocomplete属性时已经演示过了，这里不再做 过多介绍。
最值属性这个在前面介绍H TML5新增控件的时候也已经见到过了，主要用
于number,range,date等控件里面。
max：输入框允许的最大值
min：输入框允许的最小值
step：输入框输入数字时的数字间隔
multiple属性这个属性可以用于设置下拉列表显示多个选项，或者上传文件时上传多个文件。
<body>
<form action="">
<input type="file" name="" ID="" multiple>
<button> 提交 </button>
</form>
</body>
选择文件2个文件 提交
pattern 属性这个属性是相当方便的一个属性，简化了表单验证中正则表达式的书写方式，直接将正则表达式 作为该属性的属性值即可，示例如下：
<body>
<form action="">
<input type="text" pattern="/入\d{6}$/">
<button> 提交 </button>
</form>
</body>
占位符属性placeholder属性用于给文本框一个默认的内容
<body>
<form action="">
<input type="text" placeholde r="请填写您的用户名"〉
<button> 提交 </button> </form>
</body>
请填写您的用户名 提交
required 属性为表单控件书写上该属性表示此项目为必须填写项目
<body>
<form action="">
<input type="text" required> <button> 提交 </button>
</form>
</body>
novalIDate 属性该属性用于在提交表单时取消整个表单的验证，关闭对表单内所有元素的检查，如果只想取消一 个，那么就可以使用前面所讲的for mnovalIDate属性单独用于表单里的某一个控件里面。示例 如下：
<body>
<form action="" novalIDate> <input type="email" name="email"> <button> 提交 </button>
</form>
</body>
11-6下拉列表和多选列表的使用
在表单元素中，下拉列表和多选列表也是较为常用的元素之一。
<select>
<option> 成都 </option>
<option> 北京 </option>
<option> 上海 </option>
</select>
这两种效果的列表元素前面已经介绍过，这里我主要为大家介绍如何在Js中动态为它们添加、删 除和获取选中的节点。这些 *** 作实际就是对元素option的增删改。使用之前介绍过的DOM *** 作是 可行的，但除此以外，还可以使用DOM中专门为select/option元素提供的方法。
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获取的是列表中o ption的集合，这个集合不是数组，它是重新封装的集合对 象。所以增加元素的方法是add，而不是push。
? HTML0ptionsCollection(4) [option,option,selectedlndex: 0]
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);
}
}
11-7表单常见 *** 作
本小结我们将结合前面学习到的知识，来看一下项目开发中常见的表单相关 *** 作。
11-7-1全选和反选
全选，全不选以及反选是网页中最常见的应用，实现代码如下：
苹果<input type="checkBox" name="fruit" value="苹果">香蕉<input type="checkBox" name="fruit" value="香蕉">橘子<input type="checkBox" name="fruit" value="橘子">榴莲<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 > <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>
这里，我们使用for循环来遍历所有的复选框，通过设置复选框的checked来控制复选框有没有 被选中。
11-7-2下拉框特效
有些时候，我们需要将一个框里面的内容移动到另外一个框里面，下面的代码演示了这一效果:
<h3>队伍配置</h3><select name="" ID="sel1" size="8" multiple> <option value="">赵信</option> <option value="">泰达米尔</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++){ sel1.appendChild(childs[i]); } } </script>
效果：可以自由的移动两个下拉列表里面的选项
当然，这个特效在我们的实际项目中可能很少用到，这里使用这个实例是为了让大家知道，如果 我们没有创建新的节点，而是直接获取到HTML中的节点往其他节点中进行添加，那么会是一个 移动的效果，就是把节点从原来的位置移动到我们要添加的那个节点下面。
11-7-3下拉列表联动
下拉列表联动也是页面中比较常见的一个效果。例如当我们选择中国时，就会出现与中国相关的 城市，而当我们选择日本时，就会显示和日本相关的城市，也就是说选择不同的国家，后面的下 拉列表里面的内容就不一样，实现如下：
<!-- 下拉列表联动 --> <select name="" ID="province"> <option value="">请选择国家</option> </select> <select name="" ID="city"> <option value="">请选择城市</option> </select> <select name="" ID="county"> <option value="">请选择区县</option> </select> <script> let provinceData = ["中国","日本"]; let cityData = [ ["北京","上海","广州","深圳","成都"],["东京","大阪","京都"," 名古屋","北海道"],]; let countyData = [ [ ["东城区","西城区","朝阳区","丰台区","石景山区"],["黄浦区","徐汇区","长宁区","静安区","虹口区"],["越秀区","荔湾区","海珠区","花都区","南沙区"],["福田区","罗湖区","南山区","龙华区","宝安区"],["锦江区","武侯区","青羊区","金牛区","高新区"],],[ ["千代田区","新宿区","墨田区","中野区","品川区"],["大正区","港区","鹤见区","旭区","天王寺区"],["右京区","左京区","上京区","下京区","京都区"],["热田区","北区","邵和区","中村区","守山区"],["深川区","北广岛市","江别市","千岁区","惠庭市"],] ; //获取三个下拉列表的对象 let provinceObj = document.getElementByID("province"); let cityObj = document.getElementByID("city"); let countyObj = document.getElementByID("county"); //首先将国家的信息新添加到第一个下拉列表里面 for(let i =0;i < provinceData.length;i++){ // 创建空的option选项 let newOption = document.createElement("option"); newOption.value = i;//设置option的属性值 从0 开始 newOption.innerText = provinceData[i];//设置option的文本值 provinceObj.appendChild(newOption);//将option添加到第一个下拉列表 } //监测第一个下拉列表，一旦选项有改变，做如下的 *** 作 provinceObj.onchange = function(){ //清空后面两个下拉列表的内容 cityObj.INNERHTML = ""; countyObj.INNERHTML = ""; //将第一个下拉列表的value值作为ID号 let provinceID = provinceObj.value; if(provinceID === "")//如果ID号为空。则后面两个下拉列表显示如下内容 { let newOption = document.createElement("option"); newOption2.innerText = "请选择区县"; 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>
效果：
请选择国家0 请选择城市0 请选择区县0
选择"中国"以后，自动出现第一个城市和与第一个城市相关的区县
主要就是对前面两个下拉列表的内容变化进行监听，然后动态的给每个下拉列表添加 上 <option> 元素。
@H_929_2502@ 总结以上是内存溢出为你收集整理的表单编程全部内容，希望文章能够帮你解决表单编程所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）