HTML - forms - input types

by scheinercc

HTML

<!doctype html> 
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Basic HTML5 Template</title>
    </head>
    <body>

        <form id="personalData" action="">
            <fieldset>
                <legend>Personal Details</legend>
                <div class="form-item">
                    <label for="email">Email:</label>
                    <!-- add 'required' for testing; browser field validation wouldn't be triggered if empty -->
                    <input id="email" type="email" autofocus required>
                </div>
                <div class="form-item">
                    <label for="url">Web address:</label>
                    <input id="url" type="url" required>
                </div>
                <div class="form-item">
                    <label for="customerId">ID:</label>
                    <input id="customerId" type="number" required>
                    (numbers only)
                </div>
                <div class="form-item form-item-type-2">
                    <input id="submit" type="submit" value="Submit">
                </div>
            </fieldset>
        </form>

    </body>
</html>

CSS

html {
  font: 14px/1.4em sans-serif;
}

.form-item {
    margin-bottom: 1em;
    padding: .5em;
    background-color: #ddd;
    border-radius: 3px;
}

.form-item-type-2 {
    margin-bottom: 0;
    display: inline;
}

label {
    display: inline-block;
    width: 7em;
}