在html中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息2个部分组成。
表单域
<form>标签用于定义表单域，以实现用户信息的收集与传递，表单域包含多少信息就提交多少信息。
<!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>
<form action="demo.php" method="POST" name="name1">
</form>
</body>
</html>
表单控件
- input 输入表单元素
- select 下拉表单元素
- textarea 文本域元素
<input>表单元素
在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。
<input type="属性值" />
除type属性外，<input>标签还有其他属性
在包含radio或者checkbox属性的标签中，如果信息是一组，必须给他们命名相同的name名字
<!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>input表单元素</title>
</head>
<body>
<form>
<action="xxx.php" method="get" name="name1">
<!--text 文本框 用户可以在里面收入任何文字,且用户最多只能输入6个字符-->
用户名：<input type="text" name="username" value="默认提交值" maxlength="6"><br />
<!-- password 密码框 用户看不见输入的内容 -->
密码：<input type="password" name="pwd"><br />
<!-- radio 单选按钮 name是表单元素名字，只有选项有相同的名字name时，radio才可以实现多选一 -->
<!-- 单选按钮和复选按钮可以设置checked属性，当页面打开时默认选中这个按钮。 -->
性别：男 <input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女"><br />
<!-- checkbox 复选框 可以实现多选 -->
爱好：吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby" value="吃饭"> 打游戏 <input type="checkbox" name="hobby" value="打游戏"> <br>
<!-- 点击了提交按钮，可以把表单域form里面的表单元素里面值提交给后台服务器了 -->
<input type="submit" value="注册">
<!-- 重置按钮可以还原表单元素的默认状态 -->
<input type="reset" value="重新填写"><br>
<!--普通按钮 button 后期结合js使用-->
<input type="button" value="获取验证码"><br>
<!-- 文件域 上传文件使用的 -->
上传头像：<input type="file">
</form>
</body>
</html>
结果演示
<label>标签
<label>标签用于绑定一个表单元素，当点击<label》标签内的文本时，浏览器就会自动将焦点光标转到或选择到对应表单元素上，用来增加用户体验 。
<!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>label标签</title>
</head>
<body>
<label for="flag">用户名：</label><input type="text" id="flag">
<input type="radio" id="flag_nan" name="sex"><label for="flag_nan">男</label>
</body>
</html>
结果演示
<select>下拉表单元素
在页面中，如果有多个选项让用户选择时，可以使用<select>标签控件定义下拉列表，来节省页面空间。
<!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>select下拉表单</title>
</head>
<body>
<form>
<action="xxx.php" method="get" name="name1"></action>
籍贯：
<select>
<option>山东</option>
<option selected="selected">河南</option>
<option>浙江</option>
</select>
</form>
</body>
</html>
在<option>中定义selectde=”selected”时，可以作为默认选中项。
结果演示
<textarea>表单元素
当用户输入内容较多的情况下，就不能再使用文本框表单了，我们可以使用<textarea>标签，在表单元素中，<textarea>标签是用于定义多行文本输入的控件。
- cols=“每行中的字符数
- rows=“显示的行数”
<!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>textarea 文本域</title>
</head>
<body>
<form>
<action="xxx.php" method="get" name="name1"></action>
今日反馈
<textarea cols="20" rows="30">请输入...
</textarea>
</form>
</body>
</html>
结果演示
综合案例
<!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>
<table width="500">
<form>
<action="xxx.php" method="get" name="name1"></action>
<tr>
<td>性别：</td>
<td>
<label for="nan"><img src="img/man.jpg">男</label><input type="radio" name="sex" id="nan" value="男">
<label for="nv"><img src="img/women.jpg">女</label><input type="radio" name="sex" id="nv" value="女"><br>
</td>
</tr>
<tr>
<td>生日：</td>
<td>
<select>
<option >请选择年份</option>
<option>2018</option>
<option>2019</option>
</select>
<select>
<option >请选择月份</option>
<option>1</option>
<option>2</option>
</select>
<select>
<option >请选择日</option>
<option>4</option>
<option>20</option>
</select>
</td>
</tr>
<tr>
<td>所在地区：</td>
<td>
<input type="text" value="北京" name="add">
</td>
</tr>
<tr>
<td>婚姻状况：</td>
<td>
<label for="wh">未婚</label><input type="radio" name="hy" value="未婚" id="wh" checked="checked">
<label for="yh">已婚</label><input type="radio" name="hy" value="已婚" id="yh">
<label for="lh">离婚</label><input type="radio" name="hy" value="离婚" id="lh">
</td>
</tr>
<tr>
<td>学历：</td>
<td>
<input type="text" value="本科" name="xl">
</td>
</tr>
<tr>
<td>喜欢的类型：</td>
<td>
<input type="checkbox" name="xh" value="可爱的" id="wm"><label for="wm">妩媚</label>
<input type="checkbox" name="xh" value="善良的" id="ka"><label for="ka">可爱</label>
<input type="checkbox" name="xh" value="都喜欢" id="dxh" checked="checked"><label for="dxh">都喜欢</label>
</td>
</tr>
<tr>
<td>个人介绍：</td>
<td>
<textarea cols="20" rows="2">个人简介</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="免费注册">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" checked="checked">我同意注册条款和会员加入标准
</td>
</tr>
<tr>
<td></td>
<td>
<h5>我承诺</h5>
<ul>
<li>年满18</li>
<li>真诚</li>
</ul>
</td>
</tr>
</form>
</table>
</body>
</html>
结果演示
