表单标签: 收集用户信息
1、表单域==<from>标签
包含表单元素的区域----会把范围内的表单元素信息提交给服务器
1、action-->url地址 接收并存放至服务器url地址
2、method-->get/post 设置表单的提交方式
3、name-->名称 设置表单名称,用于区分同意页面的多个表单域
2、表单控件
1、input输入表单元素 -->type=“属性值”、name=“控件值名字”、value=“默认显示的值/返回后端人员查看的值”、maxlength=“最大输入值”、checked=“checked”默认选择
button按钮
radio单选按钮
checkbox复选框
file文件域,上传文件使用
password密码
submit提交按钮,会把form表格中的数据发送至服务器
reset重置按钮
button普通按钮
2、<label>标签
<label for ="sex">男</label>
<input type="radio" name= "sex" id="sex"/>
3、select下拉表单元素 --> selected=“selected”默认选择(写在option中)
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
4、textarea文本元素-->cols、rows 显示几行几列
<textarea></textarea>
p56世纪佳缘练习
<!DOCTYPE html>
<html lang="en">
<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>
<h3>青春不常在,抓紧谈恋爱</h3>
<form action="xxx.php" method="get">
<table width="500">
<tr>
<td>性别</td>
<td>
<input type="radio" id="boy" name="sex" checked="checked">
<label for="boy"><img src="image/boy.jpg" width="20" height="20">男</label>
<input type="radio" id="girl" name="sex">
<label for="girl"><img src="image/girl.jpg" width="20" height="20">女</label>
</td>
</tr>
<tr>
<td>生日</td>
<td>
<select name="year" >
<option selected="selected">请选择年</option>
<option value="1990" >1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
</select>
<select name="mouth" >
<option selected="selected">请选择月</option>
<option>1月</option>
<option>2月</option>
<option>3月</option>
<option>4月</option>
<option>5月</option>
<option>6月</option>
<option>7月</option>
<option>8月</option>
<option>9月</option>
<option>10月</option>
<option>11月</option>
<option>12月</option>
</select>
<select name="day">
<option selected="selected">请选择日</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
<td>
<input type="text" name="add" value="北京思密达">
</td>
</tr>
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="marry" id="no" checked="checked">
<label for="no">未婚</label>
<input type="radio" name="marry" id="yes">
<label for="yes">已婚</label>
<input type="radio" name="marry" id="ex">
<label for="ex">离婚</label>
</td>
</tr>
<tr>
<td>学历</td>
<td>
<input type="text" name="background" value="幼儿园">
</td>
</tr>
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="like" >妩媚的
<input type="checkbox" name="like" >可爱的
<input type="checkbox" name="like" >小鲜肉
<input type="checkbox" name="like" >老腊肉
<input type="checkbox" name="like" >都喜欢
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea>自我介绍</textarea>
</td>
</tr>
<tr>
<td rowspan="4"></td>
<td>
<input type="submit" value="免费注册">
</td>
</tr>
<tr>
<td>
<input type="checkbox" >我同意注册条款和会员加入标准
</td>
</tr>
<tr>
<td>
<a href="#" target="_blank">我是会员,立即登录</a>
</td>
</tr>
<tr>
<td>
<h5>我承诺</h5>
<ul>
<li>年满18岁,单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</form>
</body>
</html>