Value vs Placeholder Attributes in HTML

Question

I am working on a form, and have fields that may or may not be filled in by the user. To keep the backend logic simple, I plan on taking all the data from the form and updating my records with all of it, regardless of what the user has entered into the fields or not.

I was told (perhaps incorrectly) that I could take the data that currently exists in the database (ie, at the time the page loads) and put it into the input area's 'value' attribute. Supposedly, this would make it that if the user does NOT enter anything into the field, the old/current values will simply be passed back to the server and re-entered (but not changed).

If the user DOES enter data, then THAT would become the new value.

So it would look something like this:

<input type='text' name='XYZ' value='<?php echo $record['XYZ']; ?>'></td>

-1--So the first question is, is this true?

The second question is that I don't want this value showing up in the actual text field. Therefore, I added a placeholder attribute to the input tag:

<input type='text' name='XYZ' value='<?php echo $record['XYZ']; ?>' placeholder=''></td>

But the value attribute seems to override the placeholder tag!

-2--So the second Q is, is there anyway to assign the value as I would like and NOT have it appear in the actual textfield?

Answer 1

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.