fieldset and legend
Used to group related choices and even sets.
fieldset and legend elements can further help group related input fields.
Example
5.13 - Form fieldset and legend elements - Example 5.13
<form method="get" action="https://cs12.net/form/submit.php">
<div>
<fieldset>
<legend>Name </legend>
<label>First Name
<input type="text" name="fname" size="30"/>
</label>
<label>Last Name
<input type="text" name="lname" size="30"/>
</label> </fieldset>
<fieldset>
<legend>Sports </legend>
<fieldset>
<legend>Do you like basketball? </legend>
<label>
<input type="radio" name="basketball" value="Y"/>
Yes </label>
<label>
<input type="radio" name="basketball" value="N"/>
No </label> </fieldset>
<fieldset>
<legend>Do you like baseball? </legend>
<label>
<input type="radio" name="baseball" value="Y"/>
Yes </label>
<label>
<input type="radio" name="baseball" value="N"/>
No </label> </fieldset> </fieldset>
<button type="submit">Submit </button>
</div>
</form>
In style
element
(<style>
) within head
element:
label { display: block; }
fieldset { margin-top: 1rem;}
button { display: block; margin-top: 1rem; padding: 0.5rem 1rem;}