HTML03

表单标签

使用表单目的是为了收集用户信息。

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

在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成

<form> 标签用于定义表单域，以实现用户信息的收集和传递。

<form> 会把它范围内的表单元素信息提交给服务器.

各种表单元素控件

</form>

而在表单元素中标签用于收集用户信息。

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

<input /> 标签为单标签

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

1. name 和value 是每个表单元素都有的属性值,主要给后台人员使用.

2. name 表单元素的名字, 要求单选按钮和复选框要有相同的name值. （同名不同值）

3. checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.

4. maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.

想刚打开页面就默认显示几个文字怎么做?

用户名:

何区别不同的表单元素

用户名: <input type="text" value="请输入用户名" name="username" />

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

性别:

<input type="radio" name="sex" value="男" checked="checked" />男

<input type="radio" name="sex" value="女" />女

label标签

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

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

语法：

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

select表单元素

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

...

</select>

1. <select> 中至少包含一对<option> 。

2. 在<option> 中定义 selected =“ selected " 时，当前项即为默认选中项。

textarea标签

3.当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用标签。

在表单元素中，标签是用于定义多行文本输入的控件。

使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

文本内容

</textarea>

4. 通过 <textarea> 标签可以轻松地创建多行文本输入框。

5. cols=“每行中的字符数” ，rows=“显示的行数”，我们在实际开发中不会使用，都是用 CSS 来改变大小。