HTML资料之表单

◆ 表单的作用：
主要负责数据采集功能。


◆ 表单域<form></form>：
相当于一个容器，用来容纳所有的表单控件和提示信息，定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

格式：

<form name="form_name" action="url" method="get|post">…</form>

属性：

★ name：    定义表单的名称
★ method:   定义表单结果从浏览器传送到服务器的方式，默认参数为：get
★ action ： 指定表单处理程序的位置(服务器端脚本处理程序） 
★ fieldset：表单分组
★ legend：  分组名称

get方法：

★ 查询字符串（名称/值对）是在 GET 请求的 URL 中发送的
   /test/demo_form.asp?name1=value1&name2=value2

1、请求可被缓存
2、请求保留在浏览器历史记录中
3、请求可被收藏为书签
4、请求不应在处理敏感数据时使用
5、请求有长度限制
6、请求只应当用于取回数据

post方法：

查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的
POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2

1、请求不会被缓存
2、请求不会保留在浏览器历史记录中
3、不能被收藏为书签
4、请求对数据长度没有要求

get方法和post方法对比：

	GET	POST

后退按钮/刷新 无害 数据会被重新提交（浏览器应该告知用户数据会被重新提交）。 书签 可收藏为书签 不可收藏为书签 缓存 能被缓存 不能缓存 编码类型 application/x-www-form-urlencoded application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。 历史 参数保留在浏览器历史中。 参数不会保存在浏览器历史中。 对数据长度的限制 是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。 无限制。 对数据类型的限制 只允许 ASCII 字符。 没有限制。也允许二进制数据。 安全性

与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。

在发送密码或其他敏感信息时绝不要使用 GET ！

POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。 可见性 数据在 URL 中对所有人都是可见的。 数据不会显示在 URL 中。
◆ input控件：

<input  type=“控件类型”>

type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。

★ text：    单行文本输入框
★ password：密码输入框
★ radio：   单选按钮
★ checkbox：复选框
★ button：  普通按钮
★ submit：  提交按钮
★ reset：   重置按钮
★ image：   图像形式的提交按钮
★ hidden：  隐藏域
★ file：    文件域（文件上传）

其他属性：

★ name：     控件名称
★ value：    input控件中的默认文本值
★ size：     input控件在页面中的显示宽度
★ readonly： 控件内容为只读
★ disabled： 第一次加载页面时禁用该控件（显示为灰色）
★ checked：  定义选择控件默认被选中项（单选框,复选框）
★ maxlength：控件允许输入的最大字符数

示例：

#单行文本输入框text：
用户名：<input type="text" name="username" value="snow" maxlength="6" readonly="true" disabled="true">
注：用value属性设置默认值

#单选框radio：
性别：<input type="radio" name="gender" checked="true">男
	 <input type="radio" name="gender">女
注：1、只有将name的值设置相同的时候，才能实现单选效果。
    2、checked=”checked” 设置默认选择项。

#复选框checkbox：
<p><input type="checkbox" name="category" value="财经" />财经</p>
<p><input type="checkbox" name="category" value="汽车" />汽车</p>
<p><input type="checkbox" name="category" value="科技" />科技</p>

#文件域file：
<input type="file">

#提交按钮submit：
<input type="submit">
注：可以实现信息提交功能

#普通按钮button：
<input type="button" value="普通按钮">
注：不能提交信息，配合JS使用。

#图片按钮image：
<input type="image" src="1.jpg">
注：可实现信息提交功能

#重置按钮reset：
<input type="reset">
注：将信息重置到默认状态

◆ textarea控件： 如果需要输入大量的信息，就需要用到<textarea></textarea>标记。

<textarea cols="每行中的字符数" rows="显示的行数">
       文本内容
</textarea>

★ cols:相当于宽度
★ rows:相当于高度

示例：

<textarea cols="6" rows="3">
       输入内容
</textarea>

显示效果：



◆ select控件：
可以用来生成下拉菜单。
格式：

<select>
        <option>选项1</option>
        <option>选项2</option>
       ...
</select>

属性：

<select>
multiple="multiple": 将下拉列表设置为多选项
size="10"：          指定下拉菜单的可见选项数

<option>
selected="selected": 设置为默认选中项 

示例：

<select multiple="multiple" size="2">
	<option selected="selected">1</option>
	<option>2</option>
	<option>3</option>
</select>

◆ 组合表单：

<fieldset></fieldset>  对表单信息分组
<legend></legend>      表单信息分组名称

示例：

<fieldset>
	<legend>分组信息</legend>
	用户名：<input type="text" name="username"><br />
	密码&nbsp;&nbsp;&nbsp;：<input type="password" name="pwd">
</fieldset>

显示效果：