HTML的<form>表单标签
表单
HTML 表单用于搜集不同类型的用户输入。
㈠Form标签
⑴form标签简介
在HTML中，如果创建一个表单，就把各种表单标签放在<form></form>标签内部。我们常说的表单，指的是文本框，按钮，下拉列表等的统称。
form一共有五个重要属性，分别是name，action，method，enctype和target属性。
语法：<form>表单各种标签</form>
⑵表单名称name属性
一个页面中，你的表单可能不止一个，为了区分这些表单，使用name属性来给表单进行命名。这样也是防止在表单提交之后，在后台程序中出现混乱。
语法：<form name="表单名称">......</form>
表单名称中不能包含特殊字符和空格。
⑶提交表单action属性
在form标签中，action属性用于指定表单数据提交到哪个地址进行处理。
语法：<form action="表单的处理程序">......</form>
表单的处理程序是表单要提交的地址，这个程序地址用来处理从表单搜集的信息。这个地址可以是相对地址，绝对地址，也可以是一些其他形式的地址。
⑷传送方法method属性
①在form标签中，methon属性的作用是告诉浏览器，指定将表单中的数据使用哪一种HTP提交方法，取值为get或post。
②methon属性取值：
属性值 说明
get 默认值，表单数据被传送到action属性指定的URL，然后这个新的URL被送到处理程序上
post 表单数据被包含在表单主体中，然后被传送到处理程序上
③这两种方式的区别在于，get在安全性上较差，所有的表单域的值都直接显示出来了。而post除了可见的脚本处理程序之外，其他信息都可以隐藏。所以在实际开发中，通常选择post处理方式。
④语法：<form method="传送方法">......</form>
⑸目标显示方式target属性
①在form标签中，target属性是用来指定目标窗口的打开方式。
②target属性取值
属性值 说明
_self 默认值，表示在当前的窗口打开页面
_blank 表示在新的窗口打开页面
_parent 表示在父级窗口打开页面
_top 表示页面载入到包含该链接的窗口，取代当前在窗口中的所有页面
③语法：<form target="目标显示方式">......</form>
⑹编码方式enctype
①在form标签中，enctype属性用于设置表单信息提交的编码方式。
② 属性值 说明
application/x-www-form-urlencoded 默认的编码方式
multipart/form-data MIME编码，对于“上传文件”这种表单必须选择该值
㈡表单对象
①所谓表单对象，简单来说，就是放在<form></form>标签内部的各种标签。表单对象有四种：input，textarea，select和option。
②要记住表单标签只有四个：<input>,<textarea>,<select>,<option>。其中<select>和<option>是配合使用的。
㈢input 标签
①input标签是自闭合标签，接下来介绍用到input标签，在不同type属性值的不同。
②语法：<input type="表单类型" />
⑴单行文本框 text
①文本框text共有以下几个重要的属性：
属性 说明
value 定义文本框的默认值，也就是文本框内的文字
size 定义文本框的长度，以字符为单位
maxlength 设置文本框中最多可以输入的字符数
②对于元素属性的设置，是没有先后顺序的。input还有一个name属性，不过一般情况下都使用ID属性，很少使用name属性。
③语法：<input type="text" value="默认文字" size="文本框长度" maxlength="最多输入字符数" />
⑵密码文本框 password
①密码文本框在外观上跟单行文本框相似，也拥有相同的属性。两者不同的是：单行文本框输入的字符可见，而密码文本框输入的字符不可见。密码文本框这个设置主要是防止用户周围的人看到用户输入密码。
②语法：<input type="password" value="默认文字" size="文本框长度" maxlength="最多输入字符数" />
⑶单选按钮 radio
①在HTML中，单选按钮radio只能从选项列表中选择一项，选项与选项之间是互斥的。
②语法：<input type="radio" name="单选按钮所在的组名" value="单选按钮的取值" />
③name和value是单选按钮必要的两个属性，必须要设置。value属性示为了方便向服务器端传递数据。
④单选按钮的忽略点：先看下面的代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>单选按钮</title>
6 </head>
7 <body>
8 <form name="myForm" method="post" action="index.html">
9 性别：
10 <input type="radio" name="question1" value="boy" />男
11 <input type="radio" name="question2" value="girl" />女
12 </form>
13 </body>
14 </html>
效果图：
⑤我们把第二个单选按钮的name属性值改为“question2”,第一个单选按钮的属性值不变，为“question1”。你会看到，对于同一个问题，选两个选项居然可以被同时选中了！
所以，对于同一个问题的不同选项，必须设置一个相同的name属性值，这样才能把这些选项归为同一个问题。
⑷复选框 CheckBox
①语法：<input type="checkbox" value="复选框取值" checked="checked" />
②复选框可以从选项列表中选择一项或者多项。Checked属性表示该选项在默认情况下已经被选中。复选框不需要设置选项列表的name，因为复选框是可以多选的。
③HTML中的复选框是没有文本的，需要加入label标签，并且用label标签的for属性指向复选框的ID。
④示例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>复选框</title>
6 </head>
7 <body>
8 <form name="form1" method="post" action="index.html">你喜欢的水果：<br />
9 <input id="checkbox1" type="checkbox" checked="checked" /><label for="checkbox1">苹果</label><br />
10 <input id="checkbox2" type="checkbox" checked="checked" /><label for="checkbox2">香蕉</label><br />
11 <input id="checkbox3" type="checkbox" checked="checked" /><label for="checkbox3">西瓜</label><br />
12 <input id="checkbox4" type="checkbox" checked="checked" /><label for="checkbox4">提子</label>
13 </form>
14 </body>
15 </html>
效果图：
⑸表单按钮
①普通按钮 button
在HTML中，普通按钮一般情况下要配合JavaScript脚本来进行表单的实现。
语法：<input type="button" value="普通按钮的取值" onclick="javascript脚本程序" />
value的取值就是显示在按钮上的文字，onclick是普通按钮的事件。
②提交按钮 submit
提交按钮可以看成是一种具有特殊功能的普通按钮，单击提交按钮可以实现将表单内容提交给服务器处理。
语法：<input type="submit" value="提交按钮的取值" />
③重置按钮 reset
重置按钮也可以看成是一种具有特殊功能的普通按钮，单击重置按钮可以清除用户在页面表单中输入的信息。
语法：<input type="reset" value="提交按钮的取值" />
示例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>重置按钮</title>
6 </head>
7 <body>
8 <form name="form1" method="post" action="index.html">
9 账号：<input type="text" /><br />
10 密码：<input type="password" /><br />
11 <input type="submit" value="提交" />
12 <input type="reset" value="重置" />
13 </form>
14 </body>
15 </html>
效果图：
注意：重置按钮只能清除“当前所在form标签”内的表单元素内容，对当前所在form标签之外的表单元素内容清除无效。
⑹图片域 image
①语法：<input type="image" src="图片路径" />
②图片域既有按钮的特点，也拥有图像的特点，因此需要设置图片的路径。
⑺隐藏域 hidden
①有时候我们想要从前台页面向后端服务器传送一些数据，但是又不想让用户看见。这个时候可以通过一个隐藏域来传送数据。隐藏域包含那些要提交处理的数据，但这些数据并不显示在浏览器中。
②语法：<input type="hidden" />
⑻文件域 file
①在HTML中，文件上传使用input标签。但我们在使用文件域file时，必须在form的标签中说明编码方式 enctype="multipart/form-data"。只有这样服务器才能接收到正确的信息。
②语法：<input type="file" />
㈣多行文本框 textarea
①语法：<texearea rows="行数" col="列数">多行文本框内容</textarea>
②在该语法中，想要对多行文本框设置默认内容，可以在标签内部添加。对于多行文本框的默认文字内容，你可以选择设置与否。
③示例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>多行文本框 </title>
6 </head>
7 <body>
8 <form name="form1" method="post" action="index.html">
9 个人简介：<br />
10 <textarea rows="8" cols="40">请介绍一下自己</textarea>
11 </form>
12 </body>
13 </html>
效果图：
㈤下拉列表 select
①下拉列表由select和option这两个标签配合使用。下拉列表是一种最节省页面空间的选择方式。因为在正常状态下只显示一个选项，单击下拉菜单打开菜单后才会看到全部的选项。
②语法：<select>
<option>选项显示的内容</option>
......
<option>选项显示的内容</option>
</select>
⑴select标签属性
☆multiple属性：可选属性，只有一个属性值“multiple”。默认情况下下拉列表只能选择一项，当设置multiple="multiple"时，下拉列表可以选择多项。
语法： <select multiple="multiple">
<option>选项显示的内容</option>
......
<option>选项显示的内容</option>
</select>
想要选取多项，使用"Ctrl+鼠标左键"即可。
☆size属性：用来定义下拉列表展开之后可见选项的数目。
语法：<select multiple="multiple" size="可见列表项的数目">
<option>选项显示的内容</option>
......
<option>选项显示的内容</option>
</select>
⑵option标签属性
属性 说明
value 选项值
select 是否选中
☆语法：<select multiple="multiple" size="可见列表项的数目">
<option value="选项值" selected="selected">选项显示的内容</option>
......
<option value="选项值"> 选项显示的内容 </option>
</select>
☆说明：这里为每个列表项添加value值，并且使用selected="selected"来设置某一个列表项默认情况下被选中。
value主要是用来给JavaScript调用，或者向服务器传递数据。
希望有所帮助！！！！！
