Inputs

<form>
    <fieldset>
        <legend>Text & Basic Inputs</legend>

        <label>
            Text
            <input type="text" name="text">
        </label>

        <label>
            Password
            <input type="password" name="password">
        </label>

        <label>
            Search
            <input type="search" name="search">
        </label>

        <label>
            Email
            <input type="email" name="email">
        </label>

        <label>
            URL
            <input type="url" name="url">
        </label>

        <label>
            Telephone
            <input type="tel" name="tel">
        </label>
    </fieldset>

    <fieldset>
        <legend>Numeric & Date Inputs</legend>

        <label>
            Number
            <input type="number" name="number">
        </label>

        <label>
            Range
            <input type="range" name="range" min="0" max="100">
        </label>

        <label>
            Date
            <input type="date" name="date">
        </label>

        <label>
            Time
            <input type="time" name="time">
        </label>

        <label>
            Datetime-local
            <input type="datetime-local" name="datetime_local">
        </label>

        <label>
            Month
            <input type="month" name="month">
        </label>

        <label>
            Week
            <input type="week" name="week">
        </label>
    </fieldset>

    <fieldset>
        <legend>Choices</legend>
        <p>
            <label for="radio-1"><input type="radio" name="radio" id="radio-1" checked />first</label>
            <label for="radio-2"><input type="radio" name="radio" id="radio-2" /> second </label>
            <label for="radio-3"><input type="radio" name="radio" id="radio-3" disabled />third</label>
        </p>
        <p>
            <label for="checkbox-1"><input type="checkbox" id="checkbox-1" /><span></span>Checkbox</label>
            <label for="checkbox-2"><input type="checkbox" id="checkbox-2" checked /><span></span>Checkbox</label>
            <label for="checkbox-3"><input type="checkbox" id="checkbox-3" disabled /><span></span>Checkbox</label>
        </p>
    </fieldset>

    <fieldset>
        <legend>Pickers</legend>

        <label>
            Color
            <input type="color" name="color">
        </label>

        <label>
            File
            <input type="file" name="file">
        </label>
    </fieldset>

    <fieldset>
        <legend>Textareas & Selects</legend>

        <label>
            Textarea
            <textarea name="textarea" rows="4" cols="40"></textarea>
        </label>

        <p>
            <label for="select">Select</label><br />
            <select id="select">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
                <optgroup label="Subgroup">
                    <option value="4">Option 4</option>
                    <option value="5">Option 5</option>
                </optgroup>
            </select>
        </p>
        <p>
            <label for="selectmultiple">Multiselect</label><br />
            <select id="selectmultiple" multiple>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
                <option value="4">Option 4</option>
                <option value="5">Option 5</option>
                <option value="6">Option 6</option>
                <optgroup label="Subgroup">
                    <option value="7">Option 7</option>
                    <option value="8">Option 8</option>
                </optgroup>
            </select>
        </p>

        <label>
            Datalist
            <input list="datalist_example" name="datalist">
            <datalist id="datalist_example">
                <option value="Apple">
                <option value="Banana">
                <option value="Cherry">
            </datalist>
        </label>
    </fieldset>

    <fieldset>
        <legend>Special & Hidden</legend>

        <label>
            Hidden
            <input type="hidden" name="hidden" value="secret">
        </label>

        <label>
            Readonly
            <input type="text" value="Readonly" readonly>
        </label>

        <label>
            Disabled
            <input type="text" value="Disabled" disabled>
        </label>
    </fieldset>

    <fieldset>
        <legend>Buttons</legend>
        <p>
            <button>Button</button>
            <button disabled>Disabled Button</button>
        </p>
        <p>
            <input type="reset" id="input-reset" value="Input Reset" />
            <input type="reset" id="input-reset-disabled" value="Disabled Input Reset" disabled />

        </p>
        <p>
            <input type="button" id="input-button" value="Input Button" />
            <input type="button" id="input-button" value="Disabled Input Button" disabled />
        </p>
        <p>
            <input type="submit" id="input-submit" value="Input Submit" />
            <input type="submit" id="input-submit" value="Disabled Input Submit" disabled />
        </p>
        <p>
            <button class="icon-user-add">icon-user-add</button>
            <button class="icon-user-add" disabled>icon-user-add disabled</button>

        </p>
    </fieldset>

    <fieldset>
        <legend>Progress & Meter</legend>

        <label>
            Progress
            <progress> 70% </progress>
        </label>
        <label>
            Progress static
            <progress max="100" value="70"> 70% </progress>
        </label>
        <label>
            Meter
            <meter min="0" max="100" low="30" high="80" optimum="90" value="65"></meter>
        </label>
    </fieldset>
</form>