总结
一、 表单概述
- 1. 什么是表单：表单是一块可采集用户数据的区域：表单对后端开发者至关重要
- 2. 如何创建表单区域：
a) 用form元素表示表单
b) 用action属性表示表单的提交地址
c) 用method属性表示表单的提交方式
d) 在制作静态页面时，可不用书写上述的属性
e) 在制作静态页面时，建议不要设置form元素的样式
- 3. 表单中可放置哪些元素
a) 对于静态页面的开发者，表单只是一个普通的块盒，内部可放置任何元素
b) 通常情况下，表单中会放置一些可以与用户进行交互的元素
文本框 <input type=”text”>
点击按钮 <input type=”buttont” value=”点击”>
提交按钮 <input type=”submit” >
复选框 <input type=”checkbox” name =”” value=””>
单选框 <input type=”radio” name =”” value=””>
文件上传 <input type=”file”>
密码 <input type=”password”>
重置按钮 <input type=”reset”>
隐藏 <input type=”hidden” name =”” value=””>
数字框 <input type=”number” min =”” max=”” step=””>
滑块数字 <input type=”range” >
日期框 <input type=”date” >
年月框 <input type=”month” >
一年中的第几周 <input type=”week” >
时间 <input type=”time” >
下拉列表：<input type=“text”id=“”list=“a”>
<datalist id=”a”>
<option value=””></option>
<option value=””></option>
</datalist>
<select name=”” id =””>
<option value=””></option>
<option value=””></option>
</select>
分组 <opegroup></opegroup>
多行文本
<textarea name=”” id=”” rows=”” cols=””></trxearea>
分组信息
<fielaset>
<legend></legend>
<legend></legend>
</fielaset>
属性：name：发送到服务器的键名 value：发送到服务器的值
Maxlength：长度 required：要求必须填
Pattem：填写规则 disabled：禁用
Placeholder：提示 readonly：只读
Autocomplete：自动识别 selected：选择
Size：展示个数 <label></label>关联
由于这些交互元素通常出现在表单中，因此，我们常称之为表单元素
- 4. 表单元素的两个重要属性
name属性：表示发送到服务器的键名
value属性：表示发送到服务器的值
二、 表单元素—文本框
使用input元素表示一个文本框：input是一个空元素
可通过type属性设置文本框类型
三、 表单元素—按钮
1) 使用input元素或button元素表示按钮
2) 按钮有很多种
a) 普通按钮：点击后没有任何额外的效果
b) 重置按钮：必须出现在表单中，点击后将其他表单元素重置为初始值
c) 提交按钮：必须出现在表单中，点击后会将表单数据提交到服务器
d) 图片按钮：功能同提交按钮一样，只不过样式为一张图片，该按钮已很少使用
3) input和button的比较
a) input是空元素，button是普通元素
b) input是旧版本中的元素，button是HTML5中的元素
c) input按钮中只能写文本，button的内容更加丰富
d) input的兼容性更好，button稍差
四、 表单元素—下拉列表
使用select和option元素的组合表示下拉列表
下拉列表的类型：普通的下拉列表
选项分组的下拉列表
五、 表单元素—数据列表和多行文本框
使用datalist元素表达数据列表
使用textarea元素表达多行文本框
<textarea name=”” id=”” rows=”” cols=””></trxearea>
六、 表单元素的分组和状态
使用fieldset和legend元素，对表单内容进行分组
使用disabled属性和readonly属性，设置表单元素的可用状态
七、 美化表单元素
1、 伪类focus：表示聚焦时候的样式，常用于表单元素
2、 认识表单元素的默认样式
表单元素均默认为行盒——水平排列
表单元素均为可替换元素——可设置盒模型中各个部分的尺寸
文本框聚焦时会有outline