Back to Layouts List

School Free Meals

Form 1

Your child’s details

Date of birth
For example, 31 03 1980

Enter all children you require free school meals for

Add another child
<h1 class="heading-large">Your child’s details</h1>

<form action="form_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>
            <span class="form-label-bold">Gender</span>
        </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>

    <div class="form-group">
        <label for="name-of-school">
            <span class="form-label-bold">Name of school</span>
        </label>
        <input class="form-control" id="name-of-school" type="text" name="name-of-school">
    </div>

    <div class="form-group">
        <p>Enter all children you require free school meals for</p>
        <a class="button">Add another child</a>
    </div>

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

</div>
</form>