Untitled

<html>
<head>
    <title>Form example</title>
    <style>
        body {
            margin: 1em auto;
            max-width: 60em;
        }
        form {
            width: 60%;
            max-width: 30em;
        }
        .messages {
            width: 60%;
            max-width: 30em;
        }
        fieldset {
            border: 1px solid #ccc;
            border-radius: 3px;
            margin-bottom: 1em;
        }
        fieldset div {
            float: left;
            width: 100%;
            padding: 0.5em 0;
        }
        fieldset div.half {
            float: left;
            width: 50%;
        }
        fieldset div.medium {
            float: left;
            width: 75%;
        }
        fieldset div.half label,
        fieldset div.half input,
        fieldset div.medium label,
        fieldset div.medium input {
            float: left;
            clear: both;
        }
        fieldset div.small {
            float: left;
            width: 25%;
        }
        fieldset div label,
        fieldset div input {
            width: 95%;
        }
        fieldset div p {
            margin-top: 0.5em;
        }
        div.inline label,
        div.inline input,
        div.inline select {
            display: inline;
            float: none;
            clear: none;
            width: auto;
        }
        .fieldset-full label,
        .fieldset-full input,
        .fieldset-full select,
        .fieldset-full textarea {
            float: left;
            clear: both;
            width: 100%;
        }
        .customclass {
            background: #eee;
            padding: 0.5em 5%;
            width: 90%;
        }
        .labelclass{
            color: #33a;
        }
        .inputclass {
            color: #0a0;
        }
        .has-validation-error {
            color: #f00;
        }
        span.required {
            color: #f00;
        }
        .custombutton {
            background-color: #aae;
        }
        .validation,
        .message {
            background-color: #bbf;
            color: #33f;
            border: 1px solid #33f;
            padding: 0.5em;
        }
        .success {
            background-color: #bfb;
            color: #3a3;
            border: 1px solid #3a3;
        }
        .warning {
            background-color: #ffb;
            color: #aa3;
            border-color: #aa3;
        }
        .error {
            background-color: #fbb;
            color: #f33;
            border-color: #f33;
        }
    </style>
</head>
<body>

<h1>Boilerplate form.</h1>

<p>This form has a prefix that is displayed before any form messages.</p>

<div class="messages">
    <p class="message">Neutral messages should be displayed before the form.</p>
    <p class="message success">Success messages should be displayed before the form.</p>
    <p class="message warning">Warning messages should be displayed before the form.</p>
    <p class="message error">Error messages should be displayed before the form.</p>
</div>

