Back to Layouts List

School Free Transport

Free School Transport Part 1

Your child’s details

Date of birth
For example, 31 03 1980
Date moved to this address
For example, 30 06 2015
Date transport needed from
For example, 30 06 2015
<h1 class="heading-large">Your child’s details</h1>

<form action="free_school_transport_part_2" method="post">
<div class="content-block">

    <div class="form-group">
        <label for="first-name">
            <span class="form-label-bold">First name</span>
        </label>
        <input class="form-control" id="first-name" type="text" name="child-first-name">
    </div>

    <div class="form-group">
        <label for="last-name">
            <span class="form-label-bold">Last name</span>
        </label>
        <input class="form-control" id="last-name" type="text" name="child-last-name">
    </div>

    <div class="form-group">
        <fieldset>
            <legend>
                <span class="form-label-bold">
                    Date of birth
                </span>
            </legend>

            <div class="form-date form-group form-date-group" data-grouped-inputs>

                <span class="field-validation-error" data-valmsg-for="Child.DateOfBirth.Day" data-valmsg-replace="true"></span>
                <span class="field-validation-error" data-valmsg-for="Child.DateOfBirth.Month" data-valmsg-replace="true"></span>
                <span class="field-validation-error" data-valmsg-for="Child.DateOfBirth.Year" data-valmsg-replace="true"></span>

                <span class="form-hint">For example, 31 03 1980</span>
                <div class="form-group-day" data-grouped-input>
                    <label for="Child.DateOfBirth.Day">Day</label>
                    <input maxlength="2" class="form-control" data-val="true" data-val-number="The field Day must be a number." data-val-range="Day must be between 1 and 31." data-val-range-max="31" data-val-range-min="1" data-val-required="Day field is required" id="Child_DateOfBirth_Day" name="Child.DateOfBirth.Day" type="text" pattern="[0-9]*" inputmode="numeric">
                </div>

                <div class="form-group-month" data-grouped-input>
                    <label for="Child.DateOfBirth.Month">Month</label>
                    <input maxlength="2" class="form-control" data-val="true" data-val-number="The field Month must be a number." data-val-range="Month must be between 1 and 12." data-val-range-max="12" data-val-range-min="1" data-val-required="Month field is required" id="Child_DateOfBirth_Month" name="Child.DateOfBirth.Month" type="text" pattern="[0-9]*" inputmode="numeric">
                </div>

                <div class="form-group-year" data-grouped-input>
                    <label for="Child.DateOfBirth.Year">Year</label>
                    <input maxlength="4" class="form-control" data-val="true" data-val-number="The field Year must be a number." data-val-range="Day must be between 1980 and 2014." data-val-range-max="2014" data-val-range-min="1980" data-val-required="Year field is required" id="Child_DateOfBirth_Year" name="Child.DateOfBirth.Year" type="text" pattern="[0-9]*" inputmode="numeric">
                </div>

            </div>
        </fieldset>

    </div>

    <div class="form-group">
        <label class="form-label-bold">Gender</label>
        <fieldset class="inline">
            <label class="block-label" for="gender-male">
                <input id="gender-male" type="radio" name="child-gender" value="Male"> Male
            </label>

            <label class="block-label" for="gender-female">
                <input id="gender-female" type="radio" name="child-gender" value="Female"> Female
            </label>
        </fieldset>
    </div>

    <fieldset class="postcode-search">
        <legend>
            <span class="form-label-bold">Current address</span>
        </legend>

        <div class="form-group">
            <label for="postcode">
                <span class="form-label-bold">Postcode</span>
            </label>
            <input class="form-control" id="postcode" type="text" name="postcode" data-postcode-search>
        </div>

        <div class="form-group">
            <button class="button" data-postcode-search>Search for address</button>
        </div>
    </fieldset>

    <div class="form-group">
        <fieldset>
            <legend>
                <span class="form-label-bold">
                    Date moved to this address
                </span>
            </legend>

            <div class="form-date form-group form-date-group" data-grouped-inputs>

                <span class="field-validation-error" data-valmsg-for="DateMoveToAddress.Day" data-valmsg-replace="true"></span>
                <span class="field-validation-error" data-valmsg-for="DateMoveToAddress.Month" data-valmsg-replace="true"></span>
                <span class="field-validation-error" data-valmsg-for="DateMoveToAddress.Year" data-valmsg-replace="true"></span>

                <span class="form-hint">For example, 30 06 2015</span>
                <div class="form-group-day" data-grouped-input>
                    <label for="DateMoveToAddress.Day">Day</label>
                    <input maxlength="2" class="form-control" data-val="true" data-val-number="The field Day must be a number." data-val-range="Day must be between 1 and 31." data-val-range-max="31" data-val-range-min="1" data-val-required="Day field is required" id="DateMoveToAddress_Day" name="DateMoveToAddress.Day" type="text" pattern="[0-9]*" inputmode="numeric">
                </div>

                <div class="form-group-month" data-grouped-input>
                    <label for="DateMoveToAddress.Month">Month</label>
                    <input maxlength="2" class="form-control" data-val="true" data-val-number="The field Month must be a number." data-val-range="Month must be between 1 and 12." data-val-range-max="12" data-val-range-min="1" data-val-required="Month field is required" id="DateMoveToAddress_Month" name="DateMoveToAddress.Month" type="text" pattern="[0-9]*" inputmode="numeric">
                </div>

                <div class="form-group-year" data-grouped-input>
                    <label for="DateMoveToAddress.Year">Year</label>
                    <input maxlength="4" class="form-control" data-val="true" data-val-number="The field Year must be a number." data-val-range="Day must be between 1980 and 2014." data-val-range-max="2014" data-val-range-min="1980" data-val-required="Year field is required" id="DateMoveToAddress_Year" name="DateMoveToAddress.Year" type="text" pattern="[0-9]*" inputmode="numeric">
                </div>

            </div>
        </fieldset>

    </div>

    <div class="form-group">
        <fieldset>
            <legend>
                <span class="form-label-bold">
                    Date transport needed from
                </span>
            </legend>

            <div class="form-date form-group form-date-group" data-grouped-inputs>

                <span class="field-validation-error" data-valmsg-for="DateTransportNeeded.Day" data-valmsg-replace="true"></span>
                <span class="field-validation-error" data-valmsg-for="DateTransportNeeded.Month" data-valmsg-replace="true"></span>
                <span class="field-validation-error" data-valmsg-for="DateTransportNeeded.Year" data-valmsg-replace="true"></span>

                <span class="form-hint">For example, 30 06 2015</span>
                <div class="form-group-day" data-grouped-input>
                    <label for="DateTransportNeeded.Day">Day</label>
                    <input maxlength="2" class="form-control" data-val="true" data-val-number="The field Day must be a number." data-val-range="Day must be between 1 and 31." data-val-range-max="31" data-val-range-min="1" data-val-required="Day field is required" id="DateTransportNeeded_Day" name="DateTransportNeeded.Day" type="text" pattern="[0-9]*" inputmode="numeric">
                </div>

                <div class="form-group-month" data-grouped-input>
                    <label for="DateTransportNeeded.Month">Month</label>
                    <input maxlength="2" class="form-control" data-val="true" data-val-number="The field Month must be a number." data-val-range="Month must be between 1 and 12." data-val-range-max="12" data-val-range-min="1" data-val-required="Month field is required" id="DateTransportNeeded_Month" name="DateTransportNeeded.Month" type="text" pattern="[0-9]*" inputmode="numeric">
                </div>

                <div class="form-group-year" data-grouped-input>
                    <label for="DateTransportNeeded.Year">Year</label>
                    <input maxlength="4" class="form-control" data-val="true" data-val-number="The field Year must be a number." data-val-range="Day must be between 1980 and 2014." data-val-range-max="2014" data-val-range-min="1980" data-val-required="Year field is required" id="DateTransportNeeded_Year" name="DateTransportNeeded.Year" type="text" pattern="[0-9]*" inputmode="numeric">
                </div>

            </div>
        </fieldset>

    </div>

    <div class="form-step-buttons">
        <button type="submit" class="button">Continue</button>
    </div>

</div>
</form><!-- .content-block -->