html零基础必看——html入门，编程就是如此简单
第十二章：表单、表格标签
- 一、form表单
- 1.1 form表单标签
- 1.2 input 输入表单控件标签
- 1.2.1 text文本框
- 1.2.2 password密码框
- 1.2.3 radio单选框
- 1.2.4 checkbox多选框
- 1.2.5 普通按钮 提交按钮 重置按钮
- 1.2.6 image 图像提交按钮
- 1.2.7 css3新特性
- 2 `：focus`表单获得焦点时被选中
- 二、select下拉菜单
- 三、textarea 多行输入文本框
- 四、 表格
- 总结
一、form表单
表单主要是为了用户的信息，采集数据，将用户输入的信息发送到服务器，然后返回给登录接口。
1.1 form表单标签
用来标记一个表单，存储表单数据
语法格式：<form action="" method="" name="" target="">表单内容</form>
form表单标签的一些属性：
- form 表单域
- action: 表示提交地址
- name:表单名称
- target: 提交完表单之后新页面在哪里打开。前面a链接里有讲到
1.2 input 输入表单控件标签
- input是行内元素，因此可以在一行显示。同时，input又是置换元素，因此支持宽高属性。（在前面第五章中： 二、行内元素有讲到，img、input都是行内元素，又是置换元素）
格式：<input type="输入控件类型" >
input 输入表单控件的一些属性：
- placeholder: 提示你要输入什么内容
- value: 表示控件里面默认输入的内容
- disabled: 禁止选中 你选择内容
- checked: 用在单选和多选身上 表示默认勾选
1.2.1 text文本框
格式：<input type="text" name= "username" id="" placeholder="" value="" size="" maxlength="" minlength="">
- name：文本框的名字，可以重复
- id： 也是文本框的名字，不可以重复
- placeholder ：提示你要输入什么内容
- value: 表示控件里面默认输入的内容
- size:文本框的宽度
- maxlength：文本框最大输入字符数
- minlength：文本框最小输入字符数
1.2.2 password密码框
格式：<input type="text" name= "username" id="" placeholder="" value="" size="" maxlength="" minlength=""> 密码框和文本框属性、格式和文本框一样，只是密码框输入的内容会被小黑点代替
1.2.3 radio单选框
格式：<input type="radio" name="" checked vaule><label for="">单选项的名称</label>
- name：单选框的名字。注意：同一组单选框里面的每一组单选项的name名字必须一致
- checked：表示默认勾选该项选择的内容
- disabled: 禁止选中该项选择的内容
- vaule：单选框的预设值（向服务器提交数据时传递的值）
<label></label>标签 ：辅助input标签进行选择
1.2.4 checkbox多选框
格式：<input type="checkbox" name="" checked vaule><label for="">当前选项的名称</label>
- name：单选框的名字。注意：同一组复选框里面的每一组单选项的name名字必须一致
- checked：表示默认勾选该项选择的内容
- disabled: 禁止选中该项选择的内容
- vaule：复选框的预设值（向服务器提交数据时传递的值）
<label></label>标签 ：辅助input标签进行选择
<form action="">
账号：<input type="text" name="username" placeholder="请输入账号" value="123456"><br>
<!-- 因为input是行内元素，不会自动换行，所以我们加上一个换行符 -->
密码：<input type="password" name="password" placeholder="请输入密码" value="123456">
<form action="">
性别：
<input type="radio" name="sex" checked><label for="boy">男孩</label>
<!-- 男孩里面加上了checked 表示默认勾选男孩 -->
<input type="radio" name="sex"><label for="girl">女孩</label>
<br>
喜欢的科目：
<input type="checkbox" name="subject" checked><label for="Chinese">语文</label>
<!-- 语文里面加上了checked 表示默认勾选语文 -->
<input type="checkbox" name="subject"><label for="math">数学</label>
<input type="checkbox" name="subject"><label for="English">英语</label>
<input type="checkbox" name="subject"><label for="physical">物理</label>
<input type="checkbox" name="subject" checked><label for="history">历史</label>
<!-- 历史里面加上了checked 表示默认勾选历史 -->
<input type="reset" value="重新选择">
<!-- 默认值就是重置，此处通过value改变预设值 -->
</form>1.2.5 普通按钮 提交按钮 重置按钮
- botton：普通按钮（普通按钮可以通过js绑定脚本程序，完成一些操作，后要结合后面的js）结合js如：
<input type="button" value="给关闭" oncClick="WinClose()"> - submit：提交按钮，可以激发表单提交的动作 （结合后面js，如一些注册、登录功能的实现）
- reset： 重置按钮，可以将表单恢复到初始的页面
这三种按钮都可以通过value属性指定按钮上显示的文字内容
1.2.6 image 图像提交按钮
格式：<input type="image" src="作为图像按钮的图片路径"> -->
<form action="">
<input type="button" value="我是普通按钮">
<br>
<input type="submit" value="我是提交按钮">
<input type="reset" value="我是重置按钮">
<!-- 使用图片作为提交1按钮的样式 -->
<input type="image" src="./img/2.jpg" width="30px" height="30px">
</form>效果图：
1.2.7 css3新特性
<form action="">
<!-- 7.文件上传框file -->
<!-- css3新特性 -->
<!-- 文件上传 -->
<input type="file"><br>
<!-- 日期选择框 -->
请选择日期：<input type="date"><br>
<!-- 时间 -->
请选择时间：<input type="time"><br>
<!-- 数字输入框 只能输入数字 字母e是特殊数字 -->
请输入数字：<input type="number" placeholder="只能输入数字,字母e是特殊数字"><br>
请滑动滑块验证：<!-- 数字滑块 -->
<input type="range"><br>
<!-- 颜色 -->
请选择颜色：<input type="color"><br>
<!-- 电子邮件 -->
请输入电子邮件：<input type="email" placeholder="请输入电子邮件"><br>
</form>效果图：
2 ：focus表单获得焦点时被选中
鼠标点击表单控件输入框时，外面的输入框可通过css修改的样式显示。
只限于表单标签使用才会生效。
这段样式加入rest（1）.css外部样式里，引入就行
/* 清除默认焦点边框 */
button,input{
outline: none;
}格式：
选择器
：focus{/写样式/}
<style>
/* 这段加入rest（1）.css外部样式里，引入就行 */
/* 清除默认焦点边框 */
button,input{
outline: none;
}
.text{
width: 200px;
height: 50px;
border: 1px solid red;
}
/* 点击表单控件 获取焦点选中
鼠标点击表单控件输入框时，外面的输入框可通过css修改的样式显示
*/
.text:focus{
border: 1px solid green;
}
</style>
</head>
<body>
账号：<input type="text" name="username" class="text" placeholder="请输入账号">
<br>
密码：<input type="password" name="password" class="text" placeholder="请输入账号">效果图：鼠标点击输入控件框时，这个控件框颜色会变成样式里面自己更改的颜色。
二、select下拉菜单
- select是一个容器元素，标记一个菜单或下拉列表。它所包含的option元素标记一个菜单或下拉列表中的每一项。
- 当select使用multiple属性时，用户可以同时选择列表中的多项内容
- option标记的selected属性指定该项被选取，默认是第一项被选取
- option标记的disabled属性指定该项不可用
<label for="season">请选择最喜欢的季节</label>
<select name="" id="">
<option value="red">春天</option>
<option value="green">夏天</option>
<option value="blue" selected>秋天</option>
<!-- option标记的selected属性指定该项被选取，默认是第一项被选取 -->
<option value="white" disabled>冬天</option>
<!-- option标记的disabled属性指定该项不可用 -->
</select>效果图：
三、textarea 多行输入文本框
一般用于网页底部留言之类的多行输入文本框
格式：<textarea name="textarea" id="" cols="number" rows="number" placeholder="欢迎留言" readonly></textarea>
- textarea:伸缩文本框元素
- cols: 每一行中字符数量
- rows: 显示行数
- placeholder: 提示你要输入什么内容
- readonly：设定多行文本区只读，不能编辑和修改
<textarea name="textarea" id="" cols="number" rows="number" placeholder="欢迎留言" readonly></textarea>效果图：鼠标点击右下角可以伸缩文本框大小
四、 表格
- table：表格标签，table标记代表一个表格
- tr：行 有多少个tr，就有多少行
- td ：单元格，一行里有多个td单元格构成
- th：表头 一般用于表格的第一行或第一列
- caption ：表格标题
<style>
table {
width: 300px;
height: 50px;
border: 1px solid red;
}
th,
tr,
td {
width: 100px;
height: 50px;
border: 1px solid pink;
text-align: center;
}
</style>
</head>
<body>
<!-- 定义表格 -->
<table>
<!-- 表格里面的一行 -->
<tr>
<!-- 表示单元格 -->
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>你好</td>
<td>18岁</td>
<td>456</td>
</tr>
</table>
<!--
table 定义表格标签
caption: 定义表格标题
tbody: 表格内容 不写也会自动生成
th:表头标签
tr:表格一行
td:表示表格里一个单元格 必须嵌套在 tr中标签
thead：代表表格头部
tbody: 表格内容 不写也会自动生成
tfoot：代表表格尾部
-->
<table>
<!-- 定义这个表格标题 -->
<caption>老师调查表</caption>
<tr>
<!-- 表头 -->
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
<th>性别</th>
</tr>
<tr>
<!-- 单元格 -->
<td>小春</td>
<td>18岁</td>
<td>写代码</td>
<td>男</td>
</tr>
<tr>
<!-- 单元格 -->
<td>无限</td>
<td>19岁</td>
<td>喜欢漂亮小姐姐</td>
<td>男</td>
</tr>
<tr>
<!-- 单元格 -->
<td>夏栀老师</td>
<td>19岁</td>
<td>爱吃小龙虾 螃蟹</td>
<td>女</td>
</tr>
</table>效果图：
表格合并单元格：
合并单元格
公式: 合并单元格个数 - 1 = 删除个数
rowspan: 跨行合并 合并顺序是从上往下 合并的
colspan: 跨列合并 先左后右<style>
table{
width: 900px;
border: 1px solid red;
margin: 30px auto;
/* 表格 单边框样式 */
border-collapse: collapse;
}
tr,td,th{
width: 350px;
height: 60px;
border: 1px solid #096;
text-align: center;
}
</style>
</head>
<body>
<!-- 合并单元格 难点 -->
<table >
<!-- 表格标题 -->
<caption>征婚表</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>征婚条件</th>
</tr>
<tr>
<td>黄黄</td>
<td>男</td>
<td rowspan="3">21岁</td>
<!-- 这是跨行合并， 此处td rowspan="3"，后面删除两个第三列的td即可-->
<td>21岁-29岁 特征:美女</td>
</tr>
<tr>
<td>文文</td>
<td rowspan="2">女</td>
<!-- <td>21岁</td> -->
<td>22岁-28岁 特征:有钱</td>
</tr>
<tr>
<td>水水</td>
<!-- <td>女</td> -->
<!-- <td>21岁</td> -->
<td>22岁-28岁 特征:有钱</td>
</tr>
<tr>
<td>西西</td>
<td>男</td>
<td>22岁</td>
<td>21岁-30岁 特征:有钱 美女</td>
</tr>
<tr>
<td>南南</td>
<td>男</td>
<td>22岁</td>
<td>21岁-30岁 特征:有钱 美女 黑丝</td>
</tr>
<tr>
<!-- 这是跨列合并， 此处td colspan="4"，后面删除本行里的3个td即可-->
<td colspan="4">都喜欢漂亮的小姐姐</td>
<!-- <td>都喜欢漂亮的小姐姐</td>
<td>都喜欢漂亮的小姐姐</td>
<td>都喜欢漂亮的小姐姐</td> -->
</tr>
</table>
<!--
合并单元格
公式: 合并单元格个数(2) - 1 = 删除个数 2
rowspan: 跨行合并 合并顺序是从上往下 合并的
colspan: 跨列合并 先左后右-->效果图：
总结
上述是小编为大家整理的form表单，以及input输入表单控件的一些类型、同时也补充了下拉菜单、多行文本输入框，最后还讲到表格、表格的单元格合并等结合相关案例做了一个比较详细的讲解。参考多方资料加上自己的理解整理出来的，或有不确之处和疏漏的地方，还望各位大佬能够不吝赐教，加以斧正，小编在此先行谢过了。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
