持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情
来到了HTML学习之路上最头疼的表单环节，记笔记时更需要缕清思路，集中记忆涉及到的标签内容。
上一篇文章：lxmoe的HTML学习笔记（二） - 掘金 (juejin.cn)
表单标签
在HTML中表单通常用于收集信息，一个完整的表单通常由表单元素，例如文本输入框，复选框，提交按钮等，提示文本和表单域构成，表单域是为了容纳表单元素和提示文本，定义处理表单数据程序的url地址并提交到服务器。
其中表单元素可以通过input标签来控制，我们还可以为他设置属性，常用属性如下表所示：
| 属性 | 属性值 | 描述 |
|---|---|---|
| type | text | 单行文本输入框 |
| password | 密码输入框 | |
| radio | 单选框 | |
| checkbox | 复选框 | |
| button | 普通按钮 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| image | 图像形式的提交按钮 | |
| file | 文件域 | |
| name | 用户自定义 | 控件名称 |
| value | 用户自定义 | 控件中默认文本值 |
| size | 为正整数 | input控件在页面中的显示宽度 |
| checked | checked | 定义选择默认被选中的项 |
| maxlength | 为正整数 | 控件允许输入的最多字符数 |
看完基本的表单元素表后，来进行一波实战吧：
<input type="text" />
**可输入任何文本
<input type="password" maxlength="10" />
**输入后以密码形式展示，允许输入最大字符数为10
<input type="radio" name="xx" /> 帅哥
<input type="radio" name="xx" /> 美女
<input type="radio" name="xx" checked="checked"/> 又帅又美
**是一组 需要设置name值相同，checked用来设置默认选中项
<input type="checkbox" name="yy" /> 蛋糕
<input type="checkbox" name="yy" /> 薯片
**复选框可以同时选择多个
<input type="button" value="zz" />
**当type为button，我们需要给他一个文本值，当type为submit和reset时，我们也可以设置value修改本身文本值
<input type="image" src="qq.jpg" />
**该图像会变成一个按钮
<input type="file" />
*可上传文件
综上的实战让我们了解了整体的表单元素的使用，那么下面再来补充一些表单修饰的东西吧
那么，不妨思考一下，当我们在填写信息的时候，如果输入框过小，不容易点击怎么办呢，这时我们就可以采用获取焦点的方式，通过label标签来实现，具体怎么实现呢，可以看看下面的代码，
<label> 输入账号：<input type="text" /> </label>
<label for="figure"> 输入账号：<input type="text" /> <input type="text" id="figure" /> </label>
在使用label的时候我们需要注意的是：当只有一个表单时 用label直接包裹住，而当有多个表单时，我们就需要用for id进行绑定
还有某个表单项目的文字要求输入字符太多的时候，比如输入个人介绍，我们就需要使用文本域，即textarea标签，我们可以修改cols与rows来控制表单域的大小
<textarea cols="每行中的字符数" rows="显示的行数">
内容
</textarea>
一般来说下拉菜单比较常用于固定项的选择防止用户自定输入，而我们需要设置下拉菜单的选择的时候，可以用select定义下拉菜单，下面是一个基本的下拉菜单，而我们可以通过selected设置选项一为默认项
<select>
<option selected="selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
</select>
最后，我们应给表单定义一个表单域，即创建一个表单，来实现用户信息能够传递给服务器，我们需要对于表单进行一些属性的配置。
<form action="url地址" method="提交方式" name="表单名称">
表单元素
</form>
在上面的表单中action用于指定接收并处理表单数据的url地址，method可设置表单数据的提交方式，值为get/post，而name可指定表单名称
