1、表单标签：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单标签</title>
</head>
<body>
<!--
表单标签：收集用户信息
表单的组成：
1、表单域：整个表单的区域，<form></form> 会把范围内的表单元素信息提交给服务器
action：url地址，指定接收并处理表单数据的服务器程序的url地址
method：get/post，表单数据的提交方式
name：名称，指定表单的名称，用来区分同一个页面中的不同表单域
2、表单控件（表单元素）：按钮，文本框等
input：输入控件，单标签
type：type属性值不同，input的表现形式也不同。主要有：
button（按钮,通常与js搭配使用），checkbox（复选框），
file（文件上传），
hidden（隐藏输入），
image（图像形式的提交按钮,此控件传递给服务器的value值为点击处的x，y像素值），
password（密码输入），
radio（单选按钮），
reset（重置按钮），
submit（提交按钮，将表单数据发送到服务器），
text（单行输入，默认最多20个字符），
lable（绑定表单控件，当点击lable标签内文字时，会自动将光标锁定到对应控件上）
name：控件的名字，让服务器知道是哪个控件传的值（后台使用）
value：控件传递给服务器的值（后台使用）
checked：首次加载时的默认选中
maxlength：输入的最大字符长度（很少使用）
select：下拉表单控件，双标签
select中至少要包含一个option双标签
在option中定义selected="selected"时代表默认选中
textarea：文本域控件，可输入较多文本，双标签
rows：显示行数
cols：每行中的字符数
（一般会在css中进行控制）
3、提示信息：提示用户填写的文字
-->
<form action="aaa.php" method="get" name="login">
<!--正常文本框-->
<p>用户名：<input type="text" name="username" value="2233" maxlength="5"/></p>
<!--密码输入框-->
<p>密码：<input type="password" name="password" /></p>
<!--单选按钮-->
<p>
性别：
女<input type="radio" name="sex" value="famale"/>
男<input type="radio" name="sex" value="male" checked="checked"/>
</p>
<!--复选框-->
<p>
爱好：
看书<input type="checkbox" name="hobby" value="book" checked="checked"/>
吃饭<input type="checkbox" name="hobby" value="food"/>
睡觉<input type="checkbox" name="hobby" value="sleep"/>
</p>
<!--普通按钮-->
<p>点击获取验证码：<input type="button" name="send" value="发送验证码"/></p>
<!--上传文件-->
<p>上传附加文件：<input type="file" name="file"/></p>
<!--重写，提交 按钮-->
<p>
<input type="reset" name="reset" value="我要重写"/>
<input type="submit" name="log" value="点我登录"/>
</p>
<!--图片提交按钮-->
<p><input type="image" src="./image/other/bqb1.webp" width="100" name="sub"></p>
<!--lable标签的使用-->
<p>
是否注射新冠疫苗？
<label for="true">是</label><input type="radio" name="injection" value="yes" id="true"/>
<label for="false">否</label><input type="radio" name="injection" value="no" id="false"/>
</p>
<!--下拉框-->
<p>
地区：
<select name="area" id="">
<option value="sy">沈阳</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="klxq" selected="selected">快乐星球</option>
</select>
</p>
<!--文本域-->
<p>
请留言：
<textarea rows="5" cols="60" name="comment" id="">在这里可以留言哦~</textarea>
</p>
</form>
</body>
</html>
点击submit提交按钮后，get提交方式的url：
格式为 name=value
2、案例-注册页面：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>欢迎注册</title>
</head>
<body>
<form action="aaa.php" method="get" name="regist" id="regist">
<h3>我是歌手-注册报名表</h3>
<table name="regist_table" id="regist_table" width="600px">
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" id="sex_male" value="male" checked="checked"/>
<label for="sex_male"><img src="./image/other/sex/male.webp" width="20"/> 男</label>
<input type="radio" name="sex" id="sex_female" value="female"/>
<label for="sex_female"><img src="./image/other/sex/female.webp" width="20"/> 女</label>
</td>
</tr>
<tr>
<td>生日</td>
<td>
<select name="birth_year" id="birth_year">
<option value="unselect">--年--</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
</select>
<select name="birth_month" id="birth_month">
<option value="unselect">--月--</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<select name="birth_day" id="birth_day">
<option value="unselect">--日--</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
</select>
</td>
</tr>
<tr>
<td>现居住地</td>
<td>
<input type="text" name="home" id="home" maxlength="50"/>
</td>
</tr>
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="marry" id="marry_none" checked="checked"/>
<label for="marry_none">未婚</label>
<input type="radio" name="marry" id="marry_true"/>
<label for="marry_true">已婚</label>
<input type="radio" name="marry" id="marry_break"/>
<label for="marry_break">离异</label>
</td>
</tr>
<tr>
<td>学历</td>
<td>
<select name="education" id="education">
<option value="unselect">--请选择--</option>
<option value="primary">小学</option>
<option value="middle">中学</option>
<option value="university">大学</option>
</select>
</td>
</tr>
<tr>
<td>特长</td>
<td>
<input type="checkbox" name="hobby" id="hobby_sing" value="sing" checked="checked"/>
<label for="hobby_sing">唱歌</label>
<input type="checkbox" name="hobby" id="hobby_dance" value="dance"/>
<label for="hobby_dance">跳舞</label>
<input type="checkbox" name="hobby" id="hobby_pop" value="pop"/>
<label for="hobby_pop">说唱</label>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea name="introduce" id="introduce"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="regist" id="regist" value="马上报名"/>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" checked="checked" name="agree" id="agree"/>
我同意注册条款和选手加入标准
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#">我已报名，马上登录个人中心</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h4>我承诺以下原则</h4>
<ul name="rule" id="rule">
<li>年满18岁</li>
<li>遵守比赛规则</li>
<li>退赛罚款违约金</li>
</ul>
</td>
</tr>
</table>
</form>
</body>
</html>
4702
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
