revision:
The <fieldset> HTML element is used to group several controls as well as labels (<label>) within a web form. The <fieldset> tag draws a box around the related elements.
disabled: value : disabled;
specifies that a group of related form elements should be disabled. If this Boolean attribute is set, all form controls that are descendants of the <fieldset>, are disabled, meaning they are not editable and won't be submitted along with the <form>. They won't receive any browsing events, like mouse clicks or focus-related events. By default browsers display such controls grayed out. Note that form elements inside the <legend> element won't be disabled.
form : value: form_id;
specifies which form the fieldset belongs to.
name : value: text;
specifies a name for the fieldset.
The <legend> tag is used to define a caption for the <fieldset> element. The <legend> tag must be the first tag inside <fieldset>.
<fieldset>
<legend> . . . . . . . .</legend>
. . .
</fieldset>
code:
<form>
<fieldset>
<legend>Choose your favorite animal
<input type="radio" id="cat" name="animal">
<label for="cat">cat</label><br/>
<input type="radio" id="dog" name="animal">
<label for="dog">dog</label><
<input type="radio" id="fox" name="animal">
<label for="fox">fox</label>
</fieldset>
</form>
code:
<form>
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
coding:
<form action="#">
<fieldset disabled>
<legend>Disabled fieldset
<div>
<label for="name">name:
<input type="text" id="name" value="Chris">
</div>
<div>
<label for="pwd">Archetype:
<input type="password" id="pwd" value="Wookie">
</div>
</fieldset>
</form>
code:
<form">
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name</label>
<input name="name" id="name">
<label for="dob">Date of Birth</label>
<input name="dob" id="dob" type="date">
</fieldset>
<fieldset>
<legend>Shipping Address</legend>
<label for="add1">Address Line 1</label>
<input name="add1" id="add1">
<label for="add1">Address Line 2</label>
<input name="add2" id="add2">
<label for="city">City</label>
<input name="city" id="city">
<label for="zip">Zip / Postal Code</label>
<input name="zip" id="zip">
</fieldset>
<fieldset>
<legend>Payment Info</legend>
<label for="cc-type">Credit Card</label>
<select name="cc-type" id="cc-type">
<option value="Mastercard">Mastercard</option>
<option value="Visa">Visa</option>
<option value="Amex">American Express</option>
</select>
<label for="cc-number">CC Number</label>
<input name="cc-number" id="cc-number"> <!-- A real payment form needs more info! -->
</fieldset>
</form>
code:
<form class="wd">
<fieldset class="wd">
<legend>User basic information:</legend>
<label>first Name</label><br>
<input type="text" name="fname"><br>
<label>last Name</label><br>
<input type="text" name="lname"><br>
<label>enter email</label><br>
<input type="email" name="email"><br><br>
</fieldset><br>
<label class="tx">enter your feedback:</label><br>
<textarea class="tx" cols="30"></textarea><br><br>
<input class="tx" type="Submit"><br>
</form>
code:
<div class="spec">
<fieldset>
<legend>E-voting System </legend>
<table border="1">
<tr>
<td>First name:</td>
<td><input type="text" placeholder="First Name" required></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" placeholder="Last Name" requited></td>
</tr>
<tr>
<td>address:</td>
<td input type="text"placeholder="address"></td>
</tr>
<tr>
<td>Candidate Name:</td>
<td>
<select name="" id="">
<option>Courtois Thibaut</option>
<option value="">Hazard Eden</option>
<option value="">De Bruyne Kevin</option>
<option value="">Lukaku Romulu</option>
<option value=""></option>
</select>
</td>
</tr>
<td>Team:</td>
<td>
<select name="" id="">
<option value="">Real Madrid</option>
<option value="">Manchester City</option>
<option value="">Chelsea</option>
</select>
</td>
<tr>
<td>Sex:</td>
<td>
<input type="radio">Male
<input type="radio">Female
</td>
</tr>
</table>
<input type="submit">
</fieldset>
<style>
#fieldset_one{width: 30vw; margin: 0 auto;}
</style>
code:
<fieldset id="fieldset_two">
<legend> E-Voting System</legend>
<table border="1">
<tr><td>First Name<td><input type="text"></td></tr>
<tr><td>Last Name</td><td><input type="text"></td></tr>
<tr><td>Address</td><td><input type="text"></td></tr>
<tr>
<td> Candidate Name</td>
<td>
<select>
<option>Name1</option>
<option>Name2</option>
<option>Name3</option>
<option>Name4</option>
<option>Name5</option>
<option>Name6</option>
</select>
</td>
</tr>
<td>Party</td>
<td>
<select>
<option>Party 1</option>
<option>Party 2</option>
<option>Party 3</option>
<option>Party 4</option>
<option>Party 5</option>
<option>Party 6</option>
</select>
</td>
</tr>
<tr>
<td>Sex</td><td><input type="radio" name="e">Male<input type="radio" name="e">Female</td></tr><br><br>
</td>
</tr>
</table>
<input type="submit" value="Submit"/>
</fieldset>
<style>
#fieldset_two{width: 30vw; height: 18vw; margin: 0 auto;}
</style>
<div class="spec">
<fieldset class="one">
<input id="Oone" type="text" placeholder=" " id="family-name"
minlength="5" required/>
<label id="Otwo"for="family-name">Full name</label>
</fieldset>
</div>
<style>
.one{border: none; padding: 0; position: relative;}
.Oone { font-size: 2vw; border: none; outline: none; border-bottom: 0.2vw solid var(--grey);
padding: 2vw 0; transition: border-color 300ms;}
.one [type="text"]:focus {border-color: black;}
#Oone + #Otwo { font-size: 2vw; position: absolute; left: 0; top: 0; color: var(--grey);
pointer-events: none; transform-origin: left; transition: transform 300ms;}
#Oone:focus + #Otwo, #Oone:not(:placeholder-shown) + #Otwo { transform: scale(0.6) translateY(-40px);}
#Oone:not(:placeholder-shown):not(:focus):invalid {border-bottom: 3px solid var(--red);}
#Oone:not(:placeholder-shown):not(:focus):valid {border-bottom: 3px solid var(--green);}
</style>
<main>
<form action="login-api/">
<fieldset class="two">
<legend>Submit your data</legend>
<label for="email">enter your Gmail</label>
<input id="email" placeholder="Enter your email ending with
@gmail.com" pattern="^[a-zA-Z0-9_.+-][email protected]$" name="email"
type="email" required />
<span class="error-message">Enter a valid email ending with
@gmail.com</span>
<span class="success-message">Email correct</span>
<label for="score">Enter your test result</label>
<input id="score" placeholder="Enter number between 0 and 100"
type="number" name="score" min="65" max="100" required />
<span class="error-message">You haven't reached the minimum
score</span>
<span class="success-message">Congratulations for your excellent
score</span>
<label>Tick if you want to receive marketing spam from us
<input id="accept" name="marketing" type="checkbox"
required />
</label>
<button type="submit">Submit</button>
</fieldset>
</form>
</main>
<style>
:root {--input-border: #8b8a8b; --input-focus-h: 245; --input-focus-s: 100%; --input-focus-l: 42%;}
main {padding: 1vw;}
.two{border: none;}
legend {font-size: 1vw; font-weight: bold;}
input,button,label {display: block;}
input { width: 25vw; height: 2vw; padding: 1vw; font-size: 1vw; outline: none; border: 2px solid var(--grey);}
label {margin-top: 3vw;}
.error-message, .success-message {display: none;}
input:focus {border: 2px solid black;}
input:optional {background-color: 2px solid var(--yellow);}
.error-message {color: var(--red);}
.success-message {color: var(--blue); }
input:not(:placeholder-shown):not(:focus):valid {border: 2px solid var(--green);}
input:not(:placeholder-shown):not(:focus):invalid {border: 2px solid var(--red);}
input:not(:placeholder-shown):not(:focus):invalid + .error-message, input:not(:placeholder-shown):not(:focus):valid +
.error-message + .success-message {display: block;}
[type="checkbox"] {width: auto;}
[type="submit"] {width: 15vw; height: 3vw; margin-top: 2vw; border: none; background-color: var(--blue); cursor: pointer; }
form:invalid [type="submit"] {background-color: var(--grey); cursor: not-allowed; }
form:invalid [type="submit"]:active {pointer-events: none;}
</style>