Input elements not being posted with HTML5 - forms

Question

I'm working on a test HTML5 login form and have the form set up like so:
<form id="login" method="POST" action="<?php echo $_SERVER['PHP_SELF'] ?>">
<h1>Log In</h1>
<fieldset id="inputs">
<input id="username" type="text" placeholder="Username" autofocus required>
<input id="password" type="password" placeholder="Password" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" name="submit_data" value="Log in">
</fieldset>
</form>
When clicking Submit, the form is posted back to the same page. When I print the array of POSTed elements, I'm only seeing one for 'submit_data'. 'username' and 'password' are not coming through.
Where am I going wrong?

Answer 1

You haven't specified names for your inputs, e.g.
<form id="login" method="POST" action="<?php echo $_SERVER['PHP_SELF'] ?>">
<h1>Log In</h1>
<fieldset id="inputs">
<input id="username" type="text" name="username" placeholder="Username" autofocus required>
<input id="password" name="password" type="password" placeholder="Password" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" name="submit_data" value="Log in">
</fieldset>
</form>
That might fix this problem.

Answer 2

Can you just perform a check for isset($_POST['username']) and isset($_POST['password']) instead of the print_r (which I assume you are using)?
<input type="..." NAME="username" ..> You haven't set var name.
Also instead of placeholder, set value="Username" and value="Password". There may not be any value passed if just using placeholder. See this test: http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_input_placeholder
As you submit without anything, no value is passed. Once you type something in, value is passed.