HTML <form> 标签
form表单是用户可以填写信息并提交数据到服务器的控件
表单的基本语法
<form action="表单提交地址" method="提交方法">
……文本框、按钮等表单元素……
</form>常用属性
name：指定表单的名字
action：指定表单提交后由服务器上哪个处理程序进行处理（提交地址为空或者为”#”则提交到本页面）
enctpye：用于指定表单数据的编码方式
- application/x-www-form-urlencoded：默认的编码方式，将表单控件中的值处理成URL编码方式。
- mutipart/form-date：以二进制流的方式来处理表单数据。
- text/plain：当表单的action的属性值为matlto:URL的形式时使用。
method：指定向服务器提交的方式，一般为post何get两种方式。
get方式的请求会将请求参数的名和值转换成字符串，并附加在原URL之后，因此可以在浏览器的地址栏中看到请求参数的名和值（安全性不高），且get请求传送的数据量比较小，一般不能大于2KB。
post方式的请求传送的数据量比较大，通常认为可以不受限制，往往取决于服务器的限制。post方式的请求参数是放在HTML的HEADER中传输，用户在地址栏中看不到请求的参数，安全性相对较高。
get方式经常用于搜素查询；而post常用来用户注册登录
常用的表单元素
- 使用input元素
| 元素 | 方法 |
|---|---|
| 单行文本框 | 指定<input…/>元素的type属性为text即可 |
| 密码输入框 | 指定<input…/>元素的type属性为password即可 |
| 隐藏域 | 指定<input…/>元素的type属性为hidden即可 |
| 单选框 | 指定<input…/>元素的type属性为radio即可 |
| 复选框 | 指定<input…/>元素的type属性为checkbox即可 |
| 单行文本框 | 指定<input…/>元素的type属性为text即可 |
| 图像域 | 指定<input…/>元素的type属性为image即可，当type=”image”时，可以指定width和height属性 |
| 文件上传域 | 指定<input…/>元素的type属性为file即可 |
| 提交、重置、普通按钮 | 指定<input…/>元素的type属性为submit、reset或button即可 |
- input元素常用的几个属性
| 属性 | 含义 |
|---|---|
| checked | 设置单选框、复选框初始状态是否处于选中状态，只有当type属性值问checkbox或radio时才可指定（不添加此属性表示不选中，添加checkbox=”checkbox”表示选中） |
| disabled | 设置首次加载时禁用此元素（disable=”disalbe”）。当type=”hidden”时不能指定该属性 |
| maxlength | 指定文本框中所允许输入的最大字符数 |
| readonly | 指定该文本框内的值不允许修改（可以使用javascript修改） |
| size | 该属性时一个数字，指定该元素的长度。当type=”hidden”时不能指定该属性 |
| src | 指定图像域所显示的图像URL，只有当type=”image”时才可以指定该属性 |
- 使用button定义按钮
```
<button type="按钮类型">
普通文本、格式化文本、图像
</button>
```
button标签按钮常用属性
- disabled：指定是否禁用此元素。该属性只能是disabled或者省略
- name：指定该按钮的名称
- type：指定该按钮的类型，只能是submit、reset、button
- 使用实例：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<!--
表单元素的name值可以相同，以此来表示是一组元素（防止失去它们原来的功效，例如，出现单选框可以多选的情况），
而id值只能是唯一的，是识别它们的根本区分。
在表单里，添加label标签，并通过for属性指定一个元素的id值，当点击label标签内的内容时，for指定的id的元素将会获得焦点，会有更好的用户体验。
对复选框来说，设置value属性以及它的值，是为了传递数据给服务器，服务器接收到复选框的数据就是value值。
-->
<body>
<form name="regform" action="do.html" method="post">
<label for="username">单行文本框：</label><input type="text" name="username" id="username" maxlength="10" /><br />
<label for="password">密码框：</label><input type="password" name="password" id="password" size="24" /><br />
隐藏框：<input type="hidden" name="hidden" id="hidden" /><br />
单选按钮：<input type="radio" name="sex" id="male" checked="checked" />男
<input type="radio" name="sex" id="female" />女<br />
复选框：<input type="checkbox" name="hobby" id="football" value="1" disabled="disabled" />足球
<input type="checkbox" name="hobby" id="basketball" value="2" checked="checked" />篮球
<input type="checkbox" name="hobby" id="baseball" value="3" />网球<br />
<!-- src需要指定图像的路径 -->
图像域：<input type="image" name="image" id="image" src="img/shitu_b04.jpg" /><br />
文件上传域：<input type="file" name="file" /><br />
提交按钮：<input type="submit" name="submit" value="提交按钮" /><br />
重置按钮：<input type="reset" name="reset" value="重置按钮" /><br />
普通按钮：<input type="button" name="common" value="普通按钮" /><br />
button提交按钮：<button type="submit" name="submit2"><b>提交按钮</b></button><br />
button重置按钮：<button type="reset" name="reset2"><i>重置按钮</i></button><br />
button普通按钮：<button type="button" name="button2" disabled="disabled">提交按钮</button><br />
<br />
<br />
<br />
<textarea name="content" cols="300px" rows="100px" readonly="readonly">这是一个多行文本框
</textarea>
</form>
</body>
</html>
列表框和下拉菜单
<select name="指定列表名称" size="行数">
<option value="选项值" selected="selected">...</option>
</select>列表框常用属性
disabled：指定是否禁用此元素。该属性只能是disabled或者省略。
multiple：设置该列表框是否允许多选。值为”multiple”或者干脆省略该属性。
size：指定该列表内同时显示多少个列表项。列表框示例：
<select id="city" name="city" multiple="multiple" size="3"> <option>北京</option> <option>上海</option> <option>广州</option> <option>杭州</option> <option>天津</option> </select>下拉菜单实例
<select id="city" name="city"> <option>北京</option> <option>上海</option> <option>广州</option> <option>杭州</option> <option>天津</option> </select>在<select…/>元素里，只能包含两种子元素。
<option>：用于定义列表框选项或菜单项，它的常用属性如下：
- disabled：指定禁用该选项，该属性值只能是disabled或者省略该属性。
- selected：指定该列表初始状态是否处于被选中状态，值只能是selectd或者省略该属性。
- value：指定该选项对应的请求参数值，用于传递数据给服务器。
<optgroup>：用于定义列表项或菜单项组，它的常用属性如下：
- label：指定该选项组的标签。这个属性必填。
- disabled：禁用该选项组里的所有选项，该属性值只能是disable或者省略该属性。
示例
<!-- 下拉菜单 --> <select id="city" name="city"> <option>---城市列表---</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> <option value="hangzhou">杭州</option> </select> <br /> <br /> <!-- 选项组列表框 --> <select id="city" name="city" size="6"> <optgroup label="一线城市"> <option value="beijing">北京</option> <option value="shanghai" selected="selected">上海</option> <option value="guangzhou">广州</option> </optgroup> <optgroup label="二线城市"> <option value="hangzhou" selected="selected">杭州</option> <option value="nanjing">南京</option> </optgroup> </select>
多行文本框
- 语法
<textarea name="..." cols="列宽" rows="行宽">
文本内容
</textarea>常用属性
- cols：指定文本框的宽度，该属性必填
- rows：指定文本框的高度，该属性必填
- readonly：指定该文本框只读。值只能是readonly或者省略该属性
示例
<textarea name="content" cols="300px" rows="100px" readonly="readonly">这是一个多行文本框</textarea>Example
<!-- action表示数据提交目标页的URL method设置数据提交方式-->
<form action="checkLogin.jsp" method="post">
<table>
<tr>
<td>学生编号：</td><td><input type="text" name="stuNo"></td>
</tr>
<tr>
<td>密 码：</td><td><input type="password" name="password"></td>
</tr>
<tr>
<td><input type="submit" value="登录"></td><td><input type="reset" value="重置"></td>
</tr>
</table>
</form>
263
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
