一、表单的作用:收集用户信息
<form action="数据提交的路径" name="" method="数据提交方式"></form>
二、表单控件:
<input type="text"> 文本框
<input type="password"> 密码框
<input type="submit"> 提交按钮
<input type="reset"> 重置按钮
<input type="button"> 空按钮
三、补充表单控件:
1:单选按钮:
<input type="radio">
注:在单选按钮里面:每一组单选按钮 保持name属性值一致。
2: 多选按钮(复选框)
<input type="checkbox">
3: 下拉菜单(下拉列表)
<select>
<option></option>
<option></option>
<option></option>
...
</select>
4: 多行文本域
<textarea></textarea>
cols 和 rows 以字符为单位
注:阻止用户进行缩放 css属性 resize:none;
5: 上传文件框
<input type="file">
四、HTML5新增控件:
email 限制用户必须输入email类型
url 限制用户必须输入URL类型
number 限制用户必须输入数字类型
range 产生一个滑动条
color 产生一个颜色选择框
search 产生一个搜索框
time 时间类型
month 月份
week 周
datetime-local 选取本地时间
date 只有年月日
五、补充表单的html属性
1:默认选中
checked="checked"
2: 表单控件的禁用
disabled="disabled"
3: 下拉列表里面的默认选中
selected="selected"
六、HTML5新增属性:
min 最小
max 最大
required 如果表单没有输入内容的情况下,禁止提交
step 确定一个法定值eg : 3 -6 -3 0 3 6 9
autocomplete 自动提示信息 属性值 on/off
placeholder 文本框的提示信息
autofocus 自动聚焦
pattern 属性值是一个 正则表达式(高效的字符串处理规则)
novalidate 取消验证
multiple 选择(上传)多个 输入框里面把逗号分隔的当作两个提交的信息
list属性 必须和datalist 标签结合使用,绑定的datalist的id名称
七、表单里面的标签:
1: fieldset(表单字段集)
①作用:给表单做分组
②特点:
默认情况下自带边框
可以进行互相嵌套
l2:legend (字段集标题)
① 作用:是fieldset 一组里面的一个标题
②特点:一般情况下,放在fieldset第一个子元素位置。
③ <label for=""></label>
④说明:
label里面放的是提示信息
for属性:绑定对应控件的id名称
八、HTML5表单里面新增标签:
①<datalist> 做提示信息的 必须和list属性结合使用
<option value=""> 可以追加一个label属性
</datalist>
②<output for="关联的是要做运算的元素的id名称"><output> 做输出的(计算结果的输出)