How do I get real text (not a gray hint or visible-yet-blank suggestion) to be in an HTML text field of a web page by default?

I am using the “placeholder” attribute in HTML5. I use it in a PHP web page with an HTML section. It works as expected.

Here is my code (it was modified slightly from the w3schools website):

<!DOCTYPE html>
<html>
<body>

<form action="/nextpage.php">
  <input type="text" name="firstname" placeholder="John"><br>
  <input type="text" name="lastname" placeholder="Doe"><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

As a user with the web page I tried using a form with the placeholder element and I clicked submit, but it acts like the field is empty if I do not change the default text that appears in light gray.

I want the text to be real — and not act as though the field is empty. If the user changes the placeholder text in the fields, then that is fine. But if the user does not touch the placeholder text, I want the “Submit” click to ingest the placeholder text as if the user typed it in manually. How do I do this? I tried a variety of different things, but I cannot get it to work. The text could appear black — but this does not matter. I want the text to be in the field if the user does not delete it or change it.

Also set the “value” param

 <input type="text" name="firstname" placeholder="John" value="John">

It will have the user delete the placeholder but if nothing is changed then it is sent

Change placeholder to value

<!DOCTYPE html>
<html>
<body>

<form action="/nextpage.php">
  <input type="text" name="firstname" value="John"><br>
  <input type="text" name="lastname" value="Doe"><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

<script>
$("#firstname").on("click", function() {
        $(this).val("")
});
$("#lastname").on("click", function() {
        $(this).val("")
});
</script>

working jsfiddle : http://jsfiddle.net/Yu97Z/291/

A good approach to handling this type of thing is to provide the field with a default value when the page is loaded. For example:

<input type="text" name="firstname" value="John" placeholder="John">

That will pre-populate “John” in the input field making it so the user would not have to modify it if they chose not too. Perhaps then it would also make sense for placeholder to read something like “First Name”, should someone remove the text altogether.