Edit in JSFiddle

<fieldset>
    <legend>HTML 4.1 Form Controls</legend>
    <br/>
    <ul>
        <li>Input types (and fieldsets):
            <br/>
            <ul>
                <form method="post" action="">
                    <fieldset>
                        <legend>This is a legend</legend>
                        <li>text&nbsp;
                            <input type="text" />
                        </li>
                        <li>password&nbsp;
                            <input type="password" />
                        </li>
                        <li>checkbox&nbsp;
                            <input type="checkbox" />
                            <input type="checkbox" />
                            <input type="checkbox" />
                        </li>
                        <li>radio&nbsp;
                            <input name="group1" type="radio" />
                            <input name="group1" type="radio" />
                            <input name="group1" type="radio" />
                        </li>
                    </fieldset>
                    <fieldset>
                        <legend>This is another legend</legend>
                        <br />
                        <li>file&nbsp;
                            <input type="file" />
                        </li>
                        <li>reset&nbsp;
                            <input type="reset" />
                        </li>
                    </fieldset>
                </form>
                <fieldset>
                    <legend>This fieldset isn't in a form... non-semantic ftw!</legend>
                    <li>submit&nbsp;
                        <input type="submit" />
                    </li>
                    <li>hidden&nbsp;
                        <input type="hidden" />
                    </li>
                    <li>image&nbsp;
                        <input type="image" />
                    </li>
                    <li>button&nbsp;
                        <input type="button" value="Button" />
                    </li>
                </fieldset>
            </ul>
        </li>
        <li>Button element:
            <br/>
            <button>Button Element</button>This is a button element
            <br/>
            <input type="button" value="Button Input" />This is a button input..... exactly the same, just specified differently.
            <br/>
        </li>
        <li>Select Element
            <select>
                <optgroup label="Group 1">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </optgroup>
                <optgroup label="Group 2">
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                </optgroup>
                <option>7</option>
            </select>
        </li>
        <li>Textarea element:
            <br/>
            <textarea rows="5" cols="30">First line of initial text. Second line of initial text.</textarea>
            <br/>
        </li>
        <li>Label element (code taken from <a href="http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL">HTML 4.1 spec</a>)
            <br/>
            <TABLE>
                <TR>
                    <TD>
                        <LABEL for="fname">First Name</LABEL>
                    </TD>
                    <TD>
                        <INPUT type="text" name="firstname" id="fname" />
                    </TD>
                </TR>
                <TR>
                    <TD>
                        <LABEL for="lname">Last Name</LABEL>
                    </TD>
                    <TD>
                        <INPUT type="text" name="lastname" id="lname" />
                    </TD>
                </TR>
            </TABLE>
        </li>
    </ul>
    
</fieldset>
<br/><br/>
 <form>   
<fieldset>
    <legend>New HTML5 Input Controls (they are all required)</legend>Search:
    <input required="required" type="search" />
    <br/>Telephone (tel):
    <input pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required="required" type="tel" placeholder="Use format 999-999-9999" />Placeholder text!
    <br/>URL:
    <input required="required" type="url" placeholder="http://google.com/" />
    <br/>Email:
    <input required="required" type="email" placeholder="[email protected]" />
    <br/>Datetime:
    <input required="required" type="datetime" />
    <br/>Date:
    <input required="required" type="date" />
    <br/>Month:
    <input required="required" type="month" />
    <br/>Week:
    <input required="required" type="week" />
    <br/>Time:
    <input required="required" type="time" />
    <br/>Datetime-local:
    <input required="required" type="datetime-local" />
    <br/>Number:
    <input step="5" required="required" type="number" />
    <br/>Range:
    <input required="required" type="range" onchange="this.nextSibling.innerHTML=this.value" /><span></span>//number displayed with JS in onchange event
    <br/>Color:
    <input required="required" type="color" />
    <br/>
    <input type="submit" />
</fieldset>
</form>
<br>
<br>
<br>by Troy Whorten 3/19/2014

textarea {
    max-width: 500px;
    min-height:20px;
}
li {
    margin-left: 15px;
}