I am trying to create a login page and after I enter the username and password this error appears. I still wonder why?

Notice: Undefined index: username in C:\xampp\htdocs\SquprimeRevise\loginproses.php on line 95

Notice: Undefined index: password in C:\xampp\htdocs\SquprimeRevise\loginproses.php on line 96

line 95: $username=$_POST['username'];
line 96: $password=$_POST['password'];

The login suppose to be correct.


<?php include('loginproses.php'); ?>

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6 ielt8"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7 ielt8"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<meta charset="utf-8">
<title>SQUPrime Login</title>
<link rel="stylesheet" type="text/css" href="style.css" />

<div class="container">
    <section id="content">
        <form action="<?php $_SERVER['PHP_SELF'] ?>" method="POST">
                <input type="text" placeholder="username" required="" id="username" />
                <input type="password" placeholder="password" required="" id="password" />
                <input type="submit" name="submit" value="Sign-in">
                <a href="#">Lost your password?</a>

        </form><!-- form -->
        <div class="button">
      <a href="http://www.squprime.com">Register with us</a>
        </div><!-- button -->
    </section><!-- content -->
</div><!-- container -->






<!-- alert add -->
<link id="ui-theme" rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.0/themes/ui-lightness/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://pontikis.github.com/jui_alert/v2.0.0/jquery.jui_alert.css"/>
<!-- custom classes -->
<link rel="stylesheet" href="index.css">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://pontikis.github.com/jui_alert/v2.0.0/jquery.jui_alert.min.js"></script>
<script type="text/javascript" src="http://pontikis.github.com/jui_alert/v2.0.0/i18n/en.js"></script>
<script type="text/javascript" src="index.js"></script>
<!-- end -->

<link href= "../css/admin.css" rel="stylesheet" type="text/css" media="screen">

<script type="text/javascript">

$(function() {
    containerClass: "container1 ui-widget",
    message: "<img src='images/megaphone.png' style='float: left; width: 30px; margin-right: 10px;'>This is a sample message. It will disappear after 6 sec (except you press the pin button)",
    timeout: 6000,
    messageIconClass: ""

    containerClass: "container2 ui-widget",
    message: "This is a sample message. It will not disappear automatically. More information <a href='http://www.google.com' target='_blank'>here</a>.",
    messageBodyClass: "message2",
    timeout: 0,
    use_effect: {effect_name: "slide", effect_options: {"direction": "left"}, effect_duration: "500"}
    containerClass: "container3 ui-widget",
    message: "The login is invalid",
    timeout: 0,
    messageAreaClass: "jui_alert_message_area ui-state-error ui-corner-all",
    messageIconClass: "jui_alert_icon ui-icon ui-icon-alert"


.container1 {
  width: 40%;
  margin: 20px;

.container2 {
  width: 50%;
  margin: 20px;

.container3 {
  width: 40%;
  margin: 20px;

.message2 {
  font-size: 13px;
  font-family: Arial, sans-serif;
  letter-spacing: 1px;




$error = "";

if (@$_POST['submit']) { 

/* the files */

// username and password sent from form

// To protect MySQL injection (more detail about MySQL injection)

$username = stripslashes($username);
$password = stripslashes($password);
$username = mysql_real_escape_string($username);
$password = mysql_real_escape_string($password);

$encrypted_password = md5($password);

$sql = "SELECT * FROM student WHERE stu_username='$username' and stu_password='$encrypted_password' and access_level_id='3'" or die(mysql_query);

$sql2 = "SELECT * FROM teacher WHERE teach_username='$username' and teach_password='$encrypted_password'" or die(mysql_query);

$sql3 = "SELECT * FROM user WHERE username='$username' and password='$encrypted_password'" or die(mysql_query);

$sql4 = "SELECT * FROM student WHERE stu_username='$username' and stu_password='$encrypted_password' and access_level_id='4'" or die(mysql_query);

// Mysql_num_row is counting table row

// If result matched $username and $password, table row must be 1 row

if ($stu_count>=1){

// Register $myusername, $mypassword and redirect to file "login_success.php"

$_SESSION['username'] = $username;
$_SESSION['password'] = $password;

elseif ($stuM_count>=1){

$_SESSION['username'] = $username;
$_SESSION['password'] = $password;


elseif ($teach_count>=1){

$_SESSION['username'] = $username;
$_SESSION['password'] = $password;


elseif ($admin_count==1){

$_SESSION['username'] = $username;
$_SESSION['password'] = $password;


else {

<!-- alert add -->

<div id="user_message3"></div>

<!-- end -->

$error = "Please try again.";

Login.php page:

Line 20 - add the attribute name="username" input element
Line 23 name="password" to the input element

The id attribute doesn't get passed to the server, but the namea attribute does.