HTML基础——表单的构成、HTML5的新增内容

表单

基本介绍

用来提交到数据库的信息
各个信息都是通过输入框，按钮（控件）来进行提交
< form action＝"url" method=get|post name=“myform” >

  -name：表单提交时的名称
  -action：提交到的地址
  -method：提交方式，默认为get

post和get区别：
1.数据提交方式，get把提交的数据url可以看到，post看不到
2.get一般用于提交少量数据，post用来提交大量数据
3.get最多提交1K数据，post理论上没有限制
4.get提交的数据在浏览器历史记录中，安全性不好

基本组成

一个完整的表单包含三个基本组成部分：
表单标签、表单域、表单按钮。

1.表单标签
是指标签本身，它是一个包含表单元素的区域，使用定义

2.表单域
是标签中用来收集用户输入的每一项，通常用input标签来定义，input标签有不同的类型，对应用户不同的数据。（比如：文本域、下拉列表、单选框、复选框等等）

3.表单按钮
用来提交表单中的所有信息到服务器
* 表单域和表单按钮都属于表单元素。

单行文本框默认值是type="text"
密码框　
单选按钮
复选框
隐藏域
文件上传
  下拉框标签
       北京
多行文本
提交按钮
普通按钮
重置按钮

控件介绍

文本框

< input type=“text” />
属性：
name:定义控件名称
value：指定控件初始值

密码框

< input type=“password” />
属性：
name:定义控件名称
value：指定控件初始值

单选按钮

< input type=“radio” />
属性：
name:定义控件名称
value：指定控件初始值
checked：设置控件初始状态是否被选中

复选框

< input type=“checkbox” />
属性：
name:定义控件名称
value：指定控件初始值
checked：设置控件初始状态是否被选中

爱好:
	  游戏
         唱歌
         跳舞

文件

< input type=“file”/>
属性：
name:定义控件名称
使用file类型的input时要注意以下几点
1.form表单的method属性值要为post
1.form要加enctype="multipart/form-data"属性，这个属性说明了我们的文件以二进制方式传输文件，因为我们计算机本身最底层都是以二进制来显示、传输。
默认地，表单数据会编码为 “application/x-www-form-urlencoded”，不能用于文件上传

按钮

< input type=“button” />
属性：
name:定义控件名称
value：指定控件初始值

提交按钮

< input type=“submit” />
属性：
name:定义控件名称
value：指定按钮表面显示文字

重置按钮

< input type=“reset” />
属性：
name:定义控件名称
value：指定按钮表面显示文字

图像图片按钮

< input type=“image” src=“URL”/>
属性：
name:定义控件名称
src：指定图像地址

按钮

< button>按钮< /button>
属性:
type:button/submit/reset,默认值为submit

下拉列表框

	选项
	选项
	选项

select属性：
name:此列表框的名字
multiple：多选，不用赋值
size :规定下拉列表中可见选项的数目(显示几行)
disabled:规定禁用该下拉列表
option属性：
selected ：用来指定默认的选项
value： 用来给< option>指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用区域的名字的value 属性来获得该区域选中的数据项的

下拉分组列表

	
	东城区
	西城区
	海淀区
	
	
		石家庄
		保定市
		沧州市
	

多行文本框

< textarea>< /textarea>
属性：
cols ：这文字区块的宽度
rows ：这文字区块的行数，即其高度

< textarea name="" id="" cols=“30” rows=“10”>< /textarea>

label 点击文字选择

标签为 input 元素定义标注。
abel是input的描述，它本身不会有特殊效果，但它和其它input标签使用可以提升用户的使用体验，用户不用非得点击到按钮，而是点击文字即可选中，如“记住密码”

  记住密码
  

*通过label的for指向按钮的id来绑定，for和id属性的值要相同

	Male
	


标签一般和radio、checkbox类型一起使用。

fieldset元素集

