Languages
[Edit]
EN

HTML - simple group box example

0 points
Created by:
Kevin
367

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;

<form>
  <fieldset>
    <legend>Box title</legend>

    <label for="field-1">Field 1:</label>
    <input type="text" id="field-1"><br/>

    <label for="field-2">Field 2:</label>
    <input type="text" id="field-2">
  </fieldset>
</form>

 

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>Choose the color:</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>

References

  1. <fieldset>: The Field Set element - HTML: HyperText Markup Language | MDN
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join