本文深入讲解HTML中的form标签及其各种表单元素，包括输入框、单选框、多选框、下拉菜单、文本域等的使用方法及注意事项，帮助读者掌握如何创建有效的数据收集表单。
form标签学习
<html>
<head>
<title>form标签学习</title>
<meta charset="UTF-8"/>
</head>
<body>
<!--
form表单标签学习:
作用:收集并提交用户数据给指定服务器
属性:
action:收集的数据提交地址也就是URL
method:收集的数据的提交方式
get :适合小量数据,表单数据以?隔开拼接在URL后面,不同的键值对使用&符号隔开,不安全.
post:适合大量数据,安全,隐式提交
注意1:
表单数据的提交,要提交的表单项必须拥有name属性值,否则不会提交.
提交的表单项数据为键值对,键为name属性的值,值为用户书写的数据
注意2:form标签会收集其标签内部的数据
注意3:form表单的数据提交需要依赖于submit提交按钮.
form表单域标签学习:
作用:给用户提供可以进行数据书写或者选择的标签.
使用:
文本框:
input
type:
text 收集少量的文本数据,用户可见
password 收集用户密码数据
name:数据提交的键,也会被js使用
value: 默认值
单选框:
input
type:
radio
name:name属性值相同的单选框只能选择一项数据
value:要提交的数据
checked:checked 使用此属性的单选默认是选择状态
多选框:
input:
type:
checkbox
name:一个多选组需要使用相同的name属性值
value:要提交的数据
checked: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属性所指明的提交地址.
-->
<h3>form标签学习</h3>
<hr />
<form action="#" method="get">
用户名:<input type="text" name="uname" value="王五"/><br />
密码: <input type="password" name="upwd"/><br />
性别 : 男<input type="radio" name="sex" value="1" checked="checked"/>
女<input type="radio" name="sex" value="0"/><br />
爱好: <br />
吃饭<input type="checkbox" name="fav" value="1" checked="checked"/><br />
睡觉<input type="checkbox" name="fav" value="2"/><br />
打豆豆<input type="checkbox" name="fav" value="3"/><br />
籍贯:<br />
<select name="address">
<option value="">--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected="selected">商丘</option>
</select>
<br />
文本域:<br />
<textarea name="intro" rows="10" cols="30"></textarea><br />
普通按钮:<br />
<input type="button" id="" value="普通按钮" />
隐藏标签:
<input type="hidden" name="hidden" id="" value="哈哈" />
<input type="submit" value="登录"/>
</form>
</body>
</html>
注册页面
<html>
<head>
<title>注册页面</title>
<meta charset="UTF-8"/>
<!--
http://127.0.0.1:8020/HTML%E5%AD%A6%E4%B9%A0/15-HTML-%E6%B3%A8%E5%86%8C%E9%A1%B5%E9%9D%A2.html?
uname=zhangsan&pwd=123&mail=123123&phone=123123123&sex=1
&fav=1&fav=2&address=1&intro=123123123&agree=1#
-->
</head>
<body>
<h3>注册页面</h3>
<hr />
<form action="#" method="get">
<table border="1px" cellspacing="0" cellpadding="5px">
<tr height="35px">
<td width="70px">用户名:</td>
<td width="200px">
<input type="text" name="uname" id="uname" value="" />
</td>
</tr>
<tr height="35px">
<td>密码:</td>
<td>
<input type="password" name="pwd" id="pwd" value="" />
</td>
</tr>
<tr height="35px">
<td>邮箱:</td>
<td>
<input type="text" name="mail" id="mail" value="" />
</td>
</tr>
<tr height="35px">
<td>手机号:</td>
<td>
<input type="text" name="phone" value="" />
</td>
</tr>
<tr height="35px">
<td>性别:</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>爱好:</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>籍贯:</td>
<td>
<select name="address" id="">
<option value="1">商丘</option>
<option value="2">菏泽</option>
<option value="3">信阳</option>
</select>
</td>
</tr>
<tr height="35px">
<td>个人介绍:</td>
<td>
<textarea name="intro" rows="4" 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>
下一篇：HTML学习之模拟百度
扫一扫
1802
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
