表单便签的作用：

主要是用于收集用户数据

在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时就需要表单。

表单的组成

表单：表单域，表单控件和提示信息3部分组成

表单域

表单域是一个包含表单元素的区域。

在 HTML 标签中，

表单控件（表单元素）

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

接下来我们讲解:

1. input输入表单元素

2. select下拉表单元素

3. textarea 文本域元素

表单元素

在英文单词中，input 是输入的意思，而在表单元素中 标签用于收集用户信息。

在 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本

字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

 标签为单标签

 type 属性设置不同的属性值用来指定不同的控件类型

input常见使用问题

1. 有些表单元素想刚打开页面就默认显示几个文字怎么做?

答: 可以给这些表单元素设置 value 属性=“值

用户名:

2. 页面中的表单元素很多，如何区别不同的表单元素?

答: name 属性：当前 input 表单的名字，后台可以通过这个 name 属性找到这个表单。页面中的表单很多，

name 的主要作用就是用于区别不同的表单。

用户名:

3. 如果页面一打开就让某个单选按钮或者复选框是选中状态?

答: checked 属性：表示默认选中状态。用于单选按钮和复选按钮。

标签

标签为 input 元素定义标注（标签）。

标签用于绑定一个表单元素, 当点击 标签内的文本时，浏览器就会自动将焦点(光标)转到或者

选择对应的表单元素上,用来增加用户体验.

语法：

男

核心： 标签的 for 属性应当与相关元素的 id 属性相同。

表单元素

使用场景: 在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用标签控件定义下 拉列表。

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用

标签控件定义下拉列表.

语法：

选项1

选项2

选项3

...

1. 中至少包含一对 。

2. 在

中定义 selected =“ selected " 时，当前项即为默认选中项。

表单元素</p> <p>使用场景: 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签。</p> <p>在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。</p> <p>使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。</p> <p>语法：</p> <p><textarea rows="3" cols="20"></p> <p>文本内容</p> <p>

1. 通过 标签可以轻松地创建多行文本输入框。</p> <p>2. cols=“每行中的字符数” ，rows=“显示的行数”，我们在实际开发中不会使用，都是用 CSS 来改变大小。</p> <p>案例</p> <p>案例1</p> <p><!DOCTYPE html></p> <p><html lang="zh_cn"></p> <p><head></p> <p><meta charset="UTF-8"></p> <p><meta http-equiv="X-UA-Compatible" content="IE=edge"></p> <p><meta name="viewport" content="width=device-width, initial-scale=1.0"></p> <p><title>Document</title></p> <p></head></p> <p><body></p> <p><h4>青春不常在，抓紧谈恋爱</h4></p> <p><table border="1"></p> <p><tr></p> <p><td>性别：</td></p> <p><td></p> <p><input type="radio" name="sex" value="男" />男</p> <p><input type="radio" name="sex" value="女" />女</p> <p></td></p> <p></tr></p> <p><tr></p> <p><td>生日：</td></p> <p><td></p> <p><select></p> <p><option>年</option></p> <p><option>2002</option></p> <p><option>2002</option></p> <p><option>2002</option></p> <p><option>2002</option></p> <p></select></p> <p><select></p> <p><option>月</option></p> <p><option>1</option></p> <p><option>2</option></p> <p><option>3</option></p> <p></select></p> <p><select></p> <p><option>日</option></p> <p><option>1</option></p> <p><option>2</option></p> <p><option>3</option></p> <p></select></p> <p></td></p> <p></tr></p> <p><tr></p> <p><td>所在地区：</td></p> <p><td></p> <p><select></p> <p><option>北京</option></p> <p><option>上海</option></p> <p><option>天津</option></p> <p><option>西安</option></p> <p><option>成都</option></p> <p></select></p> <p></td></p> <p></tr></p> <p><tr></p> <p><td>婚姻状况：</td></p> <p><td></p> <p><input type="radio" name="sex" value="未婚" checked="checked" />未婚</p> <p><input type="radio" name="sex" value="已婚" />已婚</p> <p><input type="radio" name="sex" value="离婚" />离婚</p> <p></td></p> <p></tr></p> <p><tr></p> <p><td>喜欢类型：</td></p> <p><td></p> <p><input type="checkbox" name="hobby" value="妩媚的" />妩媚的</p> <p><input type="checkbox" name="hobby" value="可爱的" />可爱的</p> <p><input type="checkbox" name="hobby" value="小鲜肉" />小鲜肉</p> <p></td></p> <p></tr></p> <p><tr></p> <p><td>自我介绍：</td></p> <p><td></p> <p><textarea>

我同意注册条款和会员加入标准

我是会员。立即登录

我承诺

• 年满18
• 单身
• 多金

案例2：