1. 介绍

1.1 介绍

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

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

2. 忘记密码页面

2.1 HTML

<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>

3. 重置密码方式页面

3.1 HTML

<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>

4. 安全问题

4.1 HTML

<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>

5. 总结

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

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

【20201121】做个用户管理系统(5)——修改密码页面、绑定邮箱页面、安全问题页面的模板的制作

【20201120】做个用户管理系统(4)——注册页面模板的制作

免费看文章，自己学技术

每一篇文章都是福哥一个字一个字地敲出来的，都是福哥原创的。

每一篇文章都是经过了福哥的反复验证的，都是可以正常使用的。