八.结构标记
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>
属性:
①action—定义表单提交时发送的动作(发送给哪个URL)
默认缺省提交给本页面
②method—定义表单的提交方式
默认缺省是http原生的"get"方法:特点:明文提交,内容在地址栏显示,提交的数据有大小限制(2kb),使用时机—向服务器要数据的时候
第二种http原生的post方法
特点①隐式提交,提交的内容不在地址栏显示②post提交的数据没有大小限制
③其他原生
③enctype—指定表单提交的数据的编码方式(允许将什么样的数据提交给服务器)
取值①application/x-www-form-urlencoded—允许提交任意字符给服务器②multipart/form-data:允许提交文件给服务器③text/plain允许提交普通字符给服务器
(2)表单控件
是在form标签中能够与用户进行可视化数据交互的元素
(2.1)分类
基础 9种
h5新增10种
textarea 多行文本域
select和option 下拉选择框
22种加上其他元素
(2.2)input公有属性
< input type="">
(1)属性
①type:input元素的类型
②name:为控件定义名称,把名称提供给服务器端使用,如果form表单想提交数据,必须写name属性.使用ajax提交时,多数input不写name属性(单选多选除外)
**③value:**控件的值,但是所有按钮的value,设置的是按钮上的文本
④disabled: 禁用,不能修改,也不能提交.无值属性(也可以写成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”
来源：CSDN
作者：VtoC
链接：https://blog.csdn.net/vet_then_what/article/details/103761261