<学习html>第六天笔记-表单标签（input控件、label标签）

（十一）表单标签

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

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

（表单域是指一个很大的表单区域，里面包含了表单控件和提示信息。）

1、input控件

在上面的语句中

<input />

是一个单标签，type属性是其最基本的属性，

<input />

标签还可以定义其他很多的属性，其常用属性如下图表：



input控件的常用属性图表

语法格式：提示语：

<input type="属性值"  />

*（1）单选按钮和复选按钮

单选按钮：例：

性别：

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

*注：如果是一组，我们通过相同的name值来实现。

单选按钮（可以同时选择多个）：例：

爱好：

<input type="checkbox" name="hobby"/>足球 <input type="checkbox" name="hobby"/>篮球.......

*（2）默认选中的表单属性

checked=”checked”

例：“爱好默认选择足球”

爱好：

<input type="checkbox" name="hobby" checked="checked" />足球

*（3）按钮组

①普通按钮

搜索：

<input type="button" value="搜索" />

②提交按钮

<input type="submit" />

③重置按钮

<input type="reset" value="重置表单" />

④图像按钮

<input type="image" src="...." />

⑤文件域

<input type="file" />

input控件实例代码图



input控件实例效果图

*（4）最多字符数和文本值

①最多字符数 maxlength

例：“密码框最多能输入6位数”

<input type="password" maxlength="6" />

②input控件中的默认文本值 value

例：“文本框中默认文本为‘用户名’”

<input type="text" value="用户名" />

2、label标签

label标签为input元素定义标注

作用：用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点。

使用label标签的方法：

①直接用label标签对input进行包裹：

<label> 输入账号：<input type="text" /> </label>

②如果label里面有多个表单，想定位到某一个，就通过for id的格式来进行：

<label for="two"> 输入账号：<input type="text" /> <input type="text" id="two" /> </label>

label标签实例代码图



label标签实例效果图