prince.html

<div id="candidate-personal-details-section" class="section">
    <div class="header-container">
        <h2 class="title highlight">Personal Details</h2>
    </div>
    <div id="candidate-student-picture">
        <p>Upload student thing here</p>
    </div>
    <div class="candidate-flex-box candidate-personal-details-dropdown">
        <div class="candidate-details-left">
            <div class="candidate-inner-left">
                <label for="candidate-title" class="candidate-required-labels">
                    Title<span class="required-field"></span>
                    <select class="required text-box-width" id="candidate-title">
                        <option value="" style="display:none;">Select..</option>
                        <option value="Mr">Mr</option>
                        <option value="Mrs">Mrs</option>
                        <option value="Miss">Miss</option>
                    </select>
                </label>
                <label for="candidate-middle-name" class="candidate-all-labels">
                    Middle Names
                    <input type="text" class="optional text-box-width" id="candidate-middle-name">
                </label>
                <label for="candidate-gender" class="candidate-required-labels">
                    Gender<span class="required-field"></span>
                    <select class="required text-box-width" name="gender" id="candidate-gender">
                        <option value="" style="display:none;">Select..</option>
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                        <option value="Not specified">Not specified</option>
                    </select>
                </label>
            </div>
        </div>
        <div class="candidate-details-right">
            <div class="candidate-inner-right">
                <label for="candidate-given-name" class="candidate-required-labels">
                    Given Name<span class="required-field"></span>
                    <input type="text" class="required text-box-width" id="candidate-first-name">
                </label>
                <label for="candidate-last-name" class="candidate-required-labels">
                    Last Name<span class="required-field"></span>
                    <input type="text" class="required text-box-width" id="candidate-last-name">
                </label>
                <label for="candidate-dob-month-container" class="candidate-required-labels">
                    Date of Birth<span class="required-field"></span>
                    <div class="candidate-dob">
                        <div class="candidate-dob-month-container">
                            <select class="dob month required" id="candidate-dob-month" name="month">
                                <option value="" style="display:none;">Month</option>
                                <option value="1">January</option>
                                <option value="2">Febuary</option>
                                <option value="3">March</option>
                                <option value="4">April</option>
                                <option value="5">May</option>
                                <option value="6">June</option>
                                <option value="7">July</option>
                                <option value="8">August</option>
                                <option value="9">September</option>
                                <option value="10">October</option>
                                <option value="11">November</option>
                                <option value="12">December</option>
                            </select>
                        </label>
                    </div>
                    <div class="candidate-dob-day-container">
                        <select class="dob day required" name="day" id="candidate-dob-day">
                            <option value="" style="display:none;">Day</option>
                            <?php
                            for($x = 1; $x< 31; $x++){
                                $selected='';
                                if ($selected ==$x)$selected = '""';
                                print('<option value="'.$x.'"'.$selected.'>'.$x.'</option>'."\n");
                            }
                            ?>
                        </select>
                    </div>
                    <div class="candidate-dob-year-container">
                        <select class="dob year required" name="year" id="candidate-dob-year">
                            <option value="" style="display:none;">Year</option>
                            <?php
                            for($i=date('Y'); $i>1901; $i--){
                                $selected='';
                                if ($selected ==$i)$selected = 'selected="selected"';
                                print('<option value="'.$i.'"'.$selected.'>'.$i.'</option>'."\n");
                            }
                            ?>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div id="candidate-contact-section" class="section">
    <div class="header-container">
        <h2 class="title highlight">Contact</h2>
    </div>
    <div id="candidate-contact-dropdown">
    <p>Please provide at least a <strong>mobile number</strong> and a <strong>email address</strong> contact</p>
    <div class="candidate-flex-box">
        <div class="candidate-details-left">
            <div class="candidate-inner-left">
                <label for="candidate-mobile-number" class="candidate-required-labels">
                    Mobile<span class="required-field"></span>
                    <input type="text" class="required text-box-width" id="candidate-mobile-number">
                </label>
                <label for="candidate-work-number" class="candidate-all-labels">
                    Work
                    <input type="text" class="optional text-box-width" id="candidate-work-number">
                </label>
            </div>
        </div>
        <div class="candidate-details-right">
            <div class="candidate-inner-right">
                <label for="candidate-home-number" class="candidate-all-labels">
                    Home
                    <input type="text" class="text-box-width" id="candidate-home-number">
                </label>
                <label for="candidate-email" class="candidate-required-labels">
                    Email<span class="required-field"></span>
                    <input type="text" class="required text-box-width" id="candidate-email">
                </label>
            </div>
        </div>
    </div>
</div>
</div>

