Balise Fieldset en HTML

Une balise fieldset en HTML est quelque chose qui nous aide à rassembler certains éléments, certains éléments liés ensemble au même endroit, normalement un formulaire. Le champ

la balise regroupe nos éléments associés en fonction de la logique. La balise fieldset, lorsqu'elle est utilisée, crée un bloc ou une limite autour de nos éléments associés mentionnés ci-dessus. Cette balise permet de diviser les sections du formulaire en plusieurs sections logiques.

En d’autres termes, le champ

La balise aide à définir une mise en page, organisant et divisant ainsi un formulaire en champs logiques sans utiliser de tableaux ou d'autres moyens tels que des divisions. La balise fieldset a une balise

balise utilisée pour définir un texte, comme une légende pour la section fragmentée.

Quelle est la syntaxe d'utilisation de

Élément ?

C'est en fait simple à utiliser pour

balise ou élément. Comme pour toutes les autres balises HTML, la balise

La balise a également une balise d'ouverture et une balise de fermeture. La balise d'ouverture est écrite sous la forme

et la balise de fermeture comporte la barre oblique habituelle avant le nom de la balise, telle que

. Consultez la syntaxe du

étiquette.

Syntaxe :

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

Observez un extrait de code simple fournissant un exemple de

et ci-dessous :

<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>

Sortie :

Comme indiqué ci-dessus, le paramètre

L'élément utilisé dans le code ci-dessus fournit un regroupement sous la forme HTML. Notez la légende en haut de l'ensemble de champs, créée à l'aide de

élément.

Une autre bonne utilisation de

et L'élément est associé au type d'entrée « cases à cocher » ou « radio », surtout lorsqu'il devient difficile de fournir un contexte collectif pour les différentes options et est associé à chacune d'elles.

Attributs de la balise Fieldset en HTML

Le

L'élément prend en charge de nombreux attributs globaux qui prennent en charge les attributs supplémentaires mentionnés ci-dessous.

1. handicapé

L'attribut « désactivé » utilise « désactivé » comme valeur. Lorsque cet attribut est utilisé, cela indique que le groupe d'éléments pour lequel cet attribut est utilisé doit être désactivé.

Vous trouverez ci-dessous un exemple d'extrait de code utilisant l'élément Fieldset avec l'un de ses attributs, « disabled ».

Code :

<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>

Sortie :

Observez que puisque nous définissons la valeur de l'attribut « désactivé » sur « désactivé », tous les éléments enfants sont désactivés, c'est-à-dire non modifiables.

2. formulaire

L'attribut 'form' est utilisé pour inclure un ou plusieurs identifiants de différents formulaires. Il définit ces identifiants auxquels notre groupe d'éléments liés appartiendra ou auquel appartiendra. L'attribut 'form' utilise les identifiants de formulaire pour définir les formulaires. S'il existe plusieurs identifiants de formulaire, ils sont tous inclus et séparés par des espaces.

En d'autres termes, il s'agit d'un attribut qui prend sa valeur de l'attribut 'id' des éléments form/forms pour que les champs soient leurs parties, même lorsque le champs est défini en dehors du formulaire.

L'attribut form n'est pris en charge que dans Opera 12 et les versions antérieures.

3. nom

L'attribut 'name' définit un nom pour les éléments regroupés ou rejoint un groupe d'éléments. Cet attribut utilise « texte » comme valeur. Ce « nom » ne s’affiche pas dans le navigateur ; son utilisation est limitée au travail des scripts.

Vous trouverez ci-dessous un exemple d'ensemble de champs avec un attribut « nom ».

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>

Sortie :

Observez, alors que nous avons donné à notre ensemble de champs un attribut, un « nom » et une valeur comme « Informations personnelles » ; Il ne s'affiche pas dans le navigateur. Mais nous avons utilisé l'attribut name de l'attribut

élément en arrière-plan pour le travail de script.

Quand on clique sur le bouton disant « Changer la couleur d'arrière-plan du jeu de champs », le formulaire répond comme suit :

Balise HTML Fieldset dans le style CSS

Comme tout autre élément HTML,

L’élément peut également être modifié pour des effets visuels. Les balises ou éléments HTML peuvent contenir une ou plusieurs propriétés. Ces attributs ou propriétés ajoutés fournissent aux navigateurs plus de données ou d’informations sur les effets des éléments. Les attributs sont généralement constitués d'un nom de propriété et de sa valeur attribuée, par exemple ;

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

Les propriétés qui peuvent être utilisées pour modifier l'apparence et la convivialité du

inclure les styles de police, les familles de polices, la taille, le poids, entre autres.

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!