html第二天--表单控件和表格
html第二天学习计划：掌握网页最常见的表单元素和表格，前面我们已经学习了网页常用的html 标签，今天我学点稍微复杂点的东西，网页常见的表单输入、单选框、多选框、文本域等
一表单：
表单的作用：
用于收集用户信息，不管是现实生活中还是网页中，表单无处不不在，接下来我们就来学习表单
表单的使用场景：
用户登录注册、提交、用户信息提交等
表单的三大组成：
表单域：表单的整个区域
表单控件 ： 表单元素
表单提示 : 表单提示信息 比如账号、密码等
表单域：
通过 form 标签来定义 <form></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>html表单域</title>
</head>
<body>
<!-- action: url地址，表示要提交到哪个页面进行处理 -->
<!-- method: 提交方式 -->
<!-- name: 用于后台区分不同的表单域 -->
<!-- 现阶段，只需知道表单域标签是form 就行，里面参数无需记忆-->
<form action="deemo.php" method="POST" name="name1">
</form>
</body>
</html>
表单元素（表单控件）：
input 元素：输入元素
select 元素：下拉元素
textarea 元素：文本域元素
我们先来学input元素，input元素通过type来 区分不同的形态 （输入框、密码框、单选框、复选框、提交按钮、重置按钮、按钮）
输入文本框：type="text"
输入密码框：type="password"
单选框：type="radio"
复选框：type="checkbox"
提交按钮：type="submit"
重置按钮： type="reset"
普通按钮：typee="button"
上传文件：type="file"
文本框、密码框、单选框、复选框（多选）
<!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>html表单域</title>
</head>
<body>
<!-- 写表单元素前，需要有 form标签 -->
<form action="deemo.php" method="POST" name="name1">
<!-- input元素 -->
<!-- 文本框 -->
用户名：<input type="text"><br>
<!-- 密码框 -->
密码：<input type="password"><br>
<!-- 单选框：单选-->
<!-- 单选按钮必须有一个相同的name属性值 -->
性别：男：<input type="radio" name="sex"> 女：<input type="radio" name="sex"><br>
<!-- 复选框：多选效果 -->
爱好：吃饭 <input type="checkbox">睡觉 <input type="checkbox">写代码 <input type="checkbox"><br>
</form>
</body>
</html>
一般我们会给input 标签加上name属性，用于区分不同的input
<!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>html表单域</title>
</head>
<body>
<form action="deemo.php" method="POST" name="name1">
用户名：<input type="text" name="username"><br>
密码：<input type="password" name="password"><br>
<!-- 单选框：单选-->
<!-- 单选按钮必须有一个相同的name属性值，才能保证单选 -->
性别：男：<input type="radio" name="sex"> 女：<input type="radio" name="sex"><br>
<!-- 复选框：多选效果 -->
爱好：吃饭 <input type="checkbox" name="checkbox">睡觉 <input type="checkbox" name="checkbox">写代码 <input type="checkbox" name="checkbox"><br>
</form>
</body>
</html>
input的value 属性，给默认值，input的name和value属性 主要是给你后台人员 做标识用的，用来区别选了什么
<!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>html表单域</title>
</head>
<body>
<form action="deemo.php" method="POST" name="name1">
用户名：<input type="text" name="username" value="苗苗"><br>
密码：<input type="password" name="password" value="29"><br>
<!-- 单选框：单选-->
<!-- 单选按钮必须有一个相同的name属性值，才能保证单选 -->
性别：男：<input type="radio" name="sex"> 女：<input type="radio" name="sex" value="男"><br>
<!-- 复选框：多选效果 -->
爱好：吃饭 <input type="checkbox" name="checkbox">睡觉 <input type="checkbox" name="checkbox">写代码 <input type="checkbox" name="checkbox"><br>
</form>
</body>
</html>
对于单选框和复选框，可以设置 checked 属性，设置为 默认选中 状态
<!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>html表单域</title>
</head>
<body>
<form action="deemo.php" method="POST" name="name1">
<!-- 单选按钮必须有一个相同的name属性值，才能保证单选 -->
性别：男：<input type="radio" name="sex"> 女：<input type="radio" name="sex" value="男" checked><br>
<!-- 复选框：多选效果 -->
爱好：吃饭 <input type="checkbox" name="checkbox" checked>睡觉 <input type="checkbox" name="checkbox" checked>写代码 <input type="checkbox" name="checkbox" checked><br>
</form>
</body>
</html>
input的maxlength 属性：限制输入最大位数
<!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>html表单域</title>
</head>
<body>
<form action="deemo.php" method="POST" name="name1">
用户名：<input type="text" name="username" maxlength="6"><br>
密码：<input type="password" name="password" maxlength="6"><br>
</form>
</body>
</html>
input 的type设置为 submit ：提交按钮；reset 为重置按钮;button为普通按钮
<!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>html表单域</title>
</head>
<body>
<form action="demo.php" method="POST" name="name1">
<!-- 输入框 -->
用户名：<input type="text" name="username"><br>
<!-- 密码框 -->
密码：<input type="password" name="password"><br>
<!-- 单选框：单选-->
性别：男：<input type="radio" name="sex"> 女：<input type="radio" name="sex"><br>
<!-- 复选框：多选效果 -->
爱好：吃饭 <input type="checkbox" name="checkbox">睡觉 <input type="checkbox" name="checkbox">写代码 <input
type="checkbox" name="checkbox"><br>
<!-- 提交按钮 -->
<!-- value：提交按钮文字 -->
<input type="submit" value="注册"><br>
<!-- reset:重置按钮 -->
<!-- 重置按钮的作用：还原表单元素的默认状态-->
<input type="reset" vlaue="重置"><br>
<!-- 普通按钮 -->
<input type="button" value="点我呀，苗苗"><br>
</form>
</body>
</html>
input的type属性设置为 file,上传文件
<!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>html表单域</title>
</head>
<body>
<form action="demo.php" method="POST" name="name1">
<!-- 输入框 -->
用户名：<input type="text" name="username"><br>
<!-- 密码框 -->
密码：<input type="password" name="password"><br>
<!-- 单选框：单选-->
性别：男：<input type="radio" name="sex"> 女：<input type="radio" name="sex"><br>
<!-- 复选框：多选效果 -->
爱好：吃饭 <input type="checkbox" name="checkbox">睡觉 <input type="checkbox" name="checkbox">写代码 <input
type="checkbox" name="checkbox"><br>
<!-- 提交按钮 -->
<!-- value：提交按钮文字 -->
<input type="submit" value="注册"><br>
<!-- reset:重置按钮 -->
<!-- 重置按钮的作用：还原表单元素的默认状态-->
<input type="reset" vlaue="重置"><br>
<!-- 普通按钮 -->
<input type="button" value="点我呀，苗苗"><br>
<!-- 文件上传 -->
上传文件：<input type="file">
</form>
</body>
</html>
<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>html表单域</title>
</head>
<body>
<form action="demo.php" method="POST" name="name1">
<!-- label标签：自动聚焦光标 -->
<label for="name">用户名：</label><input type="text" name="username" id="name"><br>
<!-- 不使用lable -->
性别：<input type="radio" name="radio">男<br>
<!-- 使用label -->
性别：<input type="radio" name="radio" id="nan"><label for="nan">男</label>
</form>
</body>
</html>
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>
籍贯：
<select name="" id="input" class="form-control" required="required">
<!-- 至少包含一个option,不然无选项 -->
<!-- selected:默认选中 -->
<option value="">山东</option>
<option value="">广东</option>
<!-- 默认选中北京 -->
<option value="" selected>北京</option>
<option value="">天津</option>
</select>
</body>
</html>
textarea 文本域：
使用场景：大量的书写文字的时候，比如留言、备注等
<!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="">
今日反馈：
<textarea name="" id="" cols="30" rows="10">
生活就是生活，你会遇到很多事情。曾经我总是紧皱着眉头想改变一切，不过现在我更愿意微笑，或许多一点调侃。你也许会清楚生活的味道。——科比
</textarea>
</form>
</body>
</html>
文本提示语: placeholder:"请输入内容"
<!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="deemo.php" method="POST" name="name1"> <!-- 文本框 --> 用户名：<input type="text" placeholder="请输入内容"><br> <!-- 文本域 --> <div> 详细信息: </div> <textarea name="" id="" cols="200" rows="5" placeholder="请输入内容"> </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> <!-- tr:行，有多少个tr就有多少行 --> <!-- 第一行 --> <tr> <!-- 列 --> <td>1111</td> <td>1222</td> <td>1333</td> <td>1444</td> </tr> <!-- 第二行 --> <tr> <td>2111111111</td> <td>2222222222</td> <td>2333333333</td> <td>2444444444</td> </tr> </table> </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> <!-- 带有边框、内容居中 --> <!-- border:边框厚度 --> <!-- bordercolor:边框颜色 --> <table border="1" bordercolor="pink"> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>籍贯</td> <td>爱好</td> </tr> <tr> <td>小郑</td> <td>女</td> <td>保密</td> <td>广东-汕尾</td> <td>听歌、刷抖音</td> </tr> <tr> <td>小陈</td> <td>男</td> <td>保密</td> <td>江西-赣州</td> <td>篮球、写代码</td> </tr> </table> </body> </html>
表格间距为0、内容居中：
<!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> <!-- 带有边框、没有间距、内容居中 --> <!-- border:边框厚度 --> <!-- bordercolor:边框颜色 --> <!-- algin:table居中 --> <!-- cellspacing：单元格间距为0，就是没有间距；你可设置为10 尝试一下 --> <!-- 设置宽度，高度 --> <table border="1" bordercolor="skyblue" cellspacing="0"> <tr align="center" style="font-weight:bold;"> <td width="100px;">姓名</td> <td width="50px;">性别</td> <td width="100px;">年龄</td> <td width="200px;">籍贯</td> <td width="500px;">爱好</td> </tr> <tr align="center"> <td>小郑</td> <td>女</td> <td>保密</td> <td>广东-汕尾</td> <td>听歌、刷抖音</td> </tr> <tr align="center"> <td>小陈</td> <td>男</td> <td>保密</td> <td>江西-赣州</td> <td>篮球、写代码</td> </tr> </table> </body> </html>
将 表格 显示在网页中间： algin="center"
<!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> <!-- 将表格放在网页中间 --> <!-- align="center" 即可 --> <!-- 后续会通过css方式 让表格居中显示 --> <table border="1" bordercolor="skyblue" align="center" cellspacing="0"> <tr align="center" style="font-weight:bold;"> <td width="100px;">姓名</td> <td width="50px;">性别</td> <td width="100px;">年龄</td> <td width="200px;">籍贯</td> <td width="500px;">爱好</td> </tr> <tr align="center"> <td>小郑</td> <td>女</td> <td>保密</td> <td>广东-汕尾</td> <td>听歌、刷抖音</td> </tr> <tr align="center"> <td>小陈</td> <td>男</td> <td>保密</td> <td>江西-赣州</td> <td>篮球、写代码</td> </tr> </table> </body> </html>
合并列： colspan
<!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 border="1" bordercolor="black" align="center" cellspacing="0"> <!-- 行 --> <tr height="40" align="center"> <td style="font-weight:bold;">姓名</td> <td>苗苗</td> <td style="font-weight:bold;">汉语拼音</td> <td>miaomiao</td> <td style="font-weight:bold;">身份证号码</td> <!-- colspan：合并列 --> <td colspan="3">360781199903027010</td> </tr> <tr height="40" align="center"> <td style="font-weight:bold;">性别</td> <td>女</td> <td style="font-weight:bold;">年龄</td> <td>23</td> <td style="font-weight:bold;">出生日期</td> <td>1999</td> <td style="font-weight:bold;">民族</td> <td>汉</td> </tr> <tr height="40" align="center"> <td style="font-weight:bold;">籍贯</td> <td>广东</td> <td style="font-weight:bold;">出生地</td> <td>深圳</td> <td style="font-weight:bold;">户口所在地</td> <td>广东省汕尾市</td> <td style="font-weight:bold;">户口类型</td> <td>城镇</td> </tr> <tr height="40" align="center"> <td style="font-weight:bold;">档案所在单位</td> <td>深圳市</td> <td style="font-weight:bold;">社保缴纳单位</td> <td>深圳市龙岗区</td> <td style="font-weight:bold;">住房公积金缴纳单位</td> <td>爱都科技有限公司</td> <td style="font-weight:bold;">婚姻状况</td> <td>未婚</td> </tr> <tr height="40" align="center"> <td style="font-weight:bold;">配偶所在地</td> <td>暂无配偶</td> <td style="font-weight:bold;">父母所在地</td> <td>深圳</td> <td style="font-weight:bold;">血型</td> <td>保密</td> <td style="font-weight:bold;">健康状况</td> <td>健康</td> </tr> </table> </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 border="1" bordercolor="black" align="center" cellspacing="0"> <!-- 行 --> <tr height="40" align="center"> <td style="font-weight:bold;">姓名</td> <td>苗苗</td> <td style="font-weight:bold;">汉语拼音</td> <td>miaomiao</td> <td style="font-weight:bold;">身份证号码</td> <td colspan="3">360781199903027010</td> <!-- rowspan：合并行 --> <td rowspan="5"> <!-- 照片框:存放照片 --> <img src="./kb.jpg" alt="暂无照片" height="100"> </td> </tr> <tr height="40" align="center"> <td style="font-weight:bold;">性别</td> <td>女</td> <td style="font-weight:bold;">年龄</td> <td>23</td> <td style="font-weight:bold;">出生日期</td> <td>1999</td> <td style="font-weight:bold;">民族</td> <td>汉</td> </tr> <tr height="40" align="center"> <td style="font-weight:bold;">籍贯</td> <td>广东</td> <td style="font-weight:bold;">出生地</td> <td>深圳</td> <td style="font-weight:bold;">户口所在地</td> <td>广东省汕尾市</td> <td style="font-weight:bold;">户口类型</td> <td>城镇</td> </tr> <tr height="40" align="center"> <td style="font-weight:bold;">档案所在单位</td> <td>深圳市</td> <td style="font-weight:bold;">社保缴纳单位</td> <td>深圳市龙岗区</td> <td style="font-weight:bold;">住房公积金缴纳单位</td> <td>爱都科技有限公司</td> <td style="font-weight:bold;">婚姻状况</td> <td>未婚</td> </tr> <tr height="40" align="center"> <td style="font-weight:bold;">配偶所在地</td> <td>暂无配偶</td> <td style="font-weight:bold;">父母所在地</td> <td>深圳</td> <td style="font-weight:bold;">血型</td> <td>保密</td> <td style="font-weight:bold;">健康状况</td> <td>健康</td> </tr> </table> </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 border="1" bordercolor="black" align="center" cellspacing="0"> <!-- 行 --> <tr height="40" align="center"> <td style="font-weight:bold;">姓名</td> <td>苗苗</td> <td style="font-weight:bold;">汉语拼音</td> <td>miaomiao</td> <td style="font-weight:bold;">身份证号码</td> <td colspan="3">360781199903027010</td> <!-- rowspan：合并行 --> <td rowspan="5"> <!-- 照片框:存放照片 --> <img src="./kb.jpg" alt="暂无照片" height="100"> </td> </tr> <tr height="40" align="center"> <td style="font-weight:bold;">性别</td> <td>女</td> <td style="font-weight:bold;">年龄</td> <td>23</td> <td style="font-weight:bold;">出生日期</td> <td>1999</td> <td style="font-weight:bold;">民族</td> <td>汉</td> </tr> <tr height="40" align="center"> <td style="font-weight:bold;">籍贯</td> <td>广东</td> <td style="font-weight:bold;">出生地</td> <td>深圳</td> <td style="font-weight:bold;">户口所在地</td> <td>广东省汕尾市</td> <td style="font-weight:bold;">户口类型</td> <td>城镇</td> </tr> <tr height="40" align="center"> <td style="font-weight:bold;">档案所在单位</td> <td>深圳市</td> <td style="font-weight:bold;">社保缴纳单位</td> <td>深圳市龙岗区</td> <td style="font-weight:bold;">住房公积金缴纳单位</td> <td>爱都科技有限公司</td> <td style="font-weight:bold;">婚姻状况</td> <td>未婚</td> </tr> <tr height="40" align="center"> <td style="font-weight:bold;">配偶所在地</td> <td>暂无配偶</td> <td style="font-weight:bold;">父母所在地</td> <td>深圳</td> <td style="font-weight:bold;">血型</td> <td>保密</td> <td style="font-weight:bold;">健康状况</td> <td>健康</td> </tr> <tr height="40" align="center"> <td style="font-weight:bold;">获奖名称</td> <td>最佳学员奖</td> <td style="font-weight:bold;">获奖日期</td> <td></td> <td style="font-weight:bold;">获奖信息</td> <td colspan="4"></td> </tr> <tr height="40" align="center"> <td rowspan="3" style="font-weight:bold;">紧急情况联系人</td> <td style="font-weight:bold;">姓名</td> <td colspan="2">陈福中</td> <td style="font-weight:bold;">本人关系</td> <td colspan="2">good friend</td> <td style="font-weight:bold;">联系电话</td> <td colspan="2">13549345011233</td> </tr> <tr height="40" align="center"> <td style="font-weight:bold;">工作单位</td> <td colspan="8">深圳市爱都科技有限公司</td> </tr> <tr height="40" align="center"> <td style="font-weight:bold;">家庭地址</td> <td colspan="7">广东省深圳市龙岗区*********</td> </tr> </table> </body> </html>
