从零开始学前端：表单制作 --- 今天你学习了吗？（Day05）
从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（Day05）
复习：从零开始学前端：表格制作 — 今天你学习了吗？（Day04）
文章目录
- 从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（Day05）
前言
这04/05两节课是我自己错过了上课时间，看录播复习的，可能太程序化了，没有记录老师上课时出现的好玩的小梗~ 学习学习~
第五节课：讲述 了表单的基本标签和如何制作表单
一、表单标签
- 为什么需要使用表单标签：
1. 使用表单目的是为了收集用户信息。2. 在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。- 表单的组成：
表单域：包含表单元素的区域。表单控件(表单元素)：输入框提示信息：提示用户的信息表单域是一个包含表单元素的区域。 在HTML标签中，标签用于定义表单域，以实现用户信息的收集和传递。
目的：会把它范围内的表单元素信息提交给服务器.
<form action="url地址" method="提交方式(get/post)" name="表单域名称">各种表单元素控件</form>action="url地址” method=“提交方式” name="表单域名称"对于学习基础来说，我们暂时不用表单域提交数据,只需要写上form标签就可以了。
需要记住：
- 在我们写表单元素之前应该有个表单域把他们进行包含。
- 表单域使用的是form标签。
二、表单控件
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。
- input输入表单元素
- select下拉表单元素
- textarea文本域元素
- 表单中date属性
在
标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式(可以是文本字段、
复选框、掩码后的文本控件、单选按钮、按钮等)。
| 属性值 | 描述 |
|---|---|
| text | 定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符 |
| password | 定义密码字段。该字段中的字符被掩码 |
| radio | 定义单选按钮 |
| checkbox | 定义复选框 |
| submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
| reset | 定义重置按钮。重置按钮会清除表单中的所有数据。 |
| button | 定义可点击按钮(多数情况下，用于通过JavaScript启动脚本 |
| file | 定义输入字段和“浏览器按钮”用于上传文件 |
| number | 定义输入框必须输入数字 |
| 定义输入框必须是邮箱地址(@) |
除 type属性外，标签还有其他很多属性，其常用属性如下:
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 由用户自定义 | 定义input元素的名称。(前端作为了解) |
| value | 由用户自定义 | 用于设定输入框默认值 |
| checked | checked | 规定此input元素 首次加载时应当被选中(针对复选框checkbox) |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度。 |
| size | 自然数 | 指定控件宽度 |
| placeholder | 程序员自定义 | 规定帮助用户填写输入提示字符信息 |
| required(HTML5新增) | required | 表示输入框中是必填字段 |
三、label标签
标签不是表单课件，但是经常与表单搭配使用。
- 为什么要使用label标签？
标签用于绑定一个表单元素当点击标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,主要是用来增加用户体验的。
- 使用语法：
<form><input type="radio" name="sex" id="sex1" value="" /><label for="sex1">男</label><br><input type="radio" name="sex" id="sex2" value="" /><label for="sex2">女</label></form>主要就是id来绑定的
核心: 标签的for属性应当与相关元素的id属性相同。
四、select下拉框
通过和标记，可以设计页面中的下拉列表框，从而为用户提供一些选项和信息的列表。列表框中，可以看到多个选项：下拉列表框，只能看到一个选项。
- 使用语法：
<select name="" id="" > <option value="">选项1</option> <option value="">选项2</option></select>- 注意：
中至少包含一对
在中定义selected = " selected "时，当前项即为默认选中项。
五、textarea表单框
- 使用场景:
当用户输入文本内容较多的情况下，比如网站的提供意见输入框这个时候，我们就不能使用文本框表单了，此时我们可以使用