Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to achieve like effect without using tag?
The fieldset element in HTML is primarily used to group related form elements together with a visual border and optional legend. However, there are situations where you might want to achieve a similar grouping effect without using the actual <fieldset> tag, such as for greater design flexibility or when working with non-form content.
Forms benefit from grouping related data fields because it makes comparable information easier to identify and understand. Users can focus on smaller, clearly defined groups rather than attempting to process an entire form at once, improving overall usability and user experience.
HTML <fieldset> Tag Overview
The HTML <fieldset> tag is a semantic element specifically designed for grouping related form elements. When combined with the <legend> tag, it creates a bordered container with a descriptive title that makes forms much easier to understand for users.
Syntax
Following is the basic syntax for the HTML <fieldset> tag
<fieldset> <legend>Group Title</legend> <!-- form elements here --> </fieldset>
Alternative Approaches to <fieldset>
To create a similar grouping effect without using the <fieldset> tag, you can use <div> elements combined with CSS styling. While <fieldset> is semantic and purpose-built for form grouping, using <div> elements with custom styling provides greater design flexibility and layout control.
Using Div with Border Styling
Following example demonstrates creating a fieldset-like effect using a <div> element with CSS border styling
<!DOCTYPE html>
<html>
<head>
<title>Fieldset Effect with Div</title>
<style>
.fieldset-like {
border: 2px solid #007bff;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
background-color: #f8f9fa;
}
.legend-like {
background-color: #007bff;
color: white;
padding: 8px 15px;
border-radius: 4px;
margin: -30px 0 15px 0;
display: inline-block;
font-weight: bold;
}
.form-group {
margin: 10px 0;
}
label {
display: inline-block;
width: 120px;
font-weight: bold;
}
input[type="text"], input[type="email"] {
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div class="fieldset-like">
<div class="legend-like">Personal Information</div>
<div class="form-group">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName">
</div>
<div class="form-group">
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</div>
</div>
</body>
</html>
The output displays a form section with a blue border, rounded corners, and a colored title bar that mimics the fieldset appearance
Personal Information (blue background title) ??????????????????????????????????????? ? First Name: [input field] ? ? Last Name: [input field] ? ? Email: [input field] ? ???????????????????????????????????????
Using Advanced CSS with Legend Effect
Following example creates a more sophisticated fieldset effect with a legend that appears to cut through the border
<!DOCTYPE html>
<html>
<head>
<title>Advanced Fieldset Effect</title>
<style>
.custom-fieldset {
border: 2px solid #28a745;
border-top: none;
margin: 30px 20px;
padding: 20px;
position: relative;
background-color: #f9f9f9;
}
.custom-legend {
background-color: white;
padding: 5px 15px;
font-size: 18px;
font-weight: bold;
color: #28a745;
position: absolute;
top: -12px;
left: 15px;
}
.custom-legend::before {
content: '';
position: absolute;
top: 50%;
left: -20px;
width: 20px;
height: 2px;
background-color: #28a745;
}
.custom-legend::after {
content: '';
position: absolute;
top: 50%;
right: -20px;
width: 100px;
height: 2px;
background-color: #28a745;
}
.input-row {
margin: 15px 0;
}
.input-row label {
display: inline-block;
width: 100px;
font-weight: bold;
}
.input-row input {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
width: 200px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div class="custom-fieldset">
<div class="custom-legend">Contact Details</div>
<div class="input-row">
<label for="phone">Phone:</label>
<input type="text" id="phone" name="phone">
</div>
<div class="input-row">
<label for="address">Address:</label>
<input type="text" id="address" name="address">
</div>
<div class="input-row">
<label for="city">City:</label>
<input type="text" id="city" name="city">
</div>
</div>
</body>
</html>
This creates a fieldset-like appearance where the legend appears to break through the top border, similar to the native <fieldset> behavior
??????? Contact Details ??????????? ? ? ? Phone: [input field] ? ? Address: [input field] ? ? City: [input field] ? ? ? ???????????????????????????????????
Using Box Shadow for Modern Effect
Following example uses modern CSS techniques with shadows and gradients for a contemporary fieldset alternative
<!DOCTYPE html>
<html>
<head>
<title>Modern Fieldset Effect</title>
<style>
.modern-fieldset {
background: linear-gradient(145deg, #ffffff, #f0f0f0);
border: none;
border-radius: 12px;
box-shadow: 5px 5px 10px #d1d1d1, -5px -5px 10px #ffffff;
padding: 25px;
margin: 20px;
position: relative;
}
.modern-legend {
background: linear-gradient(145deg, #667eea, #764ba2);
color: white;
padding: 10px 20px;
border-radius: 25px;
font-weight: bold;
text-align: center;
margin: -35px auto 20px;
width: 200px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
.field-group {
margin: 15px 0;
}
.field-group label {
display: block;
font-weight: bold;
margin-bottom: 5px;
color: #333;
}
.field-group input, .field-group select {
width: 100%;
padding: 12px;
border: none;
border-radius: 8px;
background-color: rgba(255,255,255,0.8);
box-shadow: inset 2px 2px 5px #d1d1d1, inset -2px -2px 5px #ffffff;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; background-color: #f5f5f5;">
<div class="modern-fieldset">
<div class="modern-legend">User Preferences</div>
<div class="field-group">
<label for="theme">Theme:</label>
<select id="theme" name="theme">
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</div>
<div class="field-group">
<label for="language">Language:</label>
<input type="text" id="language" name="language" value="English">
</div>
<div class="field-group">
<label for="timezone">Timezone:</label>
<input type="text" id="timezone" name="timezone" value="UTC+00:00">
</div>
</div>
</body>
</html>
This creates a modern, neumorphic-style grouping effect with soft shadows and gradient backgrounds that provides an elegant alternative to traditional fieldset styling.
User Preferences
???????????????????????????????????
? Theme: [Light ?] ?
? Language: [English] ?
? Timezone: [UTC+00:00] ?
???????????????????????????????????
(with soft shadows and modern styling)
Comparison of Approaches
Following table compares different methods to achieve fieldset-like effects
| Method | Advantages | Best Use Case |
|---|---|---|
| Native <fieldset> | Semantic, accessible, browser support | Standard form grouping |
| Div with Border | Simple implementation, good browser support | Basic visual grouping |
| Advanced CSS Legend | Mimics native fieldset closely | Custom styling with traditional look |
| Modern Box Shadow | Contemporary design, visually appealing | Modern web applications |
Conclusion
While the native <fieldset> tag remains the best semantic choice for form grouping, CSS-styled <div> elements offer greater design flexibility when you need custom styling or are working with non-form content. Choose the approach that best fits your design requirements and accessibility needs.
654 Views
