3.3 表单域

表单域是一个包含表单元素的区域。
在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。
<form>会把它范围内的表单元素信息提交给服务器。

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

常用属性：

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

3.4 表单控件（表单元素）

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

1. input输入表单元素
2. select下拉表单元素
3. texterea文本域元素

3.4.2 <label>标签

<label>标签为input元素定义标注（标签）。
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。

<label for="sex">男</label>
       <input type="radio" name="sex" id="sex">

注：<label>标签for对应的是相关元素的id属性。

3.4.3 <select>表单元素

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

 <select>
       <option>选项1</option>
       <option>选项2</option>
       <option selected="selected">选项3</option>
       ...
   </select>

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

3.4.4 <textarea>表单元素

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

<textarea cols="20" rows="3">
     多行文本内容
   </textarea>

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

常用CSS属性

1. 取消表单轮廓

表单在点击之后常常会出现一圈轮廓，用下列CSS属性去除。

input, textarea{
            outline: none;
        }

2. 防止拖拽文本域

在<textarea>文本域标签当中，可以通过右下角标志实现拖拽放大，通常情况下我们并不想用户使用这个效果，通过以下属性禁用：

textarea{
            resize:none;
        }