HTML5: How to groups related elements in a form?

Last update on February 08 2024 12:47:59 (UTC/GMT +8 hours)

Solution:

HTML Code :

<!DOCTYPE html><!-- Document type declaration for HTML5 -->
<html><!-- Start of HTML document -->
<head><!-- Start of head section -->
<meta charset="utf-8"><!-- Metadata for specifying character encoding -->
<title>How to group related elements in a form</title><!-- Title of the HTML document -->
</head><!-- End of head section -->
<body><!-- Start of body section -->
<form><!-- Start of form -->
<fieldset><!-- Start of fieldset to group related form elements -->
   Name: <input type="text" size="30" /><br /><br /><!-- Input field for name -->
   Email: <input type="text" size="30" /><br /><br /><!-- Input field for email -->
   Place: <input type="text" size="10" /><br /><br /><!-- Input field for place -->
</fieldset><!-- End of fieldset -->
</form><!-- End of form -->
</body><!-- End of body section -->
</html><!-- End of HTML document -->

Explanation:

The document starts with the doctype declaration specifying that it is an HTML5 document.
Inside the <html> tags, the HTML document structure begins.
The <head> section contains metadata about the document, including the character encoding specified using the meta tag and the title of the document.
The <body> section is where the visible content of the webpage resides.
A <form> element is used to create a form.
Inside the form, a <fieldset> element is used to group related form elements together.
Within the fieldset, there are input fields for Name, Email, and Place.
Each input field is defined with an <input> element with its respective type attribute set to "text" and size attribute set to control the width of the input field.
<br> tags are used for line breaks to create space between the form elements.
The HTML document ends with the closing </html> tag.

Live Demo:

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page