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>