【HTML】form表单标签

最新推荐文章于 2024-07-17 22:23:53 发布

406密码

最新推荐文章于 2024-07-17 22:23:53 发布

阅读量190

点赞数

本文链接：https://blog.csdn.net/qq_40611605/article/details/86564694

版权

<form></form>表单标签

作用：收集并提交用户数据给指定服务器

属性：

action：收集的数据提交地址也就是URL

method：收集的数据的提交方式

get：适合小量数据，表单数据以“？”隔开拼接在URL后面，不同的键值对使用“&”符号隔开，不安全。

post：适合大量数据，安全，隐式提交。

注意1:表单数据的提交，要提交的表单项必须拥有name属性值，否则不会提交。

提交的表单项数据为键值对，键为name属性的值，值为用户书写的数据。

注意2：<form></form>标签会收集其标签内部的数据

注意3：<form></form>表单的数据提交需要依赖于submit提交按钮

form表单域标签

作用：给用户提供可以进行数据书写或者选择的标签

使用：

文本框

input

type：

text 收集少量的文本数据，用户可见

password 收集用户密码的收集

name：数据提交的键，也会被js使用

value：默认值

单选框

input

type：

radio

name：name属性值相同的单选框只能选择一项数据

value：要提交的数据

checked：使用此属性的单选默认是选择状态

多选框

input

type：

checkbox

name：一个多选组需要使用相同的name属性值

value：要提交的数据

checked：使用此属性的多选框默认是选择状态

单选下拉框

select:

name:数据提交的键名,必须声明

子标签option:一个option标签表示一个下拉选项
value:要提交的数据

文本域:

               textarea:声明一个可以书写大量文字的文本区域
                           name:数据提交的键名,js和css也会使用
                           rows:声明文本域的行数
                           cols:声明文本域的列数

普通按钮:

                       input:
                           type:
                               button
                           value:

隐藏标签:

                       input
                           type:
                               hidden
                           name
                           value
                   注意:表单数据提交提交的是表单域标签的value值
           form表单标签的使用:
               在点击数据提交时,form标签会将其内部所有form表单域标签中用户书写的数据按照method指明的提交方式
               提交给action属性所指明的提交地址.
示例源码：

<html>

	<head>
		<meta charset="utf-8">
		<title>注册页面</title>
	</head>

	<body>
		<h3>注册页面</h3>
		<hr />
		<form action="#" method="get">
			<table border="1px" cellpadding="5px" cellspacing="0px">
				<tr height="35px">
					<td width="70px">用户名</td>
					<td width="200px">
						<input type="text" name="uname" id="uname" value="" />
					</td>
				</tr>
				<tr height="35px">
					<td width="70px">密码</td>
					<td>
						<input type="password" name="password" id="password" value="" />
					</td>
				</tr>
				<tr height="35px">
					<td width="70px">邮箱</td>
					<td>
						<input type="text" name="mail" id="mail" value="" />
					</td>
				</tr>
				<tr height="35px">
					<td width="70px">手机号</td>
					<td>
						<input type="text" name="phone"  value="" />
					</td>
				</tr>
				<tr height="35px">
					<td width="70px">性别</td>
					<td>
						<input type="radio" name="sex" id="sex" value="1" checked="checked"/>男
						<input type="radio" name="sex" id="sex" value="0" />女
					</td>
				</tr>
				<tr height="35px">
					<td width="70px">爱好</td>
				<td>
						<input type="checkbox" name="fav"  id="fav" value="1" />阅读
						<input type="checkbox" name="fav"  id="fav" value="2" />打球
						<input type="checkbox" name="fav"  id="fav" value="3" />旅游
					</td>
				</tr>
				<tr height="35px">
					<td width="70px">籍贯</td>
				<td>
						<select name="address" id="">
							<option value="1">西安</option>
							<option value="2">咸阳</option>
							<option value="3">铜川</option>
							<option value="4">四川</option>
						</select>
					</td>
				</tr>
				<tr height="35px">
					<td width="70px">个人介绍</td>
					<td>
						<textarea name="intro" rows="5" cols="20"></textarea>
					</td>
				</tr>
				<tr height="35px">
					<td colspan="2" align="center">
				
						<input type="checkbox" name="agree" id="agree" value="1" />是否同意此协议
					</td>
				</tr>
				<tr height="35px">
					<td colspan="2" align="center">
				
						<input type="submit" " value="注册" />
					</td>
				</tr>
			</table>
			
		</form>
	</body>

</html>

运行结果：