HTML form with pretty much everything in it

testform.html

<form>
    <fieldset>
        <legend>Form Fields</legend>
        <div>
            <label for="text-input">Text input</label>
            <input id="text-input" type="text">
        </div>
        <div>
            <label for="text-input-placeholder">Text input with placeholder</label>
            <input id="text-input-placeholder" type="text" placeholder="I'm placeholder text">
        </div>
        <div>
            <label for="readonly-input">Readonly input</label>
            <input id="readonly-input" type="text" value="Read only text input" readonly>
        </div>
        <div>
            <label for="disabled-input">Disabled input</label>
            <input id="disabled-input" type="text" value="Disabled text input" disabled>
        </div>
        <div>
            <label for="required-input">Required input <span class="required">*</span></label>
            <input id="required-input" type="text" required aria-required="true">
        </div>
        <div>
            <label for="email-input">Email input</label>
            <input id="email-input" type="email">
        </div>
        <div>
            <label for="search-input">Search input</label>
            <input id="search-input" type="search">
        </div>
        <div>
            <label for="tel-input">Tel input</label>
            <input id="tel-input" type="tel">
        </div>
        <div>
            <label for="url-input">URL input</label>
            <input id="url-input" type="url" placeholder="http://">
        </div>
        <div>
            <label for="password-input">Password input</label>
            <input id="password-input" type="password" value="password">
        </div>
        <div><label for="select-field">Select field</label>
            <select id="select-field">
                <option selected="selected">Option 01</option>
                <option>Option 02</option>
            </select>
        </div>
        <div>
            <label for="select-field-grouped">Select field grouped</label> 
            <select id="select-field-grouped">
                <optgroup label="Group 1">
                    <option>Option 1</option>
                    <option>Option 2</option>
                </optgroup>
                <optgroup label="Group 2">
                    <option>Option 3</option>
                    <option>Option 4</option>
                    <option>Option 5</option>
                </optgroup>
                <optgroup label="Group 3">
                    <option>Option 6</option>
                    <option>Option 7</option>
                    <option>Option 8</option>
                </optgroup>
                <optgroup label="Group 4">
                    <option>Option 9</option>
                    <option>Option 10</option>
                </optgroup>
            </select>
        </div>
        <div>
            <label for="multiple-select-field">Multiple select field</label>
            <select id="multiple-select-field" multiple size="5">
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
                <option>Option 4</option>
                <option>Option 5</option>
                <option>Option 6</option>
                <option>Option 7</option>
                <option>Option 8</option>
                <option>Option 9</option>
                <option>Option 10</option>
            </select>
        </div>
        <div>
            <label for="radio-input">
                <input id="radio-input" type="radio" name="rad"> Radio input
            </label>
        </div>
        <div>
            <label for="radio-input1"><input id="radio-input1" type="radio" name="rad1"> Radio input</label>
            <label for="radio-input2"><input id="radio-input2" type="radio" name="rad1"> Radio input</label>
            <label for="radio-input3"><input id="radio-input3" type="radio" name="rad1"> Radio input</label>
        </div>
        <div>
            <label for="checkbox-input">
                <input id="checkbox-input" type="checkbox"> Checkbox input
            </label>
        </div>
        <div>
            <label for="file-input">File input</label>
            <input id="file-input" type="file">
        </div>
        <div>
            <label for="textarea">Textarea</label>
            <textarea id="textarea" cols="30" rows="5" >Textarea text</textarea>
        </div>
        <div>
            <label for="color-input">Color input</label>
            <input id="color-input" type="color" value="#000000">
        </div>
        <div>
            <label for="number-input">Number input</label>
            <input id="number-input" type="number" value="5" min="0" max="10">
        </div>
        <div>
            <label for="range-input">Range input</label>
            <input id="range-input" type="range" value="0" min="0" max="100" oninput="rangeout.value = this.value">
            <output name="rangeout" for="range-input">0</output>
        </div>
        <div>
            <label for="date-input">Date input</label> 
            <input id="date-input" type="date">
        </div>
        <div>
            <label for="month-input">Month input</label> 
            <input id="month-input" type="month">
        </div>
        <div>
            <label for="week-input">Week input</label> 
            <input id="week-input" type="week">
        </div>
        <div>
            <label for="time-input">Time input</label> 
            <input id="time-input" type="time">
        </div>
        <div>
            <label for="datetime-input">Datetime input</label> 
            <input id="datetime-input" type="datetime">
        </div>
        <div>
            <label for="datetime-local-input">Datetime-local input</label> 
            <input id="datetime-local-input" type="datetime-local">
        </div>
    </fieldset>
    <input type="submit" value="Submit form">
</form>