Untitled

 avatar
unknown
plain_text
2 years ago
15 kB
4
Indexable
<div class="card-body">
                                    <form role="form" class="needs-validation register-form" novalidate>
                                        <input type="hidden" name="csrfmiddlewaretoken" value="Gg6Z5JiafaXV6v85hPbO55J6Xgf7qX0gPhMh9LDwhztvC1sDh91zFlHx9GGMaUq5">
                                        <div class="step-1 animate__animated animate__fadeInLeft">
                                            <div class="row">
                                                <div class="col-lg-3 col-4">
                                                    <label>Title <span class="text-danger">*</span></label>
                                                    <select class="form-select" aria-label="title" id="title" name="title">
                                                        <option value="Miss">Miss</option>
                                                        <option value="Mr">Mr</option>
                                                        <option value="Mrs">Mrs</option>
                                                        <option value="Ms">Ms</option>
                                                        <option value="Mx">Mx</option>
                                                        <option value="Br">Br</option>
                                                        <option value="Capt">Capt</option>
                                                        <option value="Dame">Dame</option>
                                                        <option value="Dr">Dr</option>
                                                        <option value="Fr">Fr</option>
                                                        <option value="Frau">Frau</option>
                                                        <option value="Herr">Herr</option>
                                                        <option value="Hon">Hon</option>
                                                        <option value="HRH">HRH</option>
                                                        <option value="Lady">Lady</option>
                                                        <option value="Lord">Lord</option>
                                                        <option value="Lt">Lt</option>
                                                        <option value="Maj">Maj</option>
                                                        <option value="Mdm">Mdm</option>
                                                        <option value="Prin">Prin</option>
                                                        <option value="Prof">Prof</option>
                                                        <option value="Pte">Pte</option>
                                                        <option value="Rev">Rev</option>
                                                        <option value="Revd">Revd</option>
                                                        <option value="Sir">Sir</option>
                                                        <option value="Sgt">Sgt</option>
                                                        <option value="Sr">Sr</option>
                                                        <option value="Visc">Visc</option>
                                                        <option value="Engr">Engr</option>
                                                        <option value="Brns">Brns</option>
                                                        <option value="Bron">Bron</option>
                                                        <option value="Earl">Earl</option>
                                                        <option value="Marq">Marq</option>
                                                        <option value="Duch">Duch</option>
                                                        <option value="Duke">Duke</option>
                                                        <option value="PSir">PSir</option>
                                                        <option value="RevD">RevD</option>
                                                        <option value="RHon">RHon</option>
                                                        <option value="Ven">Ven</option>
                                                        <option value="VRev">VRev</option>
                                                        <option value="RRev">RRev</option>
                                                        <option value="Brgd">Brgd</option>
                                                        <option value="Col">Col</option>
                                                        <option value="Gen">Gen</option>
                                                        <option value="WgCd">WgCd</option>
                                                        <option value="GpCp">GpCp</option>
                                                        <option value="ACdr">ACdr</option>
                                                        <option value="AVM">AVM</option>
                                                        <option value="AM">AM</option>
                                                        <option value="Adm">Adm</option>
                                                        <option value="RAdm">RAdm</option>
                                                        <option value="VAdm">VAdm</option>
                                                    </select>
                                                </div>
                                                <div class="col">
                                                    <label>First name <span class="text-danger">*</span></label>
                                                    <div class="mb-3">
                                                        <input id="first-name" name="first_name" type="text" class="form-control" placeholder="First name" aria-label="First name" aria-describedby="first-name-addon" required>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-12">
                                                    <label>Middle name</label>
                                                    <div class="mb-3">
                                                        <input id="middle-name" name="middle_name" type="text" class="form-control" placeholder="Middle name" aria-label="Middle name" aria-describedby="middle-name-addon">
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <label>Last name <span class="text-danger">*</span></label>
                                                    <div class="mb-3">
                                                        <input id="last-name" name="last_name" type="text" class="form-control" placeholder="Last name" aria-label="Last name" aria-describedby="last-name-addon" autocomplete="off" required>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="step-2 animate__animated d-none">
                                            <div class="row">
                                                <div class="col-7">
                                                    <label for="country-input">Nationality <span class="text-danger">*</span></label>
                                                    <div class="mb-3">
                                                        <input class="form-control" id="country-input" name="nationality" type="text" required>
                                                    </div> 
                                                </div>
                                                <div class="col">
                                                    <label for="country-input">City <span class="text-danger">*</span></label>
                                                    <div class="mb-3">
                                                        <input class="form-control" id="city-input" name="city" type="text" placeholder="Accra" required>
                                                    </div>
                                                </div>
                                            </div>
                                            <label>Gender <span class="text-danger">*</span></label>
                                            <div class="mb-3">
                                                <select id="gender" name="gender" class="form-select" aria-label="title">
                                                    <option value="Male">Male</option>
                                                    <option value="Female">Female</option>
                                                </select>
                                            </div>
                                            <div>
                                                <label>Date of Birth <span class="text-danger">*</span></label>
                                                <div class="row">
                                                    <div class="col-md mb-3">
                                                        <input class="form-control" type="number" id="dob-year" name="dob-year" placeholder="Year" min="1900" max="2100" required>
                                                    </div>
                                                    <div class="col-md mb-3">
                                                        <select class="form-select" id="dob-month" name="dob-month" required>
                                                            <option value="">Month</option>
                                                            <option value="01">January</option>
                                                            <option value="02">February</option>
                                                            <option value="03">March</option>
                                                            <option value="04">April</option>
                                                            <option value="05">May</option>
                                                            <option value="06">June</option>
                                                            <option value="07">July</option>
                                                            <option value="08">August</option>
                                                            <option value="09">September</option>
                                                            <option value="10">October</option>
                                                            <option value="11">November</option>
                                                            <option value="12">December</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md mb-3">
                                                        <select class="form-select" id="dob-day" name="dob-day" disabled required>
                                                            <option value="">Day</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>                                         
                                        </div>
                                        <div class="step-3 d-none">
                                            <label>Email <span class="text-danger">*</span></label>
                                            <div class="mb-3">
                                                <input id="email" name="email" type="email" class="form-control" placeholder="Email" aria-label="Email" aria-describedby="email-addon" required>
                                            </div>

                                            <label>Password <span class="text-danger">*</span></label>
                                            <div class="mb-3">
                                                <input id="password" name="password" type="password" class="form-control" placeholder="Password" aria-label="Password" aria-describedby="password-addon" required>
                                            </div>

                                            <label>Confirm Password <span class="text-danger">*</span></label>
                                            <div class="mb-3">
                                                <input id="confirm-password" type="password" class="form-control" placeholder="Confirm Password" aria-label="Confirm Password" aria-describedby="confirm-password-addon" required>
                                            </div>
                                        </div>
                                        
                                        <div class="text-center d-lg-flex justify-content-between gap-3">
                                            <button id="prev-btn" type="button" class="btn bg-gradient-secondary w-100 mt-4 mb-0 d-none">Back</button>
                                            <button id="next-btn" type="button" class="btn bg-gradient-primary w-100 mt-4 mb-0">Next</button>
                                            <button id="registering-btn" class="btn bg-gradient-primary w-100 mt-4 mb-0 d-none" type="button" disabled>
                                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                                &nbsp;Submitting...
                                            </button>
                                        </div>
                                    </form>
                                </div>
                                <div class="card-footer text-center pt-0 px-lg-2 px-1">
                                    <p class="text-sm mx-auto">
                                        Don't want to continue?
                                        <a href="/portal/account/login/" class="text-danger text-gradient font-weight-bold">Cancel</a>
                                    </p>
                                </div>
                            </div>
Editor is loading...