Forget password is important for social and ecommerce website, every user is important for site. If any user forget his/her password then forget password is the only method through which he/she recover his password. In this tutorial I will show you how forget password link works.
In most websites forget password link is available on login page near login button. By Clicking on forgot password link you should redirect to forgot password page. See the image bellow.
After clicking on forgot Your Password link you should redirect to recover_password.php page.


Recover_password.php css code:

<style>
.login-box {
    background: none repeat scroll 0 0 #ffffff;
    height: auto;
    margin: 65px auto;
    max-width: 425px;
    padding: 25px;
    width: auto;
}
.login-box .form-line {
    float: left;
    margin: 13px 0 0;
    width: 100%;
}
.login-box label {
    color: #252525;
    float: left;
    font-size: 14px;
    margin: 17px 0 0;
    text-align: left;
    width: 150px;
}
label {
    display: block;
}

.login-box input[type="text"] {
    margin: 10px 0 0;
    padding: 8px;
    width: 250px;
}
.login-box input[type="password"] {
    margin: 10px 0 0;
    padding: 8px;
    width: 250px;
}

label, input, button, select, textarea {
    font-weight: normal;
    line-height: 20px;
}
label, select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] {
    cursor: pointer;
}
* {
    border: 0 none;
    padding: 0;
    vertical-align: baseline;
}

textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}

.login-box .btn-inverse {
    float: left;
    margin: 9px 0 0 150px;
    padding: 10px 0;
    text-align: center;
    width: 132px;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
}
.btn-inverse {
    background-color: #363636;
    background-image: linear-gradient(to bottom, #444444, #222222);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-image: none;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    vertical-align: middle;
}
.login-box .forgot-link a {
    color: #3a3a3a;
    text-decoration: none;
}
a {
    cursor: pointer;
}

 .login-box .forgot-link {
    color: #3a3a3a;
    float: left;
    font-size: 12px;
    margin: 16px 0 0 8px;
}
#body-login {
    /*background: url("img/login-body.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
*/    font-family: Arial,Helvetica,sans-serif;
background-color:#999;
    font-size: 14px;
    line-height: 19px;
}

.login-container h1 {
    color: #3a3a3a;
    font-size: 38px;
    margin: 46px 0 0;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}
.error_msg{ color:red;}

</style> 

recover_password.php html Code:

<body id="body-login">
        <div class="login-header" >
            <div class="container">
                        <div class="logo"><img src="img/logo.png" alt="" title="" ></div>
            </div>
        </div>
        <div class="login-container">
            <div class="container">
                <h1>Recover Password</h1>
                <form method="post" action="email.php">
                <div class="login-box">
                        <div class="form-line">
                        <label>Username email*:</label>
                        <div class="error_msg">
                        </div>
                        <input type="email" value="" id="user_email" name="user_email" placeholder="Enter Your Valid Email" required="required">
                    </div>
                   
                    <div class="form-line">
                        <input name="" type="submit" class="btn btn-inverse" value="Send Password" >
                        
                    </div>
                    <div style="clear:both"></div>
                    <div style="clear:both"></div>
                </div>
                </form>
            </div>
        </div>
    </body>

Output of these code Produce:


In this for we use html5 email validation so if the email field is empty or email format is not correct then it will show a message like showing in the bellow screen image.



now if the user put correct email then it will go to the email.php page.

Email.php Code:


<?php 

session_start();
//include database connecton 
 include "connection.php";

$user_email   = $_POST['user_email'];

$query = mysqli_query($dbCon,"select * from users where user_email='".$user_email."'"); // query to fetch data from db
$result = mysqli_num_rows($query);
$data = mysqli_fetch_row($query);
if($result==1){  //if user exist put the name of user into session and redirect to home page
$email = $data['email']; 
        
$subject ="Password request"; 
$password = $data['password'];
// note: if you save the password in md5 then it will not return into normal form so you can send a temporary link to setup new password
        
$header = "from: phpplannet@gmail.com"; 
        
$body = "Your password is " . $password; 
mail ($email, $subject, $header, $body);  
$_SESSION['message'] = "Password has been send to your mail id";
header('Location:login.php');
}else{
$_SESSION['message'] = 'Email not found!';
header('Location:login.php');
}

?>

Connect.php  Code:

<?php 

$username = "root";  // in localhost username is root by default.
$password = ""; // in localhost passowd is blank by default.
$hostname = "localhost"; 
$db = "login"; 

//connection to the database
$dbCon = mysqli_connect($hostname, $username, $password,$db)
  or die("Unable to connect to MySQL");

?>

When user click on send password button, form will submit and on email.php php code will check that the inputted email is exist in database or not. If it exist in database it will send email to the user and show message on login page that email has been send to the email address, if not exist then it will give not found message.