HTML 中的字段集标签

HTML 中的字段集标签可以帮助我们将某些元素、一些相关元素放在一个位置（通常是表单）中。 标签根据逻辑对相关元素进行分组。使用 fieldset 标签时，会在上面提到的相关元素周围创建一个块或边界。此标签有助于将表单部分分解为几个逻辑部分。

换句话说，

标签有助于定义布局，从而将表单组织并划分为逻辑字段，而无需使用表格或其他方式（例如划分）。 fieldset 标签有一个

。用于定义文本的标签，例如片段部分的标题。

使用

的语法是什么？元素？

使用起来其实很简单标签或元素。与所有其他 HTML 标签一样，

标签也有一个开始标签和一个结束标签。开始标签写为

结束标签在标签名称之前有通常的前斜杠，例如

。查看

的语法标签。

语法：

<form>
<fieldset>
</fieldset>
</form>

观察一个简单的代码摘录，它提供了

的示例。和<图例>下图：

<form>
<fieldset style="background:#e1eff2;">
<legend>Personal Information:</legend>
<div><label>Name:</label><input type="text"></div>
<div><label>Email:</label><input type="text"></div>
<div><label>DOB:</label><input type="text"></div>
<div><label>Place:</label><input type="text"></div>
</fieldset>
</form>

输出：

如上所述，

上面代码中使用的元素在 HTML 表单中提供分组。请注意字段集顶部的标题，它是使用

创建的。元素。

的另一个好用法和<图例>元素与输入类型“复选框”或“单选”一起使用，特别是当很难为不同选项提供集体上下文并与每个选项相关联时。

HTML 中 Fieldset 标签的属性

;元素支持许多全局属性，这些属性支持下面提到的附加属性。

1.已禁用

“disabled”属性使用“disabled”作为其值。当使用此属性时，表明使用此属性的元素组将被禁用。

下面是使用 fieldset 元素及其属性之一“disabled”的示例代码摘录。

代码：

<fieldset style="background:#e1eff2;" disabled="disabled">
<legend>Personal Information:</legend>
<div><label>Name:</label><input type="text"></div>
<div><label>Email:</label><input type="text"></div>
<div><label>DOB:</label><input type="text"></div>
<div><label>Place:</label><input type="text"></div>
</fieldset>

输出：

观察到，由于我们将“disabled”属性的值设置为“disabled”，所以所有子元素都被禁用，即不可编辑。

2.表格

‘form’属性用于包含一个或多个不同形式的标识符。它定义了我们的相关元素组将属于或所属的这些标识符。 “form”属性使用表单 ID 来定义表单。如果有多个表单标识符，则全部包含并用空格分隔。

换句话说，这是一个从 form/forms 元素的“id”属性获取值的属性，使字段集成为其组成部分，即使字段集是在表单外部定义的。

form 属性仅在 Opera 12 及更早版本中支持。

3.姓名

“name”属性定义分组项或加入一组元素的名称。该属性使用“text”作为其值。这个“名称”不会显示在浏览器中；它的使用仅限于脚本的工作。

下面是带有“name”属性的字段集示例。

代码：

<form>
<fieldset style="background:#e1eff2;" name="PersonalInformation" >
<legend>Personal Information:</legend>
<div><label>Name:</label><input type="text"></div>
<div><label>Email:</label><input type="text"></div>
<div><label>DOB:</label><input type="text"></div>
<div><label>Place:</label><input type="text"></div>
</fieldset>
<br />
<button type = "button" onclick="form.PersonalInformation.style.backgroundColor='LIGHTSALMON'"> Change background color of fieldset</button>
</form>

输出：

观察，当我们给字段集一个属性“名称”和值“个人信息”时；它不会显示在浏览器中。但是我们使用了

的 name 属性。脚本工作的背景元素。

当我们单击“更改字段集的背景颜色”按钮时，表单响应如下：

CSS 样式中的 HTML 字段集标签

像任何其他 HTML 元素一样，

元素也可以改变视觉效果。 HTML 标签或元素可以包含一个或多个属性。这些添加的属性为浏览器提供了有关元素效果的更多数据或信息。属性通常由属性名称及其分配的值组成，例如；

<strong>style="color:black";</strong>

可用于更改

的外观和感觉的属性。包括字体样式、字体系列、大小、粗细等。

Below is another example using the above-mentioned properties. CSS can do wonders. Observe the before and after-effects.

Without CSS

Code:

<form>
<fieldset style="background:#e1eff2"; name="PersonalInformation" >
<legend>Personal Information:</legend>
<div><label>Name:</label><input type="text"></div>
<div><label>Email:</label><input type="text"></div>
<div><label>DOB:</label><input type="text"></div>
<div><label>Place:</label><input type="text"></div>
</fieldset>
<br />
<button type = "button" onclick="form.PersonalInformation.style.backgroundColor='LIGHTSALMON'"> Change background color of fieldset</button>
</form>

Output:

With CSS

Code:

<form>
<fieldset style="background:#e1eff2"; name="PersonalInformation" >
<legend>Personal Information:</legend>
<div><label>Name:</label><input type="text"></div>
<div><label>Email:</label><input type="text"></div>
<div><label>DOB:</label><input type="text"></div>
<div><label>Place:</label><input type="text"></div>
</fieldset>
<br />
<button type = "button" onclick="form.PersonalInformation.style.backgroundColor='LIGHTSALMON'"> Change background color of fieldset</button>
</form>

Output:

Conclusion

The and

tags are the most underused tags while creating web forms. The

tag allows every radio or checkbox or text box grouped together to be labeled as a whole while also being separately labeled. The

and

elements are helpful when assisting technology like JAWS is being used. It’s known that many screen readers read legend text first and then the label texts.

以上是HTML 中的字段集标签的详细内容。更多信息请关注PHP中文网其他相关文章！