表单

一、HTML5中的页面布局

语义化标签：

header       标题头部

footer        标记底部

section     页面中的独立区域，一般都是写中间内容

article       独立的文章内容

aside       侧边栏

nav         导航类辅助内容

二、表单

1、表单标签和表单属性：在HTML5中，使用过form来表单的创建。

action     指示服务器处理表单输出

method   告诉浏览器如何发送给数据

method 属性：有post,get值。一般推荐使用post，因为有加密效果

post和get区别：

• post相比get要安全
• get有长度限制
• get中，url地址栏中是否有拼接

2、<input>标签常用属性

type:指表单元素类型，默认是text

name:表单元素名称。

value:表单元素初始值。

size：表单元素初始宽度。

type里面的属性有：

• 文本框：text
• 密码框：password   有加密效果
• 单选按钮：radio 默认选中是checked
• 复选框：checkbox 
• 普通按钮：button
• 提交按钮：submit
• 重置按钮：reset  会清空数据
• 图片按钮：image
• 文本域：file  
• 网址：url
• number：数字
• 滑块：range
• 搜索框：search

多行文本域：textarea 标签 ，注意不能使用value属性

列表框（下拉框）：select标签，结合option标签使用。

3、表单的高级应用

隐藏域：hidden  

只读：readonly  不能修改属性

禁用：disabled  禁用属性，只有满足某个条件后，才能显示某项功能。

表单标注：

<label for="设置一个id值"> 要标注的文本信息</label>

注释：标注文本，那么对应的单选按钮会改变，显示文本框的焦点。

4.表单的验证

好处：

• 可以减轻服务器压力，在用户输入时，可以做一些简单的验证
• 保证数据的可行性和安全性

5.表单验证的方法

placeholder （占位符） 可以用来文本提示，提高用户体验

适合标签：text,search,url,eail,password等类型。

required      验证文本框填写不能为空，如果不为空就可以提交表单

适合标签：text,search, url, email,password,number,checked,radio,file等类型。

pattern      正则表达式：  可以验证用户输入的内容是否与自定义内容相同！