一、表单标签简介
二、常用的表单元素
1、form元素
表单元素的属性
2、input元素
输入框元素的属性
type属性
placeholder属性
name属性
disabled属性
checked属性
3、select下拉菜单
三、表单标签代码演示
一、表单标签简介
表单标签form用于收集、采集信息。 可以用于用户登录、注册功能时，收集用户的账号、密码等信息。在开发过程中如果需要实现登录、注册、评论、留言、表白墙、聊天室等功能，可以使用表单标签。
二、常用的表单元素
1、form元素
form 属于块级元素，可以独占一行显示，可以直接设置宽度高度。 form 标签点击“提交”按钮，会刷新页面，页面会发生跳转。
功能：用于创建一个表单
格式：<form action="xx" method="xx"></form>
表单元素的属性
表单元素包含action和method等属性，作用如下：
| 属性名称 | 作用 |
| action | 指定表单提交的地址，一般为服务器接口地址 |
| method | 指定表单提交的方式，一般为get或post |
代码如下，其中action一般为服务器接口地址，method一般为get或post。
<form action="xxx.com" method="post/get"></form>
2、input元素
input 属于行内块元素，在同一行显示，可以直接设置宽度高度，如果不想input在同一行显示，可以用div包裹起来，input标签属于单标签。
功能：作为表单中的输入框，有多种类型（如文本输入框、密码输入框等），根据type属性来确定输入框的类型
格式：<input text="xx" placeholder="xx" name="xx" id="" checked/selected/disabled>
输入框元素的属性
type属性
input标签的type属性用于指定输入框类型，可以是text、password、checkbox、radio、submit、reset等，type属性的属性值及其作用如下：
| 属性类型（type值） | 作用 |
| text | 文本输入框 |
| password | 密码输入框 |
| checkbox | 复选框 |
| radio | 单选框，如果需要单选，要设置name属性 |
| submit | 提交按钮，默认有一个“提交”的按钮 |
| reset | 重置按钮，默认有一个“重置”的按钮 |
| button | 按钮，默认只有一个方格，需要设置value显示按钮的值 |
| color | 颜色选择框 |
| file | 上传文件按钮，如果需要上传多个文件，需要设置multiple |
| number | 数字输入框，只能输入数字 |
| date | 日期选择框 |
| time | 时间选择框 |
type属性指定了输入框的类型，代码如下：
<form action="">
<div>
<!-- 文本输入框 -->
<input type="text">
</div>
<div>
<!-- 密码输入框 -->
<input type="password">
</div>
<div>
<!-- 复选框 -->
爱好：
<input type="checkbox">打篮球
<input type="checkbox">听音乐
<input type="checkbox">踢足球
<input type="checkbox">唱歌
</div>
<div>
性别：
<input type="radio" checked>男
<input type="radio">女
</div>
<div>
<input type="submit">
<input type="reset">
<input type="button" value="按钮">
</div>
<div>
<input type="color">
</div>
<div>
<input type="file">
<!-- 如果需要选择多个文件，设置multiple属性 -->
<input type="file" multiple>
</div>
<div>
<!-- 数字输入框 -->
<input type="number">
</div>
<div>
<!-- 日期选择框 -->
<input type="date">
</div>
<div>
<!-- 时间选择框 -->
<input type="time">
</div>
</form>效果如下
placeholder属性
placeholder属性用于提示用户输入内容，一般只设置输入框的提示内容。
<form action="">
<div>
<input type="text" placeholder="文本输入框">
</div>
<div>
<input type="password" placeholder="密码输入框">
</div>
<div>
<input type="number" placeholder="数字输入框">
</input>
</div>
</form>效果如下
name属性
name 键（key） 用于给input标签设置名称，方便服务器端处理。
name属性相同的单选按钮组。
如果单选按钮没有设置name属性，会选中多个，代码如下：
<form action="">
<div>
性别
<input type="radio">男
<input type="radio">女
</div>
</form>效果如下：
这时候性别两个选项都能选择，不符合逻辑，需要设置name属性使得只能选择一个。
<form action="">
<div>
性别
<input type="radio" name="sex">男
<input type="radio" name="sex">女
</div>
</form>disabled属性
disabled属性表示禁用，不会被选择。代码如下：
<form action="">
<div>
<input type="text" disabled placeholder="禁止输入">
</div>
</form>效果如下，此时无法编辑输入框
checked属性
checked在单选框、复选框中表示默认选中，代码如下：
<form action="">
<div>
性别：
<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女
</div>
</form>效果如下
3、select下拉菜单
功能：用于创建一个下拉菜单
格式：
<select name="" id="">
<option>选项</option>
</select>
seleted在下拉菜单中表示默认选中
<div>
城市：
<select name="" id="">
<option value="0" disabled selected>请选择城市</option>
<option value="1">广州</option>
<option value="1">上海</option>
<option value="1">深圳</option>
</select>
</div>效果如下：
三、表单标签代码演示
<form action="">
<div>
<input type="text" placeholder="文本输入框">
</div>
<div>
<input type="password" placeholder="密码输入框">
</div>
<div>
<input type="number" placeholder="数字输入框">
</div>
<div>
<input type="date" name="" id="">
</div>
<div>
<input type="time">
</div>
<div>
<!-- 0 - 9 十进制 -->
<!-- 0 - f 十六进制 -->
<input type="color" value="#ff0000">
</div>
<div>
<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">
</div>
<div>
性别：
<!-- name属性相同的单选按钮组 -->
<!-- checked属性表示默认选中 -->
<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女
</div>
<div>
爱好：
<input type="checkbox" name="" id="">阅读
<input type="checkbox" name="" id="">听音乐
<input type="checkbox" name="" id="">打篮球
<input type="checkbox" name="" id="">跑步
</div>
<div>
<select name="province" id="">
<!-- disabled属性表示禁用，不会被选择 -->
<option value="0" disabled>请选择省份</option>
<option value="1">浙江省</option>
<!-- selected属性表示默认选中 -->
<option value="1" selected>福建省</option>
<option value="1">湖北省</option>
</select>
</div>
<!-- 禁止输入 -->
<div>
<input type="text" placeholder="禁止输入" disabled>
</div>
<!--
checked在单选框、复选框中表示默认选中
seleted在下拉菜单中表示默认选中
disabled表示禁用
-->
<div>
<!-- 选择文件的标签 -->
<input type="file" name="photo">
<!-- multiple属性表示可以选择多个文件 -->
<input type="file" multiple>
</div>
<!--
label标签
label标签的for属性对应input标签的id属性，点击描述文本，输入框可以获取焦点
-->
<div>
<label for="username">用户名：</label>
<input type="text" id="username">
</div>
</form>最终效果图