fieldset 元素可将表单内的相关元素分组，通常和legend标签一起用，legend标签定义了fieldset的提示信息，fieldset是块级元素。

		     
健康信息
 身高：
 体重：

HTML5新增控件

电子邮件类型

功能描述：输入E-mail地址的文本框
语法：< input type=“email”/>
注意：输入的内容中必须包含"@"，"@"后面必须具有内容

搜索类型

功能描述：输入搜索关键字的文本框
语法：< input type=“search”/>

URL类型

功能描述：输入WEB站点的文本框
语法：< input type=“url”/>
注意：输入的内容中必须包含"http://"，后面必须有内容

颜色类型

功能描述：预定义的颜色拾取控件
语法：< input type=“color”/>

数字类型

功能描述：只能接受数字
语法：< input type=“number”/>
属性：min：当前域能接受的最小值
max：当前域能接受的最大值
step：决定了域所接受值递增或递减的步长，默认为1

范围类型

功能描述：允许用户选择一个范围内的值
语法：< input type=“range” min=“0” max=“100” value=“80”/>
属性：min：范围的下限值
max：范围的上限值
step：声明该值递增或递减的步长
value：设置初始值

日期类型

功能描述：创建一个日期输入域
语法：< input type=“date” />

周类型

功能描述：与date类型相似，但只能选择周
语法：< input type=“week” />

月份类型

功能描述：与date类型相似，但只能选择月份
语法：< input type=“month” />

HTML5新增属性

placeholder

作用：默认提示
语法：< input type=“text” placeholder=“请输入用户名”/>

multiple

作用：支持在一个域中输入多个值，逗号隔开，一般配合邮箱和URL使用
语法：< input type=“email” multiple/>

autofocus

作用：自动获取焦点（打开网页后就进入某项输入里面）
语法：< input type=“text” autofocus/>

required

作用：防止域为空提交表单时
语法：< input type=“text” required/>

minlength和 maxlength

作用：定制元素允许的最小字符数和最大字符数
语法：< input type=“text” minlength=“6” maxlength=“18”/>

min和max

作用：定制元素允许的最小数字和最大数字
语法：< input type=“number” min=”0” max=”100”/>

示例：

    
    




    
    姓名：
    
    密码：
    
  确认密码：
    密码提示问题：
    
        请选择
        你小学同学名字
        你最爱的食物
        你喜欢的人
    
    
密码提示答案：
    
    性别：男 女
    
    年龄：
    

            籍贯
        
        北京
        上海
        天津
        江西
    
        省/直辖市
        
            南昌
            景德镇
            赣州
            抚州
        市
    
    
    爱好：上网 体育学习
    
   个人介绍:
    
  上传头像：
    
         

HTML5新增元素

HTML5新增语义化标签

1.header 页面头部
2.footer 页脚
3.article 定义页面独立的内容区域
4.aside 定义页面的侧边栏内容
5.details 文档某个部分的细节
6.summary 是details中的标题
7.figure 规定独立的流内容
8.figcaption 是figure的标题
9.mark 标记
10.nav 导航链接
11.meter用来表示范围已知且可度量的内容。
12.ruby加注释

HTML5新增的结构标签

...
     头部

...
	导航

...
定义文档中的节。比如章节、页眉、页脚或文档中的其它部分 

...
      侧边栏

...
	页脚

...
代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等

	用于对元素进行组合。多用于图片与图片描述组合
		

			
			
figure的标题
		
		
 标签用于描述文档或文档某个部分的细节
		IE不支持 
 标签
		

			
details中的标题
			
详细的内容
		
		
  
	定义带有记号的文本，它会给你要突出显示的文本下加个背景色。
	如：
你是大长腿吗？
	
 标签
		 标签定义度量衡。仅用于已知最大和最小值的度量。
				
				low:最低临界点
				high：最高临界点
				
				
标签
		 标签定义运行中的进度（进程）
		
		max：定义完成值
		value：定义当前值

标签
		

标签
		

 标签
		 标签为媒介元素（比如