WEB前端教程：03Form表单

  -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"

密码框　

单选按钮

复选框

隐藏域

文件上传

下拉框标签北京多行文本area>area>提交按钮普通按钮重置按钮文本框

属性：

name:定义控件名称

value：指定控件初始值

密码框

属性：name:定义控件名称

value：指定控件初始值

单选按钮

属性：

name:定义控件名称

value：指定控件初始值

checked：设置控件初始状态是否被选中

性别：

男

女

复选框

属性：

name:定义控件名称

value：指定控件初始值

checked：设置控件初始状态是否被选中

例如：爱好:

游戏

唱歌

跳舞

文件

属性：

name:定义控件名称

使用file类型的input时要注意以下几点

1.form表单的method属性值要为post

1.form要加enctype="multipart/form-data"属性，这个属性说明了我们的文件以二进制方式传输文件，因为我们计算机本身最底层都是以二进制来显示、传输。

默认地，表单数据会编码为 "application/x-www-form-urlencoded"，不能用于文件上传

隐藏区域

属性：

name:定义控件名称

value：指定控件初始值

按钮

属性：

name:定义控件名称

value：指定控件初始值

不具有提交功能

提交按钮

属性：

name:定义控件名称

value：指定按钮表面显示文字

重置按钮

属性：

name:定义控件名称

value：指定按钮表面显示文字

图像图片按钮

属性：

name:定义控件名称

src：指定图像地址

按钮

 按钮

属性:

type:button/submit/reset,默认值为submit

下拉列表框

select属性：                                     

name:此列表框的名字                             

multiple：多选，不用赋值                         

size :规定下拉列表中可见选项的数目(显示几行)   

disabled:规定禁用该下拉列表

option属性：

selected ：用来指定默认的选项

value： 用来给指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用区域的名字的value 属性来获得该区域选中的数据项的

下拉列表框续

东城区

西城区

海淀区

石家庄

保定市

沧州市

多行文本框

area>area>

属性：

cols ：这文字区块的宽度

rows ：这文字区块的列数，即其高度

area name="" i阿d="" cols="30" rows="10">area>

标签为 input 元素定义标注。

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

 记住密码

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

Male

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

元素集

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

     健康信息

 身高：

 体重：

HTML5新增input类型

1.在其他版本的HTML中，表单包含的元素非常有限，并且属性也不多，尤其是在数据交互过程中数据的验证需要编写大量的Javascript代码

2.以上的不足都已经在HTML5中被克服，HTML5在以上的基础上增加了许多标签和属性，为开发人员带来了极大的方便

电子邮件类型

功能描述：输入E-mail地址的文本框

语法：

注意：输入的内容中必须包含"@"，"@"后面必须具有内容

搜索类型

功能描述：输入搜索关键字的文本框

语法：

URL类型

功能描述：输入WEB站点的文本框

语法：

注意：输入的内容中必须包含"http://"，后面必须有内容

颜色类型

功能描述：预定义的颜色拾取控件

语法：

数字类型

功能描述：只能接受数字

语法：

属性：min：当前域能接受的最小值

max：当前域能接受的最大值

step：决定了域所接受值递增或递减的步长，默认为1

范围类型

功能描述：允许用户选择一个范围内的值

语法：

属性：min：范围的下限值

max：范围的上限值

step：声明该值递增或递减的步长

value：设置初始值

日期类型

功能描述：创建一个日期输入域

语法：

周类型

功能描述：与date类型相似，但只能选择周

语法：

月份类型

功能描述：与date类型相似，但只能选择月份

语法：

HTML5新增属性

placeholder

作用：默认提示

语法：

multiple

作用：支持在一个域中输入多个值，逗号隔开，一般配合邮箱和URL使用

语法：

autofocus

作用：自动获取焦点

语法：

required

作用：防止域为空提交表单时

语法：

minlength和 maxlength

作用：定制元素允许的最小字符数和最大字符数

语法：

min和max

作用：定制元素允许的最小数字和最大数字

语法：