01 HTML快速入门04

最新推荐文章于 2024-06-29 11:58:27 发布

YY大数据

最新推荐文章于 2024-06-29 11:58:27 发布

阅读量145

点赞数

分类专栏： HTML快速入门文章标签： html

本文链接：https://blog.csdn.net/weixin_40737011/article/details/106618613

版权

HTML快速入门专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>

运行显示：
jpg

YY大数据

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01 HTML快速入门04

form标签form标签的语法<form action="表单提交地址" method="提交方法"> ...文本框、按钮等表单元素...</form>form标签常用属性action：指定表单提交后由服务器上的哪个处理程序进行处理enctype：用于指定表单数据的编码方式application/x-www-form-urlencoded 默认编码方式，将表单控件中的值处理成URL编码方式。mutipart/form-data 以二进制流的方式来处理
复制链接

扫一扫