<div class="form_section">

    <h2>Text inputs</h2>

    <div class="form_item">
        <label for="text-field">Text area
            <span class="form_description">Descriptive text can be added inside label in a span tag</span>
        </label>
        <input type="text" name="text-field" id="text-field">
    </div>

    <div class="form_item">
        <label for="text-area">Text area</label>
        <textarea name="text-area" id="text-area" ></textarea>
    </div>

</div>
                

<div class="form_section">

    <h2>Email</h2>

    <div class="form_item">
        <label for="email-field">Email address</label>
        <input type="email" name="email-field" id="email-field">
    </div>

</div>
                

<div class="form_section" id="tel">

    <h2>Telephone</h2>

    <div class="form_item">
        <label for="email-field">Telephone number field</label>
        <input type="tel" name="tel-field" id="tel-field">
    </div>

</div>
                

<div class="form_section">

    <h2>Date input</h2>

    <div class="form_item form_date">
        <label for="date">Pick a date</label>
        <input type="date" name="date" id="date" value="" />
    </div>

</div>
                

<div class="form_section">

    <h2>Time input</h2>

    <div class="form_item form_date">
        <label for="date">Time field</label>
        <input id="time" name="time" type="time">
    </div>

</div>
                

<div class="form_section">

    <h2>Select multiple options</h2>

    <ul class="form_check form_item">
       <li><label><input type="checkbox" name="manyfruit" id="oranges" value="oranges" />Oranges</label></li>
       <li><label><input type="checkbox" name="manyfruit" id="bananas" value="bananas" />Bananas</label></li>
       <li><label><input type="checkbox" name="manyfruit" id="apples" value="apples" />Apples </label></li>
       <li><label><input type="checkbox" name="manyfruit" id="pears" value="pears" />Pears</label></li>
    </ul>

</div>
                

<div class="form_section">

    <h2>Single checkbox</h2>

    <div class="form_check form_item">
        <label><input type="checkbox" id="opt-out" name="opt-out" value="opt-out" />Opt me out from emails</label>
    </div>

</div>
                

<div class="form_section">

    <h2>Select one</h3>

    <ul class="form_radio form_item">
       <li><label><input type="radio"  name="animals" id="gerbil" value="gerbil" />Gerbil</label></li>
       <li><label><input type="radio"  name="animals" id="hamster" value="hamster" />Hamster</label></li>
       <li><label><input type="radio"  name="animals" id="guinea-pig" value="guinea-pig" />Blue whale</label></li>
       <li><label><input type="radio"  name="animals" id="rabbit" value="rabbit" />Rabbit</label></li>
    </ul>

</div>
                

<div class="form_section">

    <h2>Boolean</h2>

    <ul class="form_boolean form_item">
       <li><label><input type="radio" name="yesorno" id="yes" value="yes" />Yes</label></li>
       <li><label><input type="radio" name="yesorno" id="no" value="no" />No</label></li>
    </ul>

</div>
                

<div class="form_section">

    <h2>Lookup</h2>

    <div class="form_lookup form_item">
        <label for="text-lookup-field">i.e. Postcode</label>
        <div class="form_lookup_wrap">
            <input type="text" id="text-lookup-field">
            <input type="submit" id="text-lookup-submit" value="Find UK Addresses">
        </div>
    </div>

</div>
                

<div class="form_section">

    <h2>Select list</h2>

    <div class="form_item">
        <label for="select-choice">Select Dropdown Choice:</label>
        <select name="select-choice" id="select-choice">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
    </div>

</div>
                

<div class="form_accordion form_item">

    <p class="form_accordion_hook">How to send things to us </p>
    <div class="form_accordion_content hide">
        <div class="notice-message">
            Mauris et blandit nunc. Praesent turpis sem, molestie sit amet imperdiet nec,
            lobortis ut dolor. Integer vitae ex tristique tellus posuere gravida ut sit amet ipsum.
            Phasellus fermentum, est eget ultrices cursus, leo orci venenatis velit, vitae porta velit
            nulla at magna. Morbi non maximus enim. Curabitur felis erat, hendrerit quis erat a, auctor
            dignissim mi. Morbi egestas et sapien ornare gravida. Duis ac metus tortor. Nulla porta
            blandit ultricies.
        </div>
    </div>

</div>
                

<div class="form_section">
    <p class="form_page-controls">
        <a href="previous-page">Back</a>
        <span>Question 2 of 6</span>
    </p>
</div>
                

<div class="form_section">
    <input type="submit" value="Submit">
</div>
                

<div class="form_section" >
    <h2>Required field</h2>

    <label class="required" for="text-field">Simply add a class of required to the label</label>
    <input type="text" name="text-field" id="text-field">

</div>
                

<div class="form_section" >
    <h2>Validation error</h2>

    <p class="val-message">Please fill in all of the required fields below</p>

    <div class="form_item">
        <label class="required" for="text-field">Text area</label>
        <span class="val-helptip">This field is required</span>
        <input class="val-field" type="text" name="text-field" id="text-field">
    </div>

</div>
                

<div class="form_section">

    <h2>Warning message</h2>

    <p class="warning-red">This form will be unavailable from 6.30pm to 8.30pm on Wenesday 3 August due to
    essential maintenance</p>

    <p class="warning-yellow">This form will be unavailable from 6.30pm to 8.30pm on Wenesday 3 August due to
    essential maintenance</p>

</div>