EN
HTML - simple group box example
3
points
In this article, we would like to show you how to create a simple group box using the fieldset element in HTML.
Quick solution:
// ONLINE-RUNNER:browser;
<fieldset>
<legend>Box title</legend>
<!-- Put HTML element here ... -->
</fieldset>
Practical example
In this example, we create a simple group box using the fieldset
element. Inside the group box, we use legend
element to specify the box title and we put in some inputs (wrapped with label
elements, so we don't need to use id
-for
attributes relation).
Runnable example:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<form>
<fieldset>
<legend>Color chooser</legend>
<label>
<input type="radio" name="color" />
<span>Red</span>
</label>
<br />
<label>
<input type="radio" name="color" />
<span>Green</span>
</label>
<br />
<label>
<input type="radio" name="color" />
<span>Blue</span>
</label>
</fieldset>
</form>
</body>
</html>