CSS fieldset
CSS fieldset
In HTML, the <fieldset> element is used to group related form elements together, and the <legend> element can be used to represent the form. The fieldset element adds a title. In CSS, we can customize the appearance of the fieldset element through stylesheets to make the form more aesthetically pleasing and easier to read.
1. Basic Fieldset Styles
First, let’s look at how to style the fieldset element. We can set the fieldset’s border style, border radius, background color, and more. Here is a simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Fieldset Example</title>
<style>
fieldset {
border: 2px solid #333;
border-radius: 10px;
padding: 20px;
background-color: #f9f9f9;
}
legend {
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone"><br><br>
</fieldset>
</body>
</html>
In the example above, we define a fieldset element and set the border style, corner radius, padding, and background color. We also use the <legend> element to give the fieldset a title, “Personal Information.”
Running the above code will show a fieldset with a title and several form elements. The fieldset element groups these form elements together and displays them as a rectangular area.
2. Fieldset Border Style
In a fieldset, we can control the border style, color, and width. Here’s an example showing how to customize the border of a fieldset:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Fieldset Border Example</title>
<style>
fieldset {
border: 5px dashed #ff0000;
border-radius: 10px;
padding: 20px;
background-color: #f9f9f9;
}
legend {
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<fieldset>
<legend>Shipping Information</legend>
<label for="address">Address:</label>
<input type="text" id="address" name="address"><br><br>
<label for="city">City:</label>
<input type="text" id="city" name="city"><br><br>
<label for="zip">Zip Code:</label>
<input type="text" id="zip" name="zip"><br><br>
</fieldset>
</body>
</html>
In the above example, we would use the fieldset Set the border style to a dashed border and the border color to red. Running the above code will show a fieldset with a red dashed border.
3. Fieldset Margins and Padding
We can also use CSS to control the padding and inside margins of a fieldset, as well as the padding of its content area. Here’s an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Fieldset Margin and Padding Example</title>
<style>
fieldset {
border: 2px solid #333;
border-radius: 10px;
padding: 20px;
margin: 20px;
background-color: #f9f9f9;
}
legend {
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<fieldset>
<legend>Payment Information</legend>
<label for="card">Credit Card Number:</label>
<input type="text" id="card" name="card"><br><br>
<label for="expiry">Expiry Date:</label>
<input type="text" id="expiry" name="expiry"><br><br>
<label for="cvv">CVV:</label>
<input type="text" id="cvv" name="cvv"><br><br>
</fieldset>
</body>
</html>
In the example above, we set the padding, margin, and padding of the fieldset. Run the code and you’ll see a fieldset with margins and padding.
Conclusion
In this article, we explored how to customize the appearance of the fieldset element using CSS. By setting border styles, margins, and padding, we can make our forms more attractive and easier to read.