01 HTML快速入门04
程序员文章站
2022-04-24 15:42:24
...
form标签
- form标签的语法
<form action="表单提交地址" method="提交方法">
...文本框、按钮等表单元素...
</form>
- form标签常用属性
- action：指定表单提交后由服务器上的哪个处理程序进行处理
- enctype：用于指定表单数据的编码方式
application/x-www-form-urlencoded 默认编码方式，将表单控件中的值处理成URL编码方式。
mutipart/form-data 以二进制流的方式来处理表单数据。
text/plain 当表单的action属性值为mailto:URL的形式时使用。 - method：指定向服务器提交的方式，一般为get和post两种方式
get方式的请求会将请求参数的名和值转换成字符串，并附加在原URL之后，
因此可以在地址栏中看到的请求参数的名和值。且get求传送的数据量比较
小，一般不能大于2KB。
post方式的请求传送的数据量比较大，通常认为可以不受限制，往往取决于
服务器的限制。post方式的请求参数时放在HTML的HEADER中传输，用户在
地址栏中看不到请求参数，安全性相对较高。
常见的表单元素1
- 使用input元素
| input元素 | 描述 |
|---|---|
| 单行文本框 | 指定<input…/>元素的type属性为text即可 |
| 密码输入框 | 指定<input…/>元素的type属性为password即可 |
| 隐藏域 | 指定<input…/>元素的type属性为hidden即可 |
| 单选框 | 指定<input…/>元素的type属性为radio即可 |
| 复选框 | 指定<input…/>元素的type属性为checkbox即可 |
| 图像域 | 指定<input…/>元素的type属性为image即可，当type="image"时，可以指定width和height属性 |
| 文件上传域 | 指定<input…/>元素的type属性为file即可 |
| 提交、重置、普通按钮 | 指定<input…/>元素的type属性为submit、reset、或button即可 |
- input元素常用的几个属性
| 常用属性 | 描述 |
|---|---|
| checked | 设置单选框、复选框初始状态是否处于选中状态， 只有当type属性值为checkbox或radio时才可指定。 |
| disabled | 设置首次加载时禁用此元素。当type="hidden"时，不能指定该属性。 |
| maxlength | 该属性是一个数字，指定文本框中所允许输入的最大字符数。 |
| readonly | 指定该元素长度。当type="hidden"时不能指定该属性 （可以使用javascript脚本修改） |
| size | 该属性是一个数字，指定该元素的长度。当type="hidden"时不能指定该属性 |
| src | 指定图像域所显示的图像URL，只有当type="image"时才可以指定该属性 |
- 练习
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>海同科技信息技术有限公司</title>
<meta name="author" content="chenhao"/>
<meta name="Description" content="海同科技是一家集猎头、IT培训和软件外包的综合性公司"/>
<meta name="keywords" content="猎头，IT培训，外包"/>
</head>
<body>
<form name="regFrame" method="poat" action="http://www.iotek.com.cn"/>
单行文本框<input type="text" name="username" id="username"/><br/>
密码框<input type="password" name="password" id="password"/><br/>
隐藏域<input type="hidden" name="hidden" id="hidden"/><br/>
单选按钮<input type="radio" name="sex" id="male"/>男
<input type="radio" name="sex" id="female"/>女<br/>
复选框<input type="checkbox" name="hobby" value="1" id="football"/>足球
<input type="checkbox" name="hobby" value="2" id="football"/>篮球
<input type="checkbox" name="hobby" value="3" id="football"/>网球<br/>
图像域<input type="image" name="hobby" src="logo.gif" width="100px" height="20px" id="football"/>足球<br/>
文件上传域<input type="file" name="file" />足球<br/>
提交按钮<input type="submit" name="submit" value="提交按钮"/><br/>
重置按钮<input type="submit" name="submit" value="重置按钮"/><br/>
普通按钮<input type="submit" name="submit" value="普通按钮"/><br/>
</form>
</body>
</html>
运行显示：