累了就歇歇，张弛有度才能“远行”~（没错！我说的就是灵笼的远行hhh）
文章内容输出来源：拉勾教育大前端就业集训营
1.表单
- 什么是表单：网页除了向用户展示信息外，还会收集用户输入的一些信息，就是通过表单来进行的。
- 组成部分：HTML中，完整的表单通常由表单域、提示信息和表单控件（表单元素）3个部分组成。
2.表单域
- 概述：相当于一个容器，用来容纳所有的表单控件和提示信息。可以通过“表单域”来定义处理表单数据的逻辑的url地址，以及数据提交到服务器的方法。如果不定义表单域，则表单中的数据将无法传送到后台服务器。
- form标签：HTML的表单域使用<form>标签进行定义，双标签，容器级标签。
- 意义：form标签是一个功能性标签，填写的表单信息如果想正确的提交到服务器，就必须放在一对form标签内。
- action属性：指定接收并处理表单数据的服务器程序的url地址。（目前了解即可）
- method属性：用于设置表单数据的提交方式。（目前了解即可）
<form action="your server url" method="POST">...</form>
3.提示信息
- 概述：对于某些表单控件，例如一个输入框，用户不知道是干什么的，需要你对该控件进行说明，这就是提示信息。
- 本质：提示信息大部分情况下就是文本内容，此时只需要使用p标签即可。
提示信息并不是一个新的标签，之所以拿出来讲，就是为了提高用户的体验，语法上虽然不是必须的，但是从用户层面来讲，是十分重要的。
4.表单控件——input标签
- 概述：是所有表单控件中，最重要的一个表单元素。可以通过其属性来实现多种多样的功能。
- input标签：单标签。
- type属性：根据不同的属性值，实现多种功能。
单行文本输入框
密码输入框
单选框，但是你会发现虽然长得像单选框，但“单选功能”并没有实现。
单选框增加了name属性，相同name属性的单选框为同一组，该组单选框功能正常。
多选框
普通按钮，目前点了没有反应，后期增加js代码来实现按钮功能。
重置按钮，自带重置功能，会重置一个表单里面所有表单控件。
提交按钮
图像形式按钮
上传文件按钮，但是你发现只能上传1个文件，如何上传多个文件呢？
<!-- 可一次上传多个文件 -->
<input type="file" multiple>
5.表单控件——textarea标签
- 概述：textarea，中文名“文本域”，是一种支持多行输入的表单控件。
- textarea标签：双标签，在元素内容中可输入默认展示的文字内容。（这种默认展示内容点击是不会消失的）
- rows属性：表示文本框最大显示的行数，超出设置行数则隐藏最开始的文字，并出现滚动条。
- cols属性：表示出现滚动条后，每行显示的最大字节数（此处一个汉字按照2字节计算）。不推荐使用该属性，且在mac电脑上，会存在误差，仅做了解即可。
6.表单控件——select标签
- 实现方式：需要两个标签配合完成，select和option标签，其中select标签嵌套option。
- select标签：用于定义一个下拉菜单，是下拉菜单的外部框架。
- option标签：用于定义一个选择项，是下拉菜单中的某一项。
- optgroup标签：可有可无，分组管理了一类option标签，只做展示用，无法被选择。
7.表单控件——label标签
- 概述：所有的表单控件，都可以通过其他内容去扩大触发点击的范围，此时需要使用label标签实现。
- 绑定：点击页面内某内容，相当于点击页面内某表单控件，想要实现这样的功能，就必须把“某内容”和“某控件”联系在一起，这样的操作叫做“绑定”。
- 绑定方式1：给表单控件设置id属性，将需要绑定的内容放入label标签的元素内容中，给label标签设置for属性，属性值为被绑定控件的id值。
<input type="radio" name="sex" id="man"><label for="man">男</label>
<input type="radio" name="sex" id="woman"><label for="woman">女</label>
解释：不加label前，点击“男”文字，控件没有任何反应，一旦加了label标签并绑定，点击“男”文字，相当于点击了控件。
- 绑定方式2：当表单控件与绑定内容在一起时，可简化写法。将表单控件和绑定内容一起放到label标签内即可。
<label><input type="radio">男</label>
两种绑定方式，实现的效果是一致的。
前端文章汇总目录
https://www.jianshu.com/p/6d80dd616ff4
结束语：一花一世界，一木一浮生，诸君共勉！
网友评论