> For the complete documentation index, see [llms.txt](https://web-dev-guide.wishtack.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://web-dev-guide.wishtack.io/forms/form-elements.md).

# Form elements

## `<fieldset>`, `<legend>` and `<label>`

```markup
<form>
    <fieldset>
      
        <legend>Book</legend>

        <div>
            <label for="title">Title</label>
            <input id="title" placeholder="title"     type="text">
        </div>

        <div>
            <label for="author-name">Author</label>
            <input id="author-name" placeholder="author"     type="text">
        </div>
      
    </fieldset>
</form>
```

<https://codepen.io/younes-jaaidi/pen/RYQMEM>

{% embed url="<https://codepen.io/younes-jaaidi/pen/RYQMEM>" %}

## `<datalist>`

```markup
<form>

    <datalist id="dataList">
        <option value="foo@bar.com" label="John Doe"></option>
        <option value="contact@wishtack.com" label="Wishtack"></option>
    </datalist>

    <input list="dataList" type="email">

</form>
```

<https://codepen.io/younes-jaaidi/pen/RYQMvM>

{% embed url="<https://codepen.io/younes-jaaidi/pen/RYQMvM>" %}