小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
表单
为什么说表单在 HTML 中很重要的原因:
-
表单是允许接收用户输入的信息, 其他元素仅是用来向用户展示信息。
-
在 HTML 元素中, 可以与服务端进行通信的只有表单。
目前, 在真实的 Web 应用或网站中, 有哪些是由表单完成的:
-
网站的用户注册和登录功能
-
搜索功能中的搜索框
-
写博客的发布功能
<form>元素
''元素: 代表表单(块级元素)作用:
-
用来接收用户输入的信息
-
与服务端进行通信(向服务端提交信息)
属性:
-
action属性: 设置提交表单的服务端地址
-
method属性: 设置提交表单时的请求类型；值：GET，POST。
enctype属性: 设置表单提交时的MIME类型，主要可实现文件上传。
表单可以划分两个组成部分:
-
’‘元素: 表单的容器元素
表单组件元素: 才是真正用来接收用户输入的信息
-
<input>元素: 输入框 -
<textarea>元素: 文本域 -
<select>元素: 下拉列表
<input>元素: 空元素
属性:
-
type属性: 设置输入框的类型
-
value属性: 设置输入框的默认值
-
disabled属性: 设置输入框是否可用(只设置属性名)
-
readonly属性: 设置输入框是否为只读
HTML5新增属性
-
autofocus属性: 设置输入框自动获取焦点
-
placeholder属性: 设置输入框的默认提示内容
用来替代value属性为用户展示提示信息，输入框类型:text: (单行)文本框，password: 密码框(显示与隐藏动态切换功能)，radio: 单选框，checkbox: 复选框，button: 按钮，submit: 提交按钮，reset: 重置按钮，file: 文件域，hidden: 隐藏域。
HTML5新增：email: 电子邮件，url: URL地址，search: 搜索框，tel: 电话框，，，，。
单选框或复选框: 定义相同的name属性值, 表示为一组，checked属性: 表示当前单选框或复选框被选中。
<input>元素: 按钮
-
button: 普通按钮
-
submit: 提交按钮(提交表单)
-
reset: 重置按钮
注意：<button>与<form>元素没有关系。
文件域: 一般用来实现文件上传或选择头像等功能：
-
数量设置
-
单文件选择: 默认情况
-
多文件选择: 设置multiple
类型设置: 规定选择文件的类型
-
默认: 可以选择任何类型
-
accept属性: 设置选择文件的类型
一般用来存储一些不想用户知道的数据内容, 比如用户ID
提供了Email地址格式的验证
提供了URL地址格式的样式(验证不完整)
搜索框: 移动端显示(右下角按钮显示"搜索")
电话框: 移动端显示(软键盘显示数字)
date: 日期控件
week: 星期控件
month: 月控件
color: 颜色控件
number: 数字控件
元素: 一般配合<input>元素
作用: 为某个文本框提供文本提示内容
-
属性:for属性: 设置的值与
<input>元素的id属性值一致。
输入框的样式
<textarea>元素: 多行文本框
属性:
-
cols: 设置文本域的可视宽度。必须是正数, 默认值为20
-
rows: 设置文本域的可视高度。必须是正数
特点: 允许用户调整在HTML页面中显示区域
<select>元素: 下拉列表
默认情况下, 下拉单选下拉多选：
-
multiple属性: 表示多选
-
size属性: 设置显示几个选项
<option>元素: 列表项目
属性:selected: 设置当前项目被选中，分组: 将<option>元素放在<optgroup>元素中。
组合表单元素
<input>元素与<datalist>元素配合使用
-
<input>元素设置list属性: 值与<datalist>元素的id属性值一致 -
<datalist>元素设置id属性
<datalist>元素:
-
作用: 提供了一组列表项
与<select>元素的区别:
-
<select>元素: 必须在该元素内部定义‘’元素 -
<datalist>元素: 是一个独立的列表项
允许复用的
<meter>元素: 刻度条
属性:
-
value: 表示当前刻度的值(介于min和max之间的值)
-
min: 设置刻度的最小边界
-
max: 设置刻度的最大边界
-
low: 设置刻度的最小预警值
-
high: 设置刻度的最大预警值
<progress>元素: 进度条
属性:
-
value: 表示当前进度的值
-
max: 设置进度的最大值
元素状态伪类选择器
HTML5新增有关表单验证的内容:
提供一系列可用于验证的元素或类型, 比如
<input type="email/url">
提供一系列用于验证的属性:
-
required属性: 验证是否为空
-
pattern属性: 验证与指定正则表达式是否一致
-
min属性: 验证是否小于最小值
-
max属性: 验证是否大于最大值
-
step属性: 验证是否符合步长
-
minlength属性: 验证内容的长度是否小于最小长度
-
maxlength属性: 验证并限制内容的长度是否大于最大长度
