w3resource

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

Go to Exercise page

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

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
YesYesYesYesYes

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.