Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to achieve <fieldset> like effect without using <fieldset> tag?
Due to the simplicity of identifying comparable data fields, forms are used to aggregate data for simpler understanding by all users and clients. Additionally, by knowing each group individually rather than attempting to grasp the full form at once, users are better able to focus on smaller, more clearly defined groups.
By default, the related form data fields are grouped together using the <fieldset> and <legend> elements. Before we jump into the article, let’s have a quick view of the <fieldset> tag in HTML.
HTML <fieldset> tag
The HTML <fieldset> tag is used for grouping related form elements. By using the fieldset tag and the legend tag, you can make your forms much easier to understand for your users.
Syntax
Following is the syntax for HTML <fieldset> tag
<fieldset>.....</fieldset>
Now let’s dive into the article to create a <fieldset> effect without using the <fieldset> tag.
Alternative for <fieldset> tag
To produce a similar grouping effect, <div> element can be used as an HTML alternative to the <fieldset> tag when combined with the necessary CSS styling. Although <fieldset> is a semantic element created expressly for grouping form elements, employing <div> elements with customized styling might provide you greater design and layout options.
Example
Let’s look at the following example, where we are going to create a fieldset-like effect using the <div> element and CSS.
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial-field {
border: 1px solid #DE3163;
border-top: none;
margin: 20px 1px;
padding: 6px;
}
.tutorial-field h1 {
font: 19px verdana;
margin: -15px -5px 0;
}
.tutorial-field h1 span {
float: left;
}
.tutorial-field h1:before {
border-top: 1px solid #DE3163;
content: ' ';
float: left;
margin: 9px 3px 0 -1px;
width: 16px;
}
.tutorial-field h1:after {
border-top: 1px solid #DE3163;
content: ' ';
display: block;
height: 24px;
left: 3px;
margin: 0 1px 0 0;
overflow: hidden;
position: relative;
top: 9px;
}
</style>
</head>
<body style="background-color:#D5F5E3 ">
<div class="tutorial-field">
<h1>
<span> Basic Details : </span>
</h1>
<div>
<label for="name">Surname:</label>
<br>
<input type="text" name="name">
</div>
<br>
<div>
<label for="name"> Name: </label>
<br>
<input type="text" name="name">
</div>
<br>
<div>
<label for="gender">Gender:</label>
<br>
<input type="radio" name="Gender" value="male">Male <input type="radio" name="Gender" value="female">Female
</div>
</div>
</body>
</html>
When we run the above code, it will generate an output consisting of the fieldset-like effect displayed on the webpage, achieved by using the <div> and CSS.
162 Views
