Value vs Placeholder Attributes in HTML

  1. Well, yes. The value attribute defines what "is in the input field". It's the input field's value. There are three way to influence this value: type into the field, change it via Javascript, or set it via the HTML attribute. So if you pre-populate the value via the HTML attribute and then submit the form, that's the value that gets submitted back to your server.

  2. The placeholder is the value that shows up as long as the actual value is empty. It's for giving the user a hint as to what they're supposed to enter into the field; once the user does enter something or the field is otherwise populated (see above), the placeholder is no longer needed.

You'll have to decide what it is you're trying to do exactly. Say you have a user's profile page where the user can update their information, in this case I'd very much prefer to have all my current information filled in and being able to change it. I don't want blank field, it doesn't make sense from a usability perspective.

If you really do want blank fields and only update information in the database for which the user has filled in the fields, the most useful technique is probably to simply only update those fields which the user filled in:

// only these fields may be submitted
$allowedFields = ['foo', 'bar', 'baz'];

// protecting from invalid submitted data, simplifies SQL injection prevention
if (array_diff(array_keys($_POST), $allowedFields)) {
    throw new Exception('Invalid data submitted');
}

// filter out fields which do not have any input
$data = array_filter($_POST, 'strlen');

// prepare placeholders for binding data
$placeholders = array_map(
    function ($key) { return "`$key` = :$key"; }
    array_keys($data)
);

// prepare your query
$query = sprintf('UPDATE table SET %s WHERE id = :id', join(', ', $placeholders));
$stmt  = $pdo->prepare($query);

$data['id'] = /* some id you get from somewhere to know what record to update */;

$stmt->execute($data);

The above is an example that assumes PDO as the database adaptor, change it as required for your own needs. It demonstrates though that it's pretty trivial to write dynamic updates which only update the columns which were submitted; you don't need to do special tricks with form data.


The first part is correct; you can preset the value of an input field by using the "value" attribute, as in your first example. It is very common and a well-understood part of how the web works.

The placeholder text, although it appears in the same place as the value, is not a value. It is never submitted, and only shows up if there is no value.

What you're describing is possible, using javascript. But it is strange, unexpected behavior, and potentially confusing to users. Having the values pre-filled in the form communicates to the user: "You can change this, but this is what will be sent if you don't." It's usually a good idea to stick to established convention.

That said, one way to do it would be to use javascript. You could have all of the "real" input fields hidden, so that your pre-populated fields were invisible to the user. Then, you could have unnamed 'dummy' fields, that are labeled to correspond the real fields. When a user enters something in one of the dummy fields, you can use scripting to copy the value to its hidden partner, overwriting the preset value.

Here is an example:

HTML:

<input id="dummy_name" type="text"    placeholder="Enter your name">
<!-- no name, there, notice: it won't be submitted -->
<input id="real_name"  type="hidden"  name="name" value="Default">

JQuery:

$('#dummy_name').change(function(){
  var user_input = $('#dummy_name').val(); // get the user input
  $('#real_name').val(user_input);         // overwrite the value of the hidden field
});

or in plain Javascript:

document.getElementById('dummy_name').onchange=function(){
    var user_input = document.getElementById('dummy_name').value();
    document.getElementById('real_name').value = user_input;
};

If you went this route, you might also want to store the default value in a variable, so that it could be restored to the hidden field if they type something, but then clear it out. But all this is strongly discouraged, unless you have a good reason!

This solution is back-end agnostic, but as deceze suggests, this is perhaps better handled on the server side.

Tags:

Html

Input

Recent Posts