Form Components

Form Example

<form action="" method="post">
    <fieldset>

        <legend>Title</legend>

        <input type="radio" id="radio">
        <label for="radio">Click me</label>

        <label for="radio">
            <input type="radio" id="radio">Click me
        </label>

    </fieldset>
</form>

Text

<input type="text" placeholder="text" />

Text with Label

<label>First Name:
    <input type="text" placeholder="Agent" />
</label>

Email

<input type="email" placeholder="email" />

Search

<input type="search" placeholder="search" />

Radio

<label><input type="radio" />Option 1</label>

Checkbox

<label><input type="checkbox" />Option 1</label>

URL

<input type="url" placeholder="url" />

Number

<input type="number" placeholder="42" />

Tel

<input type="tel" placeholder="01823" />

Color

<input type="color" />

Range

<input type="range" />

Time

<input type="time" />

Date

<input type="date" />

Month

<input type="month" />

Week

<input type="week" />

Datetime

<input type="datetime" />

Datetime Local

<input type="datetime-local" />

Textarea

<textarea placeholder="Text area"></textarea>

Select

<select>
    <optgroup label="Group 1">
        <option>Option 1</option>
    </optgroup>
    <option>Option 2</option>
</select>

Progress

<progress value="70" max="100">70%</progress>

Submit

<input type="submit" value="submit" />

Output

Represents the result of a calculation or user action.

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" name="b" value="50" /> +
    <input type="number" name="a" value="10" /> =
    <output name="result">60</output>
</form>

Header Select

<div class="select-menu select-menu--block select-menu--alt select-menu--small">

    <label class="visually-hidden">Child marriage and…</label>

    <select class="">
        <option>Spanish</option>
        <option>English</option>
    </select>

    <div class="select-menu__arrow"></div>

</div>