#### 八. 结构标记
h5 新出的标记. 作用是取代 div 描述整个网页的结构, 增加代码的可读性, 和 div 的作用一模一样, 只是增加了可读性
1 <header></header> 头部
2 <footer></footer> 脚部
3 <nav></nav> 导航栏
4 <section></section> 主体内容
5 <aside></aside > 侧边栏
6 <article></article> 定义与文字相关的内容 (论坛, 回帖, 评论等)
- #### 九. form 表单 (***)
- ###### 1 作用
(1) 提供可视化的输入控件
(2) 收集机用户输入的信息, 并提交给服务器
注意: Ajax 可以提交请求, 可以接收请求
使用 form 就不用 form
不用 form 就需要手动收集信息
- ###### 2 form 的组成
- #### (1)<form> </form>
** 属性:**
**1action**--- 定义表单提交时发送的动作 (发送给哪个 URL)
默认缺省提交给本页面
**2method**--- 定义表单的提交方式
默认缺省是 http 原生的 "get" 方法: 特点: 明文提交, 内容在地址栏显示, 提交的数据有大小限制 (2kb), 使用时机 --- 向服务器要数据的时候
第二种 http 原生的 post 方法
特点1隐式提交, 提交的内容不在地址栏显示2post 提交的数据没有大小限制
3其他原生
**3enctype**--- 指定表单提交的数据的编码方式 (允许将什么样的数据提交给服务器)
取值1application/x-www-form-urlencoded--- 允许提交 * 任意字符 * 给服务器2multipart/form-data: 允许提交文件给服务器3text/plain 允许提交 * 普通字符 * 给服务器
#### (2) 表单控件
是在 form 标签中能够与用户进行可视化数据交互的元素
##### (2.1) 分类
基础 9 种
h5 新增 10 种
textarea 多行文本域
select 和 option 下拉选择框
22 种加上其他元素
- ##### (2.2)input 公有属性
- <input type="">
(1) 属性
**1type:input** 元素的类型
**2name**: 为控件定义名称, 把名称提供给服务器端使用, 如果 form 表单想提交数据, 必须写 name 属性. 使用 Ajax 提交时, 多数 input 不写 name 属性 (单选多选除外)
**3value:** 控件的值, 但是所有按钮的 value, 设置的是按钮上的文本
**4disabled:** 禁用, 不能修改, 也不能提交. 无值属性 (也可以写成 disabled="disabled")
##### (2.3)input 标签详解
**(2.3.1) 文本框和密码框 **
文本框: type="text" : 默认缺省值
密码框: type="password"
属性: maxlength: 输入最大长度; readonly: 能看不能改, 但是可提交 (disabled 不可提交);placeholder: 占位提示符
**(2.3.2) 按钮 **
type="submit"--- 将表单中的数据收集整理, 并发送到服务器
type="reset"--- 将当前表单提交到初始化状态
type="button"--- 没有功能, 配合事件, 调用 JS 代码
h5 的 < button></button > 代替了 input, 配合时间调用 JS
注意: 按钮的 value 不提交, 只设置显示的文本
**(2.3.3) 单选和多选按钮 **
name 属性除作为控件名称外, 还作为控件分组
** 单选按钮:** type="radio" 必须有 value 才能正确传递值
** 复选按钮:** type="checkbox", 必须有 value 才能正确的传递值
单选和复选框有一个共同的无值属性: checked
**(2.3.4) 隐藏域 **
type="hidden"
想把数据提交给服务器, 但是不想展示给用户看
**(2.3.5) 文件选择框 **
type="fle"
前提: method="post",enctype="multipart/form-data"
多选: 无值属性 ---multiple
**(2.4) 多行文本域 < textarea></textarea>**
允许录入多行文本, 其中的属性 cols,rows 根据计算机的类型不同不太准确
**(2.5) 下拉选择框 **
- <select name="city">
- <option>
- 安徽
- </option>
- ...
- </select>
select 属性:
- **name**
- **value**(选中 option 的内容, 如果 option 没有 value 值, 那么 select 的 value 是选中的 option 的内容, 如果 option 有 value, 那么 select 的是 option 的 value 值)
**selected:** 默认选中
**size:** 每次显示的行数,>1 时变成滚动选择框
**multiple:** 可多选
**(2.6) 其他元素 **
(2.6.1)label
作用:(1) 替代 form 中的 span;(2) 文本和表单控件的关联
(2.6.2) 为控件分组
- <fieldset>
- </fieldset>
- 控件分组
- <legend>
- </legend>
- 分组的标题 (写在 fieldset 第一个标签下面)
(2.6.3) 浮动框架
在一个 html 中引入其他 HTML 页面
<iframe src="引入文件的路径" width=""height="" frameborder="2px" scrolling="yes/no">
**(2.7) 新表单元素 **
(2.7.1) 邮箱
input type="email"
对输入内容简单验证: 有 @且 @后面有符号
(2.7.2) 搜索类型
input type="search"
自带快速清除的小叉叉
(2.7.3)URL 类型
input type="url"
验证以 http: 开头
(2.7.4) 电话号码类型
input type="tel"
在移动设备使用时, 获取焦点, 弹出虚拟键盘
(2.7.5) 数字类型
input type="number" max=20 min=2 step=3
max: 能接受的最大值
min: 能接受的最小值
step: 步长
(2.7.6) 范围类型
input type="range" max=20 min=2 step="3"
(2.7.7) 取色器
input type="color"
(2.7.8) 日期类型
input type="date"
(2.7.9) 月份类型
input type="month'
(2.7.10) 周类型
input type="week"
来源: http://www.bubuko.com/infodetail-3456519.html