HTML表单标签和HTML5新标签

[HTML表单标签和HTML5新标签]

1. HTML表单标签

现实中的表单，类似我们填的单子。目的是为了收集用户信息。在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。
　　表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
　　提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
　　表单域：他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

1.1input 控件

在上面的语法中，标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，标签还可以定义很多其他的属性，其常用属性如下表所示。

1.2.label标签

label 标签为 input 元素定义标注（标签）。
作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点如何绑定元素呢？
for 属性规定 label 与哪个表单元素绑定。

Male

1.3.textarea控件

如果需要输入大量的信息，就需要用到标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

 文本内容 

1.4.下拉菜单

使用select控件定义下拉菜单的基本语法格式如下

 
选项1
选项2
选项3 
... 

注意：

1. 中至少应包含一对。
2. 在option 中定义selected =" selected "时，当前项即为默认选中项。

1.5.表单域

在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

 各种表单控件 

常用属性：

1. Action
   在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数
   据的服务器程序的url地址。
2. method
   用于设置表单数据的提交方式，其取值为get或post。 3. name
   用于指定表单的名称，以区分同一个页面中的多个表单。

2.HTML5新标签

2.1.文档类型设定

document
HTML: sublime 输入 html:4s
XHTML: sublime 输入 html:xt
HTML5 sublime 输入 html:5

2.2.常用新标签

header：定义文档的页眉 头部
nav：定义导航链接的部分
footer：定义文档或节的页脚 底部
article：定义文章。
section：定义文档中的节（section、区段）
aside：定义其所处内容之外的内容 侧边

 语义 :定义页面的头部 页眉
 
 语义 :定义导航栏 
 
 语义: 定义 页面底部 页脚
 
 语义: 定义文章
 
 语义： 定义区域
 
 语义： 定义其所处内容之外的内容 侧边

datalist 标签定义选项列表。请与 input 元素配合使用该元素

fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用

 
         
用户登录
 标题
         用户名: 
 

         密 码:  
 

2.3.常用的input type属性值

2.4.常用新属性

2.5.多媒体标签

audio：播放音频
video：播放视频

2.5.1.多媒体 audio

HTML5通过

 

为了浏览器兼容， 我们需要做三种声音文件 ogg mp3 wav 

autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放 loop = 2 就是循环2次 loop 或者 loop = “-1” 无限循环

2.5.2.多媒体 video

HTML5通过
同音频播放一样

   
  我们的视频支持 ogg mp4 webM 三种视频格式
  

同样，通过附加属性可以更友好的控制视频的播放
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
width 设置播放窗口宽度
height 设置播放窗口的高度