<form action="" method="post" name="formname">
    <h2>Real world form elements.</h2>

    <p>In the form element there is also an introduction.
        Sometimes you might want to <a href="#anchortarget">jump to a step</a> in the form.
        So simple HTML elements like links must be allowed.</p>

    <fieldset id="textfields" class="fieldset-full">
        <legend>Different textfield options</legend>

        <div>
            <label for="textfield1">Textfield with placeholder</label>
            <input type="text" name="textfield-placeholder" id="textfield1"
                placeholder="Textfield placeholder" class="inputclass">
        </div>

        <div class="customclass">
            <label for="textfieldclasses" class="labelclass">Textfield with .labelclass</label>
            <input type="text" name="textfieldclasses" class="inputclass"
                id="textfieldclasses" value="Input textfield with .inputclass">
            <p>Labels, rows and input elements need separate class definitions.
                This is to enable visual distinctions that are sometimes required.</p>
        </div>

        <div class="has-validation-error">
            <label for="textfielderror">Textfield with error</label>
            <input type="text" name="textfield-error" class="has-validation-error"
                id="textfielderror" value="Wrong textfield value">
            <div>
                <p class="validation error">If an error was detected by the validation,
                    an inline message must be displayed.</p>
            </div>
        </div>

        <div>
            <label for="textfield2">Textfield with default value</label>
            <input type="text" name="textfield-default" id="textfield2"
                value="Textfield default" maxlength="20">
            <p>An explanation text about what the <b>default value</b> means.
                This explanation needs HTML tags for emphasis and clarity.</p>
        </div>

        <div>
            <label for="textfield3">Disabled textfield</label>
            <input type="text" name="textfield-disabled" id="textfield3"
                value="Disabled textfield default" readonly>
        </div>

        <div>
            <label for="textfield4">Required textfield <span class="required">*</span></label>
            <input type="text" name="textfield-required" id="textfield4"
                placeholder="Required textfield placeholder" required>
            <p>An explanation text after the form field about why a value is required.</p>
        </div>

        <div>
            <label for="textfield5">Textfield with data attributes</label>
            <input type="text" name="textfield-data" id="textfield5"
                value="Textfield default" data-first="Arbitrary data may be added here"
                data-second="and some more here">
        </div>
    </fieldset>

    <fieldset id="checkboxes">
        <legend>Checkbox group</legend>

        <p>Introductory text with explanation about how you can select multiple items.</p>

        <div class="inline">
            <label for="checkbox1">Uno</label>
            <input type="checkbox" name="checkboxset" value="1" id="checkbox1">

            <label for="checkbox2">Due</label>
            <input type="checkbox" name="checkboxset" value="2" id="checkbox2" checked>

            <label for="checkbox3">Tre</label>
            <input type="checkbox" name="checkboxset" value="3" id="checkbox3" checked>
        </div>
    </fieldset>

    <fieldset id="radiogroup">
        <legend>Radio group</legend>

        <div class="inline">
            <label for="radioinput1">Uno</label>
            <input type="radio" name="radiogroup" value="1" id="radioinput1">

            <label for="radioinput2">Due</label>
            <input type="radio" name="radiogroup" value="2" id="radioinput2" checked>

            <label for="radioinput3">Tre</label>
            <input type="radio" name="radiogroup" value="3" id="radioinput3">

            <p>Informational text about why you need to choose one option.</p>
        </div>
    </fieldset>

    <fieldset id="selectsingle">
        <legend>Select option</legend>

        <div class="inline">
            <label for="selector1">Make a choice <span class="required">*</span></label>
            <select name="selector1" id="selector1">
                <option value="first" selected>First</option>
                <option value="second">Second</option>
                <option value="third">Third option</option>
                <option value="fourth">Fourth</option>
            </select>
        </div>
    </fieldset>

    <fieldset id="selectmulti" class="fieldset-full">
        <legend>Select multiple option</legend>

        <div>
            <label for="selector2">Make a choice <span class="required">*</span></label>
            <select name="selector2" id="selector2" size="6" multiple>
                <optgroup label="Group 1">
                    <option value="first" selected>First</option>
                    <option value="second">Second</option>
                </optgroup>
                <optgroup label="Group 2">
                    <option value="third" selected>Third option</option>
                    <option value="fourth">Fourth</option>
                </optgroup>
                <optgroup label="Group three">
                    <option value="5">Fifth</option>
                    <option value="6">Sixth</option>
                    <option value="7">Seventh</option>
                    <option value="8">Eighth</option>
                    <option value="9">Ninth</option>
                </optgroup>
            </select>

            <p>Use <kbd>Ctrl</kbd> + <kbd>Click</kbd> to select multiple options.</p>
        </div>
    </fieldset>

    <div>
        <h3>Markup block</h3>
        <p>To separate the different steps or sections in a form, markup is needed.
            So this markup block with a <tt><div></tt> tag is inserted here.<br>
            The markup block needs HTML elements.</p>
        <p>Sometimes all you need is a horizontal line.</p>
    </div>

    <hr>

    <fieldset id="termsandconditions">
        <legend>Terms and conditions</legend>

        <div class="inline">
            <label for="checkbox4">This is a required checkbox <span class="required">*</span></label>
            <input type="checkbox" name="checkboxrequired" value="4" id="checkbox4" required>
            <p>You may not continue without accepting
                <a href="a-link-to-the-terms.html">the terms and conditions</a>.</p>
        </div>
    </fieldset>


    <fieldset id="datefieldstext">
        <legend>Textual date inputs</legend>

        <div class="half">
            <label for="datefield1">Start date</label>
            <input type="text" name="datefield1" id="datefield1" class="datepopup">
        </div>

        <div class="half">
            <label for="datefield2">End date</label>
            <input type="text" name="datefield2" id="datefield2" class="datepopup">
        </div>
    </fieldset>

    <fieldset id="personal">
        <legend>Personal details</legend>

        <div class="inline">
            <label for="gender">Gender options:</label>

            <label for="gendermale">Male</label>
            <input type="radio" name="gender" value="m" id="gendermale">

            <label for="genderfemale">Female</label>
            <input type="radio" name="gender" value="f" id="genderfemale">

            <label for="genderother">Other</label>
            <input type="radio" name="gender" value="x" id="genderother">
        </div>

        <div>
            <label for="firstname">First name</label>
            <input type="text" name="firstname" id="firstname">
        </div>

        <div>
            <label for="lastname">Last name <span class="required">*</span></label>
            <input type="text" name="lastname" id="lastname" required>
        </div>

        <div>
            <label for="email">Email address <span class="required">*</span></label>
            <input type="email" name="email" id="email" required>
        </div>

        <div>
            <label for="dob">Date of birth</label>
            <input type="date" name="dob" id="dob">
        </div>

        <div>
            <label for="telephone">Telephone</label>
            <input type="tel" name="telephone" id="telephone">
        </div>
    </fieldset>

    <fieldset id="address">
        <legend>Address information</legend>

        <div>
            <label for="company">Organisation / Company</label>
            <input type="text" name="company" id="company" placeholder="Two Kings">
        </div>

        <div>
            <label for="division">Department</label>
            <input type="text" name="division" id="division" placeholder="Standards and accessibility">
        </div>

        <div class="medium">
            <label for="street">Street</label>
            <input type="text" name="street" id="street" placeholder="Prins Hendrikstraat">
        </div>

        <div class="small">
            <label for="number">Number</label>
            <input type="text" name="number" id="number" placeholder="91">
        </div>

        <div>
            <label for="street2">Additional street</label>
            <input type="text" name="street2" id="street2" placeholder="">
        </div>

        <div class="small">
            <label for="postalcode">Postal code</label>
            <input type="text" name="postalcode" id="postalcode" placeholder="2562 SB" length="8">
        </div>

        <div class="medium">
            <label for="city">City</label>
            <input type="text" name="city" id="city" placeholder="'S-Gravenhage">
        </div>

        <div>
            <label for="state">State</label>
            <input type="text" name="state" id="state" placeholder="">
        </div>

        <div>
            <label for="country">Country</label>
            <input type="text" name="country" id="country" placeholder="NETHERLANDS">
        </div>
    </fieldset>

    <fieldset id="commentbox" class="fieldset-full">
        <legend>Comments box</legend>

        <div>
            <label for="textarea1">Please leave your comments</label>
            <textarea id="textarea1" name="textbox" cols="30" rows="10"
                >You might as well tell us what's up.</textarea>
            <p>An explanation text after the form field.</p>
        </div>
    </fieldset>

    <fieldset class="fieldset-full">
        <legend>File upload</legend>

        <div>
            <label for="file1">Upload a file</label>
            <input type="file" name="file1" id="file1">
            <p>The file must be a document in the format <tt>.doc</tt> or <tt>.pdf</tt>
                and it may not exceed <em>1.2 MB</em>.</p>
        </div>
    </fieldset>

    <input type="hidden" name="hidden-field" id="hiddenfield1" value="hidden value">

    <fieldset id="buttons">
        <!-- unlabeled fieldset - because sometimes you need that too -->
        <p>This fieldset does not have a legend, but it still might have an introduction.</p>
        <p>Buttons do not need to be at the end of the form.
            But if no submit button is defined one should be added by default to the end of the form.</p>

        <div class="inline">
            <input type="submit" name="submit1" value="Submit 1" id="submit1" class="custombutton">

            <button type="submit" name="submit2" id="submit2">Submit 2</button>

            <input type="button" name="button1" value="Button 1" id="button1">

            <button name="button2" id="button2" class="custombutton">Button 2</button>

            <p>Every element, including buttons must allow classes for styling.</p>
        </div>
    </fieldset>

    <div>
        <h2 id="anchortarget">Additional input elements</h2>
        <p>The additional input elements are still a bit experimental in the HTML5 standard.
            The browser support might be a bit rough.
            So these elements are not required for the basic boltforms.
            They are a nice-to-have.</p>
    </div>

    <fieldset id="datefields">
        <legend>Date inputs</legend>

        <div class="half">
            <label for="datefield3">Start date</label>
            <input type="date" name="datefield3" id="datefield3">
        </div>

        <div class="half">
            <label for="datefield4">End date</label>
            <input type="date" name="datefield4" id="datefield4">
        </div>
    </fieldset>

    <fieldset class="fieldset-full">
        <legend>Range input</legend>

        <div>
            <label for="rating1">Rate your experience</label>
            <input type="range" name="rating1" id="rating1"
                list="ratingmarks" min="1" value="3" max="5" step="1">
            <datalist id="ratingmarks">
                <option value="1" label="1">
                <option value="2">
                <option value="3">
                <option value="4">
                <option value="5" label="5">
            </datalist>
        </div>
    </fieldset>

    <div class="required">
        <p><span class="required">*</span> marks required fields.
            If there are required fields in a form they must be visually
            recognizable and an explanation on the form is required.</p>
    </div>

</form>

<h2>Footer</h2>
<p>A footer might explain some legalities about the rights and privacy
    that the visitors give up when they submit their personal information.</p>

</body>
</html>