表单

基本介绍

用来提交到数据库的信息
各个信息都是通过输入框，按钮（控件）来进行提交
< 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.表单按钮
用来提交表单中的所有信息到服务器
* 表单域和表单按钮都属于表单元素。

单行文本框<input type="text" >默认值是type="text"
密码框<input type="password"/>　
单选按钮<input type="radio" name=””/>
复选框<input type="checkbox"/>
隐藏域<input type="hidden"/>
文件上传<input type="file"/>下拉框<select>标签<select><option value="1">北京</option></select>
多行文本<textarea></textarea>
提交按钮<input type="submit"/>
普通按钮<input type="button"/>
重置按钮<input type="reset"/>

控件介绍

文本框

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

密码框

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

单选按钮

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

复选框

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

爱好:<input type="checkbox" checked/>游戏<input type="checkbox"/>唱歌<input type="checkbox"/>跳舞

文件

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

 <form action="" method="post" enctype="multipart/form-data"><input type="file" name="file1"/></form>

按钮

< 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><option>选项</option><option>选项</option><option>选项</option>
</select>

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

下拉分组列表

	<optgroup label="北京"><option value="1">东城区</option><option value="2">西城区</option><option value="3">海淀区</option></optgroup><optgroup label="河北省"><option value="4">石家庄</option><option value="5">保定市</option><option value="6">沧州市</option></optgroup>
</select>

多行文本框

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

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

label 点击文字选择

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

  <label for="pwd">记住密码</label><input type="checkbox" name="pwd" id="pwd" />

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

<form><labllel for="male">Male</label><input type="radio" name="sex" id="male" />
</form><label>标签一般和radio、checkbox类型一起使用。

fieldset元素集

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

<fieldset><legend>健康信息</legend>身高：<input type="text" />体重：<input type="text" />
</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” />

新增属性

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”/>

示例：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>一个表单</title>
</head>
<body><form action="http://www.baidu.com" method="post" enctype="multipart/form-data"><p>&emsp;&emsp;&emsp;&emsp;姓名：<input type="text" name="name"/></p><p>&emsp;&emsp;&emsp;&emsp;密码：<input type="text" minlength="6" maxlength="16"/></p><p>&emsp;&emsp;确认密码：<input type="text" minlength="6" maxlength="16"/></p>密码提示问题：<select ><option value="0">请选择</option><option value="1">你小学同学名字</option><option value="2">你最爱的食物</option><option value="3">你喜欢的人</option></select><p>密码提示答案：<input type="text"/></p><p>&emsp;&emsp;&emsp;&emsp;性别：<input type="radio" checked/>男 <input type="radio"/>女</p><p>&emsp;&emsp;&emsp;&emsp;年龄：<input type="number" min="12" max="99"/></p><p>&emsp;&emsp;&emsp;&emsp;籍贯<select><option >北京</option><option >上海</option><option >天津</option><option >江西</option></select>省/直辖市<select><option >南昌</option><option >景德镇</option><option >赣州</option><option >抚州</option></select>市</p><p>&emsp;&emsp;&emsp;&emsp;爱好：<input type="checkbox" checked/>上网 <input type="checkbox"/>体育<input type="checkbox"/>学习</p><p> &emsp;&emsp;个人介绍:<textarea name="" id="" cols="30" rows="10"></textarea></p><p>&emsp;&emsp;上传头像：<input type="file"/></p><p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<input type="submit"/> &nbsp; <input type="reset"/></p></form>
</body>
</html>