HTML5: How to define a caption for a fieldset element?

Last update on February 10 2024 11:42:00 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html>
<head>
<meta charset="utf-8"><!-- Specifies the character encoding for the document -->
<title>How to define a caption for a fieldset element</title><!-- Sets the title of the document -->
</head>
<body>
<form><!-- Begins a form element -->
<fieldset><!-- Begins a fieldset element -->
<legend>Cariculam-vita:</legend><!-- Defines a caption for the fieldset -->
  Name:     <input type="text"><br><!-- Creates a text input field for entering the name -->
  Address:  <input type="text"><br><!-- Creates a text input field for entering the address -->
  Phone No: <input type="text"><br><!-- Creates a text input field for entering the phone number -->
  Email:    <input type="text"><!-- Creates a text input field for entering the email -->
</fieldset><!-- Ends the fieldset element -->
</form><!-- Ends the form element -->
</body>
</html>

Explanation:

The HTML document starts with a declaration of its type and version (<!DOCTYPE html>).
The <html> element encloses the entire HTML document.
The <head> section contains metadata about the document, including the character encoding (<meta charset="utf-8">) and the title of the document (<title>).
Inside the <body> section, there's a <form> element, which creates a form for user input.
Within the form, there's a <fieldset> element, which groups related form elements together.
The <legend> element within the fieldset defines a caption for the fieldset, in this case, "Cariculam-vita:".
Inside the fieldset, there are four text input fields for entering the name, address, phone number, and email.
Each input field is created using the <input> element with a type attribute set to "text".
The <br> elements are used to add line breaks between the input fields for better visual presentation.
Finally, the </fieldset> and </form> tags close the fieldset and form elements, respectively, properly ending them.

Live Demo :

See the Pen legend-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page