Notice: Undefined index: how to solve

Question

I'm making a very basic login page with HTML & PHP. However, when I press the login button, a

Notice: Undefined index:mail

shows up. As you can see in the code, I've used an if (isset($_POST['submit'])) so I can't imagine that being the problem. Can someone tell me what is wrong with my approach?

HTML

<form id="login_form" action="" method="post">

            <label for="mail">E-mailadres*:</label>
            <input id="mail" type="text"/> <br/> <br/>

            <label for="password">Wachtwoord*:</label>
            <input id="password" type="password"/> <br/> <br/>


            <label for="submit"></label>
            <input id="submit" type="submit" name="submit" value="Inloggen"/> <br/> <br/>
        </form>

        <?php
        if (isset($_POST['submit'])) {
            include 'php/login.php';
        }
        ?>

PHP

<?php
include('connect.php');

if (isset($_POST['submit'])) {
    if ($_POST['mail'] == '' || $_POST['password'] == '') {
        echo "Vul alle velden in.";
    } else {

        $user_mail =$_POST['mail'];
        $user_password=$_POST['password'];

        $user_mail = stripslashes($user_mail);
        $user_password = stripslashes($user_password);

        $user_mail = mysql_real_escape_string($user_mail);
        $user_password = mysql_real_escape_string($user_password);

        $sql="SELECT * FROM floro WHERE email='$user_mail' and wachtwoord='$user_password'";
        $res = mysql_query($sql);
        if ($res) {
            ?>
            <div id="formResult"><?php echo 'U bent ingelogd'; ?></div>
        <?php
        } else {
            ?>
            <div id="formResult"><?php echo "De gegevens zijn onjuist."; ?></div>
        <?php
        }

    }
}
?>

Answer 1

Your inputs should have a name, not just an id.

So this will not work:

 <input id="mail" type="text"/> <br/> <br/>

But this will

 <input name="mail" type="text"/> <br/> <br/>

And if required by javascript, you could use:

 <input name="mail" id="mail" type="text"/> <br/> <br/>

Just remember, the server wil only and only receive form elements that have a name="..." element.