一.表格的结构标签
可以确定表格在浏览器中的位置
htead:代表表格的头部
tbody:代表表格的主体
tfoot:代表表格的尾部
(shift+alt+鼠标=选中没以后的相同位置)
<headeer>头部
<nav>导航
<main>主体
<article>文章
<aside>侧导航
<section>就是普通布局
<footer>底部
(网页的结构是块标签,并且在页面显示的位置与书写位置有关)
二.表单的使用场景
网站搜索框,登录注册等
标签元素
input:输入框,行内块元素
属性: type:设置input的数据类型
可选值:
text:文本
password:密码
radio:单元按钮:需要用name来划分组别,相同的name值为一组
checkbox:多选框,可以同时选择多个,也可以点击取消
email:邮箱,提交时有默认的基本数据格式来判断
date:日期,可以通过value设置默认日期,格式value="2000-01-01"
file:长传文件,默认只能长传一个,可以通过multiple设置一次可以选多个
button:普通按钮
submit:提交按钮,将数据提交到浏览器
reset:重置 mumber:设置数字
tel:手机号码
file:设置手机上传的一个文件
下拉框:select,默认的显示内容为第一个option
下拉选项:option,可以通过selected属性设置默认选项
文本区域:textarea
属性 cols:设置一行显示的宽度
rows:设置默认由多少行
label:提高用户的体验
属性:for="id值" id值:是label要操作的标签id值
补充属性:
placeholder:设置提示,提高用户体验
autofocus:设置输入框自动获取焦点
autocomplete:设置是否自动填充,on(自动填充),off(取消自动填充),注意要写name并且赋值
readonly:设置元素只读,可以选中,但是不能修改
disabled:设置元素禁用,不能修改和选中
required:设置元素必填项
maxlength/minlength:设置输入的字符长度
max/min:设置数字类型输入框的数值范围
表单标签:form
属性:
action:设置提交数据后要跳转的地址
target:设置跳转页面的显示位置, _blank(新的窗口),self(本来的窗口,也是默认值)
method:设置表单数据提交的方式,
属性值
get:是将表单数据在action的url里面传输,数据会在跳转页面的地址栏的?后面显示
post:是将表单数据放在表单内部传输,适用与要传输敏感数据
novalidate:设置表单数据不验证就提交