<div id="candidate-address-section" class="section">
    <div class="header-container">
        <h2 class="title highlight">Address</h2>
    </div>
    <div id="candidate-address-dropdown">
    <div class="candidate-flex-box">
        <div class="candidate-details-left">
            <div class="candidate-inner-left">

                <label for="candidate-flat-details" class="candidate-all-labels">
                    Flat/Unit Details
                    <input type="text" class="text-box-width" id="candidate-flat-details">
                </label>

                <label for="candidate-street-number" class="candidate-all-labels">
                    Street Number<span class="required-field"></span>
                    <input type="text" class="required text-box-width" id="candidate-street-number">
                </label>

                <label for="candidate-suburb" class="candidate-required-labels">
                    Suburb<span class="required-field"></span>
                    <input type="text" class="required text-box-width" id="candidate-suburb">
                </label>
                <label for="candidate-address-state" class="candidate-required-labels">
                    State/Territory<span class="required-field"></span>
                    <select class="required text-box-width" id="candidate-address-state">
                        <option value="" style="display:none;">Select...</option>
                        <option value="Queensland">Queensland</option>
                        <option value="New South Wales">New South Wales</option>
                        <option value="South Australia">South Australia</option>
                        <option value="Northern Territory">Northern Territory</option>
                        <option value="Western Australia">Western Australia</option>
                    </select>
                </label>
            </div>
        </div>
        <div class="candidate-details-right">
            <div class="candidate-inner-right">
                <label for="candidate-building-name" class="candidate-all-labels">
                    Building/Property Name
                    <input type="text" class="text-box-width" id="candidate-building-name">
                </label>
                <label for="candidate-street-name" class="candidate-required-labels">
                    Street Name
                    <input type="text" class="required text-box-width" id="candidate-street-name" >
                </label>
                <label for="candidate-postcode" class="candidate-required-labels">
                    Postcode
                    <input type="text" class="required text-box-width" id="candidate-postcode">
                </label>
            </div>
        </div>
    </div>
    <div class="candidate-different-postal-address" id="candidate-all-labels"></label>
        <label for="candidate-has-postal-address" class="candidate-all-labels">Is your postal address the same as your residential address?
            <input type="radio" id="candidate-has-postal-address" name="candidate-postal-address" value="yes" checked="checked" onclick="slideUp('#candidate-postal-address');"/>
            <label for="candidate-has-postal-address">Yes</label>
            <input type="radio" id="candidate-no-postal-address" name="candidate-postal-address" value="no" onclick="slideDown('#candidate-postal-address');"/>
            <label for="candidate-no-postal-address">No</label>
        </div>
        <div id="candidate-postal-address">
            <div class="candidate-flex-box">
                <div class="candidate-details-left">
                    <div class="candidate-inner-left">
                        <label for="candidate-postal-flat-details" class="candidate-all-labels">
                            Flat/Unit Details
                            <input type="text" class="text-box-width" id="candidate-postal-flat-details">
                        </label>
                        <label for="candidate-postal-street-number" class="candidate-required-labels">
                            Street Number<span class="required-field"></span>
                            <input type="text" class="required text-box-width" id="candidate-postal-street-number">
                        </label>
                        <label for="candidate-postal-suburb" class="candidate-required-labels">
                            Suburb<span class="required-field"></span>
                            <input type="text" class="required text-box-width" id="candidate-postal-suburb">
                        </label>
                        <label for="candidate-postal-state" class="candidate-required-labels">
                            State/Territory
                            <select class="required text-box-width" id="candidate-postal-state">
                                <option value="" style="display:none;">Select...</option>
                                <option value="Queensland">Queensland</option>
                                <option value="New South Wales">New South Wales</option>
                                <option value="South Australia">South Australia</option>
                                <option value="Northern Territory">Northern Territory</option>
                                <option value="Western Australia">Western Australia</option>
                            </select>
                        </label>
                    </div>
                </div>
                <div class="candidate-details-right">
                    <div class="candidate-inner-right">
                        <label for="candidate-postal-po-box" class="candidate-all-labels">
                            PO box
                            <input type="text" class="text-box-width" id="candidate-postal-po-box">
                        </label>
                        <label for="candidate-postal-building-name" class="candidate-all-labels">
                            Building/Property Name
                            <input type="text" class=" text-box-width" id="candidate-postal-building-name">
                        </label>
                        <label for="candidate-postal-street-name" class="candidate-required-labels">
                            Street Name<span class="required-field"></span>
                            <input type="text" class="required text-box-width" id="candidate-postal-street-name">
                        </label>
                        <label for="candidate-postal-postcode" class="candidate-required-labels">
                            Postcode<span class="required-field"></span>
                            <input type="text" class="required text-box-width" id="candidate-postal-postcode" maxlength="4">
                        </label>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
    <div class="candidate-flex-box candidate-gap-sections candidate-button button candidate-personal-details-button">
        <div><span>Continue</span></div>
    </div>