webdevlinux - logo Web Dev Linux

Fieldset & legend

In this chapter, you will understand how to group contents of an HTML form with the fieldset element.

HTML fieldset legend Fieldset & Legend

Try the example below.

FILE : fieldset.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Fieldset</title>
</head>
<body>
<form>
<fieldset>
<legend>Login Form</legend>
Username : <input><br>
Password : <input type="password"><br>
<input type="submit"><input type="reset">
</fieldset>
</form>
</body>
</html>

Explanation

Take a look at the explanation of elements used in the example.

<fieldset></fieldset>
The fieldset element representsĀ a group inside the form
<legend></legend>
The legend element is used as a child element of fieldset. This represents the caption of the group (fieldset).