从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（Day05）

复习：https://blog.csdn.net/weixin_45266979/article/details/122327142?spm=1001.2014.3001.5501

文章目录

• 从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（Day05）
• • 前言
  • 第五节课：讲述 了表单的基本标签和如何制作表单
  • • 一、表单标签
    • 二、表单控件
    • 三、label标签
    • 四、select下拉框
    • 五、textarea表单框
    • 六、表单date属性值
    • 七、表单相关的标签(了解)
    • 八、练习

前言

这04/05两节课是我自己错过了上课时间，看录播复习的，可能太程序化了，没有记录老师上课时出现的好玩的小梗~ 学习学习~

第五节课：讲述 了表单的基本标签和如何制作表单

一、表单标签

• 为什么需要使用表单标签：

1. 使用表单目的是为了收集用户信息。
2. 在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。

• 表单的组成：

表单域：包含表单元素的区域。
表单控件(表单元素)：输入框
提示信息：提示用户的信息

 <form action="url地址”method=“提交方式(get/post)” name="表单域名称">
	各种表单元素控件
</form>

需要记住：

1. 在我们写表单元素之前应该有个表单域把他们进行包含。
2. 表单域使用的是form标签。

二、表单控件

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

1. input输入表单元素
2. select下拉表单元素
3. textarea文本域元素
4. 表单中date属性

三、label标签

标签不是表单课件，但是经常与表单搭配使用。

• 为什么要使用label标签？

<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来绑定的
核心: < label>标签的for属性应当与相关元素的id属性相同。

四、select下拉框

通过<select>和<option>标记，可以设计页面中的下拉列表框，从而为用户提供一些选项和信息的列表。列表框中，可以看到多个选项：下拉列表框，只能看到一个选项。

• 使用语法：

<select name="" id="" >
     <option value="">选项1</option>
     <option value="">选项2</option>
</select>

• 注意：

<select>中至少包含一对< option>
在<option>中定义selected = " selected "时，当前项即为默认选中项。

五、textarea表单框

• 使用场景:

当用户输入文本内容较多的情况下，比如网站的提供意见输入框这个时候，我们就不能使用文本框表单了，此时我们可以使用< textarea>标签。在表单元素中，< textarea>标签是用于定义多行文本输入的控件。（特大的文本框）

• 使用语法：

<textarea name="" id="" cols="60" rows="5"></textarea>

通过< textarea>标签可以轻松地创建多行文本输入框。
cols=“每行中的字符数”，rows=“显示的行数”，我们在实际开发中不会使用，都是用CSS来改变大小

六、表单date属性值

普通的文本输入框也可以用来输入日期和时间，但提交后的数据需要进行二次处理才能使用HTML5，提供date pickers(日期选择器)类型的选择框，很大程度的简化了这一过程，用户可以直接选择日期，时间等选项。

七、表单相关的标签(了解)

1. <fieldset>标签元素可将表单内的相关元素分组。
2. <legend> 标签为 fieldset 元素定义标题。

八、练习