什么是表单元素
在HTML中表单元素指form标签，它的作用是把用户输入或者选择的信息提交给后台。
<form action="#" method="post" enctype="application/x-www-form-urlencoded">
</form>
form标签的属性：
action：表单提交地址
method：提交方式
enctype：数据传递的方式，这是默认的方式，即以键值对的方式提交。
获取表单元素
<form id="fm" name="form1">
</form> <script>
// 方法1
let fm = document.getElementbyId("fm");
//方法2
let fm = document.forms[0];
//方法3
let fm = document.forms["form1"]; //其中的form1 可以是id或者name 的值
//方法4
let fm = document.form1; //其中的 form1只能是name 的值
</script>
表单字段(域)
表单字段包含在form标签里面，但不意味form标签里的所有元素都是表单字段
表单字段指：
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标签都带有提交功能
HTML 5新增的 type类型：
email̵url、number、range、date、time、datetime-local、month、week、search、tel、color
获取表单字段
<form id="fm" name="form1">
<input type="text" id="phone" name="phone" />
</form> <script>
// ឴获取表单元素
let fm = document.getElementbyId("fm");
//方法1
let field = document.getElementById("phone");
//方法2
let field = fm.elements[0]; // elements 是获取表单元素中的所有表单域对象，通过下标值访问某一个表单字段
//方法3
let field = fm.elements["phone"]; //其中的phone 可以是 id 或 name 的值
//方法4
let field = fm.phone; //其中的phone 可以是 id 或 name 的值
//方法5
let field = fm["phone"]; //其中的phone 可以是 id 或 name 的值
//方法6
let field = fm[0]; // ٌ其中的下标值表示表单字段在表单元素中的序号
</script>
获取表单字段的值
可以通过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
// 如果是文本域可以通过 innerHTML 来获取值
console.log(test2.innerHTML); // this is a test,too
</script>
</form>
</body>
常见表单属性介绍
form
action：表单提交地址
method：提交方式
enctype：数据传递的方式
autocomplete：是否启用表单的自动完成功能，默认为 no
name：表单名
target：规定在何处打开action指定的地址
input
autocomplete：规定input 元素输入字段是否启用自动完成功能。默认为no
autofocus：规定页面加载时input元素应该自动获得焦点
checked：规定 type=checkbox/radio 时是否为选中状态
disabled：禁用该属性
list：指向引用的datalis，值为 datalist 的 id
maxlength：规定input元素中允许的最大字符数
name：表单字段的名称
placeholder：规定可描述输入input字段预期值的简短提示信息
readonly：规定输入字段是只读的
type：规定要显示的input元素的类型
value：指定input元素的value值
textarea
autofocus：规定当页面加载时input应该自动获得焦点
disabled禁用该属性
maxlength：规定input元素中允许的最大字符数
name：表单字段的名称
placeholder：规定可描述输入input字段预期值的简短提示信息
readonly：规定输入字段是只读的
rows：规定文本区域内可见的行数
cols：规定文本区域内可见的列数
textarea是通过 cols 和 rows ં属性来规定 textarea 的尺寸大小，不过最好使用 CSS的height 和 width属性
select
autofocus：规定当页面加载时input应该自动获得焦点
disabled禁用该属性
name：表单字段的名称
multiple：当指定了该属性时下拉列表变为多选列表
option
注：option只能包含在select或datalist中
disabled：规定此选项在首次加载时被禁用
selected：规定选项(在首次显示在列表中时)表现为选中状态
value：定义送往服务器的选项值
button
autofocus：规定当页面加载时自动获得焦点
disabled：规定此选项在首次加载时被禁用
type：只有3个值，button 表示普通按钮，submit 表示添加按钮，reset 表示重置按钮
value：按钮中的文本值，可以写在开始和结束标签之间
特殊属性
即不用填写属性值即可生效
autofocus、readonly、disabled、multiple、checked、selected
表单事件
| 事件名称 | 事件的触发场景 |
|---|---|
| onsubmit | 当表单提交的时候触发 |
| onchange | 当修改表单字段的时候触发(内容出现改变就会触发) |
| onfocus | 获取焦点事件 |
| onblur | 失去焦点事件 |
| onreset | 点击重置按钮时触发 |
| oninput | 在输入框里输入或删除一个字符是触发 |
html5新增表单控件
email：电子邮箱文本框,跟普通的没什么区别
- 当输入不是邮箱的时候,验证不通过
- 移动端的键盘会发生变化
tel：电话号码
url：网页的URL
search：搜索引擎
- chrome下输入文字后，会多出一个关闭的X
range：特定范围内的数值选择器
- min、max、step(步数)
- 例子： 用js来显示当前数值
number：只能包含数字的输入框
- 输入框末尾有两个箭头 上为加 下为减
color：颜色选择器
- 点击显示颜色版
datetime：显示完整日期
- 类似select选择样式
datetime-local：显示完整日期， 不包含时区
time：显示时间，不含时区
date：显示日期{年月日}
week：显示周{年月日周}
mouth：显示月{年月}
html5新增表单特性和函数
placeholder：输入框提示信息
- 例子：微博的密码框提示
autocomplete
- 默认为on，关闭提示选择off
autofocus：指定表单获取输入焦点
list和datalist：为输入框构造一个选择列表
- list值为datalist标签的id
required：此选项必填， 不能为空
Pattern：正则验证
- pattern=“\d{1,5}”
Formaction在submit里定义提交地址
1164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
