6.jpg 0
前端程序猿

专注于前端的程序猿

2022-04-13

html笔记08-fieldset/label元素-02

2022-04-15 0 27 web前端社区

6.jpg 0 前端程序猿

fieldset,legend

<fieldset>标签是一个块级容器标签,表示控件的集合,用于将一组相关控件组合成一组。

  1. <form>
  2. <fieldset>
  3. <p>年龄:<input type="text" name="age"></p>
  4. <p>性别:<input type="text" name="gender"></p>
  5. </fieldset>
  6. </form>

上面代码中,两个输入框是一组,它们的外面会显示一个方框。

<fieldset>有以下属性。

  • disabled:布尔属性,一旦设置会使得<fieldset>内部包含的控件都不可用,都变成灰色状态。
  • form:指定控件组所属的<form>,它的值等于<form>id属性。
  • name:该控件组的名称。

<legend>标签用来设置<fieldset>控件组的标题,通常是<fieldset>内部的第一个元素,会嵌入显示在控件组的上边框里面。

  1. <fieldset>
  2. <legend>学生情况登记</legend>
  3. <p>年龄:<input type="text" name="age"></p>
  4. <p>性别:<input type="text" name="gender"></p>
  5. </fieldset>

上面代码中,这个控件组的标题会,嵌入显示在<fieldset>的上边框。

label

<label>标签是一个行内元素,提供控件的文字说明,帮助用户理解控件的目的。

  1. <label for="user">用户名:</label>
  2. <input type="text" name="user" id="user">

上面代码中,输入框前面会有文字说明“用户名:”。

<label>的一大优势是增加了控件的可用性。有些控件比较小(比如单选框),不容易点击,那么点击对应的<label>标签,也能选中该控件。点击<label>,就相当于控件本身的click事件。

<label>for属性关联相对应的控件,它的值是对应控件的id属性。所以,控件最好设置id属性。

控件也可以放在<label>之中,这时不需要for属性和id属性。

  1. <label>用户名:
  2. <input type="text" name="user">
  3. </label>

<label>的属性如下。

  • for:关联控件的id属性。
  • form:关联表单的id属性。设置了该属性后,<label>可以放置在页面的任何位置,否则只能放在<form>内部。

一个控件可以有多个关联的<label>标签。

  1. <label for="username">用户名:</label>
  2. <input type="text" id="username" name="username">
  3. <label for="username"><abbr title="required">*</abbr></label>

上面代码中,<input>有两个关联的<label>

0

Copyright (C) 2021-2026 98社区 All Rights Reserved 蜀ICP备20012692号-3