Skip to content

Instantly share code, notes, and snippets.

@prof3ssorSt3v3

prof3ssorSt3v3/fieldsets.html

Created September 20, 2020 17:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save prof3ssorSt3v3/dd67ab23b7c66a5c755ba75f4b0e1c4e to your computer and use it in GitHub Desktop.
Save prof3ssorSt3v3/dd67ab23b7c66a5c755ba75f4b0e1c4e to your computer and use it in GitHub Desktop.
Download ZIP
How to use fieldset and legend in HTML
Raw
fieldsets.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fieldsets and Legends</title>
<link
href="https://fonts.googleapis.com/css2?family=Raleway:wght@700&display=swap"
rel="stylesheet"
/>
<style>
/* Default styles */
*,
*::after,
*::before {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 20px;
line-height: 1.6;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
header {
margin: 2rem auto;
}
h1 {
padding: 0rem 2rem;
color: #333;
font-family: 'Raleway', sans-serif;
}
/* Form styles */
form {
margin: 2rem auto;
padding: 1rem;
}
.formBox {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 1rem;
margin: 2rem 0;
}
label {
font-size: 1rem;
padding: 0.2rem 0;
font-weight: 300;
color: #777;
text-align: right;
}
select,
input,
button,
option,
optgroup,
textarea {
font-size: 1rem;
font-weight: 500;
color: #555;
padding: 0.2rem 0.5rem;
margin: 0 1rem 0 0;
}
.buttons button {
grid-column-start: 2;
grid-column-end: 3;
background-color: #333;
color: #eee;
}
fieldset {
padding-left: 8rem;
margin: 1rem 0;
position: relative;
}
fieldset::before {
position: absolute;
content: '';
width: 0;
height: 0;
top: 0.4rem;
left: 0;
border-width: 1rem;
border-color: currentColor;
border-style: solid;
border-bottom-color: transparent;
border-right-color: transparent;
}
fieldset > legend {
margin-left: -6rem;
color: currentColor;
padding: 0 1rem;
font-size: 1rem;
line-height: 1;
}
.purple {
border-color: rebeccapurple;
color: rebeccapurple;
}
.blue {
border-color: cornflowerblue;
color: cornflowerblue;
}
</style>
</head>
<body>
<header><h1>Fieldsets and Legends</h1></header>
<form action="#" name="myForm">
<div class="formBox">
<label for="user_name">Username</label>
<input type="text" id="user_name" />
</div>
<fieldset class="purple">
<legend>Purple Team</legend>
<div class="formBox">
<label for="person">Famous Person</label>
<input type="text" id="person" />
</div>
<div class="formBox">
<label for="char">Favourite Character</label>
<select id="char">
<option value="rick">Rick</option>
<option value="morty">Morty</option>
<option value="summer">Summer</option>
<option value="gerry">Gerry</option>
<option value="birdman">Birdman</option>
<option value="jessica">Jessica</option>
</select>
</div>
</fieldset>
<fieldset class="blue">
<legend>Blue Team</legend>
<div class="formBox">
<label for="place">Famous Place</label>
<input type="text" id="place" />
</div>
<div class="formBox">
<label for="show">Favourite Show</label>
<select id="show">
<option value="rick-morty">Rick &amp; Morty</option>
<option value="archer">Archer</option>
<option value="bobs-burgers">Bob's Burgers</option>
<option value="Preacher">Preacher</option>
<option value="the-boys">The Boys</option>
<option value="the-expanse">The Expanse</option>
</select>
</div>
</fieldset>
<div class="formBox buttons">
<button id="btnSend">Send</button>
</div>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment