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值只能是唯一的,是识别它们的根本区分。
对复选框来说,设置value属性以及它的值,是为了传递数据给服务器,服务器接收到复选框的数据就是value值
-->
<body>
<form name="regform" action="do.html" method="post">
单行文本框:<input type="text" name="username" id="username" maxlength="10" /><br />
密码框:<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 />
</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>