HTML5

HTML5 Fieldset Example

The aim of this example is to present you to tha fieldset tag of HTML.

The fieldset is used to group similar and related elements, it draws a line box around the content inside. It is supported by all browsers.

It will be necessary whenever you need to gather elements for example of the same type like inputs, or just normal organised text list.

Let us first look at the basics, that is, main application, default styling and available html attributes and then see it more specifically in an example.

You do not need any extra files to download before we start.
 

1. Basic Setup & Application

Start with these two essential steps to get this going.

1.1 Basic Setup

Go ahead and create a new html file inside your project folder with its basic syntax:

<!DOCTYPE html>
<html>
<head>
	<title>HTML5 Fieldset Example</title>
</head>
<body>

<!-- STYLE SECTION -->

<style type="text/css">

</style>

<!-- HTML SECTION -->

</body>
</html>

1.2 Basic Application

So, create a fieldset tag (open and close it) and add some text inside like so:

<!-- HTML SECTION  -->

<fieldset>This is a fieldset</fieldset>

This is how a fieldset looks like, for now.

Fieldset Besic Application
Fieldset Besic Application

2. Attributes, Default Styling and Adding Elements

In this section we will see how this element can be used.

2.1 Attributes

There are three main attributes you can give to the fieldset element in html:

1. disabled – indicates an inactive/non-editable view of the element/s inside

	<fieldset disabled = "disabled">

2. form – specifies one or more forms the fieldset belongs to

	<fieldset form= "form_id">

3. name – gives the fieldset a name (to be referred in other applications)

	<fieldset name= "inputs">

Do notice that all these elements are new attributes that were announced with HTML version 5.

2.2 Default Styling

Remember the element from the basic example had a line wrapping the box. This is because of this default styling:

fieldset { 
    display: block;
    margin-left: 2px;
    margin-right: 2px;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border: 2px groove (internal value);
}

But we will change this, and maybe convert it into a modern-looking content wrapper.

2.3 Adding Elements inside the Fieldset

You can add various elements inside a fieldset, like lists, inputs, paragraphs etc. Lets begin adding a legend.

A legend will show as a text on top of the fieldset and will interrupt the wrapping line in its place. Take a look:

<!-- HTML SECTION  -->
<fieldset>
	<legend>I am a legend here.</legend>
	<p>I am a random paragraph text :(</p>
</fieldset>

Legend and Paragraph inside the Fieldset
Legend and Paragraph inside the Fieldset

I added a fixed width of 30em to the fieldset for better viewing the whole element.

Now let’s see an example where we add inputs inside the fieldset, take a look at the code below:

<!-- HTML SECTION  -->
<fieldset>
	<legend>Question 1</legend>
	<p>Who is the CEO of the famous Unknown social network?</p>
	<input type="radio" name="foo">Jack <br/>
	<input type="radio" name="foo">Ella <br/>
	<input type="radio" name="foo">Miller <br/>
	<input type="radio" name="foo">Ilias <br/>
	<br>
	<input type="submit">
</fieldset>

We added a legend indicating this is the first question, a paragraph conatining the question and four radio buttons representing answers. Also we added a submit button at the bottom of the fieldset.

Fieldset with various Elements inside
Fieldset with various Elements inside

Well, now you know what is most important about the fieldset. The next part is just some styling.

3. Stlyling the Fieldset

There is not too much to style in a fieldset that is different to normal box elements you create.

One of the styling I like for a fieldset would be:

<!-- STYLE  SECTION -->

  <style type="text/css">

  fieldset {
  	font-family: "Montserrat", "sans-serif"; /* just a custom font */
  	width: 30em;							/* fixed width for the box */
  	border-radius: 0.5em;					/* applied border radius */
  	border: 0.1em solid #ccc;				/* custom border style */
  	background-color: #fffde1;				/* added a background color */
  	box-shadow: 0.08em 0.05em 0.08em #ccc;	/* added a soft box shadow */
  }

  </style>

The nice plain view would be:

A Simple Fieldset Styling
A Simple Fieldset Styling

Well, that’s all you need to know about styling, no extraordinary styling is applied to these kind of elements.

You can easily create forms with fieldsets inside to organize your information. Look at the code below for example:

<!-- HTML SECTION  -->
<form>
<h3>STEP 1</h3>
<fieldset>
	<legend>Choose two friends.</legend>
	<p>Who is the CEO of the famous Unknown social network?</p>
	<input type="radio" name="foo">Jack <br/>
	<input type="radio" name="foo">Ella <br/>
	<input type="radio" name="foo">Miller <br/>
	<input type="radio" name="foo">Ilias <br/>
</fieldset>

<h3>STEP 2</h3>

	<fieldset>
		<legend>Personal Details</legend><br/>
		<label for=name>Name</label>
		<input name="name" placeholder="Your Name" type="text"><br/>
		<label for=email>Email</label>
		<input name="email" placeholder="Your E-Mail" type="text"><br/>
		<label for=address>Address</label><br/>
		<textarea name="address" placeholder="Your Address" type="text"></textarea><br/>
	</fieldset>

	<h3>STEP 3</h3>

	<fieldset>
	<legend>Destinations</legend>
	<p>Where would you like to travel?</p>
	<input type="checkbox" name="foo">Brasil <br/>
	<input type="checkbox" name="foo">New York <br/>
	<input type="checkbox" name="foo">Sydney <br/>
	<input type="checkbox" name="foo">Miami <br/>
</fieldset>
<br>
<input type="submit">
</form>

With a few lines of CSS:

<!-- STYLE  SECTION -->

<style type="text/css">

fieldset {
	font-family: "Montserrat", "sans-serif"; /* just a custom font */
	width: 30em;							/* fixed width for the box */
	border-radius: 0.5em;					/* applied border radius */
	border: 0.1em solid #ccc;				/* custom border style */
	background-color: #fffde1;				/* added a background color */
	box-shadow: 0.08em 0.05em 0.08em #ccc;	/* added a soft box shadow */
	margin-bottom: 2em;
}

form {
	font-family: "Montserrat", "sans-serif";
	border: 0.1em solid #ccc;
	border-radius: 0.5em;
	width: 33em;
	background-color: #f3f3f3;
	padding: 2em;
}

input {
	margin-bottom: 1em;
}

textarea {
	width: 20em;
	height: 5em;
}

</style>

In this example I added three fieldsets each with its own type of information inside.

Form with Fieldsets Inside
Form with Fieldsets Inside

4. Conclusion

To conclude, we can say that using fieldsets allow you to mark up your data in the most semantic way available.

Consider that placing your fields in a fieldset is more descriptive than placing your fields in a div.

The div tells you nothing about the relationship between the fields, a fieldset tells you there is a relationship.

5. Download

Download
You can download the full source code of this example here: HTML5 Fieldset Example

Fabio Cimo

Fabio is a passionate student in web tehnologies including front-end (HTML/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Back to top button