表单元素
基本都是行盒
一系列元素，主要用于收集用户数据
input元素（空元素）
输入框
重要属性：
- type属性：输入框类型
有text那些啊，表示你输入的内容是文本、数值、日期等等
取值：
text：普通文本输入框
password: 密码框
date: 日期选择框，有兼容性问题
search: 搜索框，有兼容性问题
number:数字输入框
有min最小值、max最大值、step步长
checkbox：多选框
默认选中：checked=“checked”
radio:单选框
默认选中：checked=“checked”
file:上传文件
- value属性：输入框的值
在输入框中生成值，这个值是存在的。若想输入与这个值不同的值，要先删除这个值。
什么类型的文本框都可以使用
- placeholder属性：显示提示的文本
在输入框中生成提示值，这个值是虚拟的，你直接输入新的文本，这个值就没有了。
这个值在文本框中没有文本时显示
什么类型的文本框都可以使用
- autofocus
自动获取焦点 设置一个元素就好了，设置多个不能触发此效果
- autocomplete
聚焦时会出现你提交过的数据，选择后自动完成；很多元素默认有这个属性。
取值为 on:打开，off:关闭，前提：1.以前成功提交过(因为它提示的就是以前提交过的数据)，2.有设置name属性
- form
平时所有的表单元素都应该是放在form表单里，这样方便提交数据。而有时候，有些表单元素一定要放在form外面，
但又想把数据和前面的form表单一起提交，这个时候就要用到form属性了。用这个属性需要为那个form表单设置id值，
然后把form属性的取值为那个form表单的id值。
<body>
<form action="">
<!--
name 用于辅助提交数据，都要添上
placeholder 提示文本
autofocus 自动获取焦点 设置一个元素就好了，设置多个不能触发此效果
autocomplete 聚焦时会出现你提交过的数据，选择后自动完成；很多元素默认有这个属性。
取值为 on:打开，off:关闭，前提：1.以前成功提交过(因为它提示的就是以前提交过的数据)，2.有设置name属性
required 必须输入，即是设置了这个属性的元素必须有输入值，没有输入会阻止你提交
pattern 判断输入的内容格式是否正确，取值为正则表达式，格式不正确也会阻止你提交
multiple 允许选择多个文件或输入多个邮箱地址(以逗号分割)
form 平时所有的表单元素都应该是放在form表单里，这样方便提交数据。而有时候，有些表单元素一定要放在form外面，
但又想把数据和前面的form表单一起提交，这个时候就要用到form属性了。用这个属性需要为那个form表单设置id值，
然后把form属性的取值为那个form表单的id值。
-->
<!--
扩展关于表单的DOM事件：
input事件 当文本输入框input发生了变化就会触发这个事件
invalid事件 当表单元素验证不通过时会触发这个事件，并且通过this.setCustomValidity('string')可修改错误提示
-->
用户名: <input type="text" name='userName' placeholder="请输入你的名字" autofocus autocomplete='on'> <br>
密码: <input type="password" name="userPwd" required pattern='^(\+86)?1\d{10}$'> <br>
文件: <input type="file" name="photo" id="" multiple> <br>
邮箱: <input type="email" name="userEm" multiple> <br>
<button>提交</button>
</form>
<script>
var userPwd = document.getElementsByName('userPwd')[0];
userPwd.addEventListener('invalid',function(){
this.setCustomValidity('不能为空');
},false)
</script>
</body>
制作按钮
input表示按钮时type的值为：
可以通过value修改按钮上的文本
reset: 重置按钮
button: 普通按钮
submit: 提交按钮
select元素
爱好：
<select multiple="multiple">
<optgroup label="体育">
<option>篮球</option>
<option>足球</option>
<option>网球</option>
</optgroup>
<optgroup label="多媒体">
<option>音乐</option>
<option>电影</option>
<option>网文</option>
</optgroup>
</select>
select元素：下拉列表
子元素option元素：下拉列表的选项
默认选中：selected=“selected”
用optgroup可以将子元素option分类
optgroup的属性label来命名类名
textarea元素
文本框，多行文本框
按钮元素
button
type属性：reset(重置按钮),submit（提交按钮）,button(普通按钮),默认值为submit（提交按钮）
<!-- 建议把type设置为button（普通按钮） -->
<button type="button">这是一个按钮（按钮的名称可写在者）(也可以在这放图片等来作为按钮)</button>
表单状态
readonly属性:布尔属性,表示是否只读,不会改变表单显示样式
disabled属性:布尔属性,表示是否禁用,会改变保单显示样式.
配合表单元素的其它元素
label 元素
普通元素，通常配合单选和多选框使用
- 显式关联
可以通过for属性，让label元素关联某一个表单元素，for属性书写表单元素id的值
<!-- 将“男、女”这个元素或文本关联到input属性，使得点击男、女文本都可以选中 -->
请选择性别：
<input id="nan" name="xb" type="radio">
<label for="nan">男</label>
<input id="nv" name="xb" type="radio">
<label for="nv">女</label>
- 隐式关联
<!-- 将“男、女”这个元素或文本关联到input属性，使得点击男、女文本都可以选中 -->
请选择性别：
<label>
<input name="xb" type="radio">
男
</label>
<label>
<input name="xb" type="radio">
女
</label>
datalist 元素
数据列表
该元素本身不会显示到页面，通常用于和普通文本框配合使用
form元素
通常，会将整个表单元素，放置form元素的内部。
作用是当提交表单时，会将form元素内部的表单内容以合适的方式提交到服务器。
form元素对开发静态页面没有什么意义
fieldset 元素
表单里面进行分组
有子元素:legend,用于写该组的组名
<fieldset>
<!-- 组名写在legeng里 -->
<legend>分组的组名</legend>
<!-- 下面写该分组下的表单元素 -->
</fieldset>
751
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
