介绍

介绍

今天福哥跟大家完成忘记密码页面和重置密码方式页面的模板的制作，这里面忘记密码和重置密码方式是一个操作流程的前两步，是连续的表里的设计。这种多步骤表单在的设计需要一些技巧的，我们要知道每一步在整个流程里的具体步骤位置，还要避免其中一步被直接访问到的问题。

今天没有按上一课说的制作个人资料修改页面，因为我们在前面设计数据表的时候只涉及了用户昵称和用户头像字段，个人资料不可能只有这两项数据，所以福哥打算重新设计一下user_profile的字段再设计个人资料修改页面的表单。

忘记密码页面

HTML

<!-- forgot form begin -->
<div class="row login-form">
    <div class="col-sm-12">
        <h3 class="text-center">忘记密码</h3>
        <p>请输入正确的用户名</p>
        <form action="forgotWay.htm">
            <div class="form-group">
                <label>用户名</label>
                <input class="form-control" type="text" name="user" />
            </div>
            <div class="form-group">
                <button class="btn btn-primary btn-sm form-control">下一步</button>
            </div>
        </form>
    </div>
</div>
<!-- forgot form end -->

重置密码方式页面

HTML

<!-- forgot way form begin -->
<div class="row login-form">
    <div class="col-sm-12">
        <h3 class="text-center">重置密码方式选择</h3>
        <p>
            请选择重置密码的验证方式，以下列出来的都是可以使用的方式。<br />
            如果没有任何验证方式选项的话，可能是用户名没有做过任何可以重置密码的保护措施
        </p>
        <form action="forgotWay.htm">
            <div class="form-group">
                <label>
                    <input type="checkbox" name="way" value="email" />
                    通过绑定邮箱验证
                </label>
            </div>
            <div class="form-group">
                <label>
                    <input type="checkbox" name="way" value="question" />
                    通过安全问题验证
                </label>
            </div>
            <div class="form-group">
                <button class="btn btn-primary btn-sm form-control">下一步</button>
                <button class="btn btn-info btn-sm form-control my-3">上一步</button>
            </div>
        </form>
    </div>
</div>
<!-- forgot way form end -->

安全问题

HTML

<!-- reset password by question form begin -->
<div class="row login-form">
    <div class="col-sm-12">
        <h3 class="text-center">安全问题</h3>
        <p>
            请回答密码安全问题，才能重置密码
        </p>
        <form action="forgotWay.htm">
            <div class="form-group">
                <label>
                    我居中的城市名称是？
                </label>
                <input class="form-control" type="text" name="q1" />
            </div>
            <div class="form-group">
                <label>
                    我最喜欢的一本书的名字是？
                </label>
                <input class="form-control" type="text" name="q2" />
            </div>
            <div class="form-group">
                <label>
                    我最喜欢的小学老师的名字是？
                </label>
                <input class="form-control" type="text" name="q2" />
            </div>
            <div class="form-group">
                <button class="btn btn-primary btn-sm form-control">下一步</button>
                <button class="btn btn-info btn-sm form-control my-3">上一步</button>
            </div>
        </form>
    </div>
</div>
<!-- reset password by question form end -->

总结

具体我们完成了忘记密码页面和重置密码方式选择页面的模板的制作，了解了多步骤表单的设计技巧。

下一课我们将完成user_profile表的更多字段，同时完成个人资料修改页面的模板制作。