HTML常用标签之表单标签（HTML+CSS学习笔记04）

表单标签：

（1）表单的组成：一个完整的表单通常由表单域、表单控件和提示信息3个部分构成。

①表单域：在HTML标签中，标签用于定义表单域，以实现用户信息的收集和传递。会把它范围内的表单元素信息提交给服务器。

※语法格式：

各种表单元素控件

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

※常用属性：

②表单元素：包括了input输入表单元素、select下拉表单元素、textarea文本域元素。

⭐表单元素：该标签用于收集用户的信息。

<input type="属性值" />

在该标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（可以是文本字段、复选框、单选按钮等等。）

注意：标签为单标签且type属性设置不同的属性值用来指定不同的空格类型

（常用的标签已用红色框标出）

💫name与value属性：

radio作为单选按钮也可以实现多选，name是表单元素的名字，单选按钮必须要有相同的名字name，才可以实现多选

value是默认值，规定input元素的值。两者通常都是给后台人员使用。

💫checkbox属性：规定此input元素首次加载时应当被选中。

💫maxlength属性：规定输入字段中的字符的自大长度。

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

语法（例）：

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

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

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

语法：

<select>
    <option>选项</option>
    <option>选项</option>
    <option>选项</option>
    ......
</select>


<option selected="">某某</option>

注意：

①中至少包含一对

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

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

语法：

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

注：cols=“每行中的字符数”，rows=“显示的行数”，在实际开发中一般不使用，都是用css来改变大小。