前端第八次培训（JS表单）

表单基础
Web表单在HTML中以form元素表示，在js中以HTMLFormElement类型表示

HTMLFormElement类型继承自HTMLElement，但是它有自己的属性和方法：

acceptCharset：服务器可以接收的字符集，HTML的accept-charset属性

action：请求的URL，HTML的action属性

elements：表单中所有控件的HTMLCollection

enctype：请求的编码类型，HTML的enctype属性

length：表单中控件的数量

method：HTTP请求的方法类型，通常是get或post，HTML的method属性

name：表单的名字，HTML的name属性

reset()：把表单的字段重设为默认值

submit()：提交表单

target：用于发送请求和接收响应的窗口的名字，HTML的target属性

可以通过document.forms获取页面上所有的表单元素，然后使用表单名来访问：

let forms = document.forms;forms[0];forms["form1"];
1
提交表单
提交表单可以通过type属性为submit的input或button来定义，也可以通过type属性为image的input元素定义

有提交按钮的表单在其控件取得焦点时（textarea除外），回车也能触发提交表单

通过js的form.submit()方法提交表单不会触发submit事件

为了防止用户多次提交表单，可以在用户点击之后禁用按钮或者通过onsubmit事件处理程序取消之后的表单提交

重置表单
通过type属性为reset的input或button，用户可以重置表单

通过js的form.reset()方法重置表单会触发reset事件

表单字段
所有表单元素都是表单elements属性中包含的一个值，这个elements集合是一个有序列表

所有的input、textarea、button、select、fieldset元素都被包含在elements集合中，可以通过索引和name访问

let form = document.getElementById('form');form[0];form['input'];form.length;form.input;
同name元素会作为一个集合返回

1、表单字段的公共属性
除fieldset元素外，所有的表单字段都有一组相同的属性：

disabled：布尔值，表示表单字段是否禁用

form：指针，指向表单字段所属的表单，只读

name：字符串，这个字段的名字

readOnly：布尔值，表示这个字段是否只读

tabIndex：数值，表示这个字段在按Tab键时的切换顺序

type：字符串，表示字段类型

value：要提交给服务器的字段值，对文件输入来说这个字段是只读的，仅包含路径

type属性的特殊值：

单选列表（<select></select>）：select-one、多选列表（<select multiple></select>）：select-multiple

对于input和button元素，可以动态修改type属性，但是select元素的type属性是只读的

2、表单字段的公共方法
每个表单字段都有两个公共方法：focus()和blur()

focus():

焦点在表单字段上时，该字段可以响应键盘事件

但是如果调用focus的字段type为hidden，或者该字段被CSS属性display或visibility隐藏了，则会出错

HTML5为表单字段增加了autofocus属性，支持的浏览器会自动为带有该属性的元素设置焦点，而无需使用js

可以在使用前检测表单是否设置了autofocus属性，以及排除不支持的浏览器（不支持的浏览器返回空字符串），如果表单有这个属性则返回true

通过将tabIndex属性设置为-1在调用focus()，也可以给任意元素设置焦点，只有Opera不支持

blur():

移除元素上的焦点

这两个方法都会触发focus和blur事件

3、表单字段的公共事件
所有字段还支持以下三个事件：

blur：字段失去焦点时触发

change：在input和textarea元素的value变化且失去焦点时触发，或者在select元素中选项发生变化时触发

focus：字段获得焦点时触发

文本框编程
单行input元素、多行textarea元素

input元素省略type会以text作为默认值，size指定文本框宽度（这个宽度是以字符数计量的），value指定文本框的初始值，maxLength属性用于指定文本框允许的最多字符数

textarea元素总是会创建多行文本框，rows属性指定这个文本框的高度（以字符数计量），以cols属性指定文本框宽度（以字符数计量），textarea初始值必须包含在元素之间；textarea不能在HTML中指定最大允许字符数；两种类型的文本框内容都在value中

应该使用value属性而不是DOM方式读写文本框的值，对value属性的修改也不会总体现在DOM中

前端第八次培训（JS表单）相关推荐

掌财社:html5中AmazeUI框架中JS表单验证实战案例展示！
今天和大家分享个有关于"html5中AmazeUI框架中JS表单验证实战案例展示!"这方面的相关内容知识,让大家对于html5中AmazeUI框架也可以有所了解! 1.需求做一个 ...
html表单弹窗提示框,【前端】弹出框提交表单
[前端]弹出框提交表单发布时间:2018-11-03 22:30, 浏览次数:826 目录 * 功能描述 * 效果截图 * 代码 * html代码 * 触发弹出窗口的按钮 * js代码 * 弹出框的 ...
web前端必学功法之一：表单校验（2）
web前端必学功法之一:表单校验(2) 这里采用另一种写法,jQuery写法,在用jQuery写法之前,一定要引入jquery.js. <div class="container&qu ...
项目开发中常用JS表单取值方法
项目开发中常用JS表单取值方法一.常用表单基本取值方法(form1为表单名称,TextBox1为控件ID,以文本框为例,html控件与web服务器控件是一样的) 1.form1.Te ...
anjular.js表单验证实例
应用声明,控制器 <form action="" method="post" id="myForm" name="logFo ...
js表单提交,面向对象
一.js表单验证之后再提交 1.普通按钮onclick函数调用表单的submit()函数 <input type=button name="submit1" value=&q ...
视频教程-Web前端开发利器 SPRY框架之表单验证-JavaScript
Web前端开发利器 SPRY框架之表单验证有17年互联网行业从业经验,始终在教学第一线,勇于创新,从有效教学,不断向高效教学转变.始终坚持"学生为主体,教师为主导:商业化案例,企业化情境& ...
通用的JS表单验证插件代码
一个通用的JS表单验证插件代码.使用方法:第一步:需设定表单项数据类型,第二步:实例表单验证,验证错误提示说明(程序有自带相关错误提示,可自定义每项验证错误提示时文本,只需添加msg). [task] ...
JS表单验证(HTML+CSS+JS)小实例【详细教程】
前言大家好,分享一个HTML+CSS+JS表单校验,包括页面的简单布局,样式渲染,还有基础的JS校验方法.希望大家喜欢!哈哈一.效果图二.介绍图标库使用Element-UI <!-- 引 ...
JavaScript 编程精解中文第三版十八、HTTP 和表单
十八.HTTP 和表单原文:HTTP and Forms 译者:飞龙协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译部分参考了<JavaScript 编程精解(第 2 版)> ...

前端第八次培训（JS表单）

前端第八次培训（JS表单）相关推荐

最新文章

热门文章