Почему из #value первого поля в форме вырезаются пробелы?

document.querySelector("#validate").addEventListener("click", function(event) { 
  console.log(document.querySelector("form").elements[0].value); 
  console.log(document.querySelector("form").elements[1].value); 
});

<button id="validate">Validate Form!</button> 
<form action="" method="POST" autocomplete="off"> 
  <p><label for="email">Email</label></p> 
  <p> 
    <input type="email" name="email" id="email"> 
  </p> 
  <p><label for="username">Username</label></p> 
  <p> 
    <input type="text" name="username" id="username"> 
  </p> 
  <p><label for="password">Password</label></p> 
  <p> 
    <input type="password" name="password" id="password"> 
  </p> 
  <p><label for="password-conf">Password Confirmation</label></p> 
  <p> 
    <input type="password" name="password-conf" id="password-conf"> 
  </p> 
  <p> 
    <input type="submit" name="commit" value="Submit"> 
    <input type="submit" name="commit2" value="Submit2"> 
    <input type="submit" name="commit3" value="Submit3"> 
  </p> 
</form>