HTML 中的值与占位符属性

Value vs Placeholder Attributes in HTML

提问by Jo.P

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.

如果用户确实输入了数据，那么 THAT 将成为新值。

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?

-1--所以第一个问题是，这是真的吗？

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 标签中添加了一个占位符属性：

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

But the value attribute seems to override the placeholder tag!

但是 value 属性似乎覆盖了占位符标签！

-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?

-2--所以第二个 Q 是，无论如何分配我想要的值而不是让它出现在实际的文本字段中？

回答by deceze

1. Well, yes. The valueattribute 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.

1. 嗯，是。该value属性定义了“输入字段中的内容”。这是输入字段的值。有三种方法可以影响这个值：在字段中输入，通过 Javascript 更改它，或通过 HTML 属性设置它。因此，如果您通过 HTML 属性预先填充该值，然后提交表单，则该值将被提交回您的服务器。

2. 占位符是只要实际值为空就显示的值。它用于提示用户他们应该进入该领域的内容；一旦用户确实输入了某些内容或以其他方式填充了该字段（见上文），就不再需要占位符。

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.

以上是假设PDO作为数据库适配器的例子，根据自己的需要进行修改。虽然它表明编写仅更新提交的列的动态更新非常简单；你不需要对表单数据做特殊的技巧。

回答by hoverbikes

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.

第一部分是正确的；您可以使用“value”属性预设输入字段的值，如第一个示例所示。这是非常常见的，也是网络工作方式的一个很好理解的部分。

The placeholder text, although it appears in the same place as the value, is nota 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.

您所描述的内容是可能的，使用 javascript。但这是奇怪的、意外的行为，并且可能会让用户感到困惑。在表单中预先填写值会向用户传达：“您可以更改此设置，但如果您不更改，将发送此内容。” 坚持既定的惯例通常是个好主意。

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.

也就是说，一种方法是使用 javascript。您可以隐藏所有“真实”输入字段，以便用户看不到预先填充的字段。然后，您可以拥有未命名的“虚拟”字段，这些字段被标记为对应于真实字段。当用户在其中一个虚拟字段中输入内容时，您可以使用脚本将值复制到其隐藏的伙伴，覆盖预设值。

Here is an example:

下面是一个例子：

HTML:

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:

或在纯 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.

此解决方案与后端无关，但正如 deceze 所建议的，这可能在服务器端处理得更好。

回答by Jukka K. Korpela

1. Yes, the valueattribute specifies an initial (default) value for an inputfield. (For a textarea, you would use the content of the element instead.) And yes, the placeholderattribute value is shown only when the field has no value assigned; it is supposed to be a hint of the expected input.

2. In order to set a value for a field invisibly, use type=hidden:

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

   However, the user then cannot change the value in any normal means. You can include an inputelement with the same nameattribute, too, but then you have the problem that the submitted data may contain two entries, and how can you decide which one of them is correct? Well, you can use different nameattributes, e.g.

   <input type='hidden' name='XYZ-default' value='<?php echo $record['XYZ']; ?>'>
   <input type='text' name='XYZ'>
   

   Then your form data processing just has to check whether XYZdata is present and if not, use XYZ-defaultdata instead.

   However, the goal sounds like poor usability. You are asking the user to input something, and it has a default value, but you are not telling the user what it is. So you might force the user to enter some data that you already have.

1. 是的，该value属性指定input字段的初始（默认）值。（对于 a textarea，您将改用元素的内容。）是的，placeholder仅当字段未分配值时才显示属性值；它应该是预期输入的提示。

2. 为了不可见地设置字段的值，请使用type=hidden：

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

   但是，用户随后无法以任何正常方式更改该值。您也可以包含input具有相同name属性的元素，但是您会遇到提交数据可能包含两个条目的问题，您如何确定其中哪一个是正确的？好吧，您可以使用不同的name属性，例如

   <input type='hidden' name='XYZ-default' value='<?php echo $record['XYZ']; ?>'>
   <input type='text' name='XYZ'>
   

   然后您的表单数据处理只需要检查XYZ数据是否存在，如果不存在，请改用XYZ-default数据。

   然而，这个目标听起来可用性很差。你要求用户输入一些东西，它有一个默认值，但你没有告诉用户它是什么。因此，您可能会强制用户输入一些您已有的数据。

回答by ???? ?????

you can use @ifwith two input like this:

您可以@if像这样使用两个输入：

if empty value show placeholder
else show value

回答by Ian

I would agree with deceze that the user would probably find it helpful to see the information they're submitting.

我同意 deceze 的观点，即用户可能会发现查看他们提交的信息很有帮助。

I'm currently working with jQuery and Javascript, not PHP, so while I don't know the capabilities of PHP and its associated tools, I do know that jQuery has a way of changing the value of the placeholder dynamically; I'd be very surprised if that was something that wasn't shared with the language and tools that you're using.

我目前正在使用 jQuery 和 Javascript，而不是 PHP，所以虽然我不知道 PHP 及其相关工具的功能，但我知道 jQuery 有一种动态更改占位符值的方法；如果您使用的语言和工具没有共享这些内容，我会感到非常惊讶。

Going along the lines of users seeing what they're submitting, you could always keep the placeholder up to date with what's being submitted. That way they could write over it if they wanted to change it, but still see what's going in if they don't. And if you can make it only update when the input tag's value is changed--rather than just replacing the placeholder with the back-end stored information every time--the extra resources it would use would be minimal as well. You'd also be able to reference the placeholder for the older values if you really wanted to keep things simple, like you've requested, but unless you're new or special circumstances are apparent, this is an inefficient way to do it.

按照用户查看他们提交的内容的方式，您可以始终使占位符与提交的内容保持同步。这样，如果他们想更改它，他们可以将其写下来，但如果他们不这样做，他们仍然会看到发生了什么。如果您可以让它仅在输入标签的值更改时更新——而不是每次都用后端存储的信息替换占位符——它使用的额外资源也将是最少的。如果您真的想让事情保持简单，就像您所要求的那样，您也可以引用旧值的占位符，但除非您是新手或特殊情况很明显，否则这是一种低效的方法。

This is of course a compromise from your asking for something the user wouldn't see. If you're set on old information being invisible, then this won't be helpful, but even though this is a couple years old I figured I'd throw the suggestion. After all, there may be some people coming here who are relatively new to these concepts that might find some use from it as well. I know it's something I would have appreciated.

这当然是您要求用户看不到的东西的妥协。如果您设置旧信息不可见，那么这将无济于事，但即使这是几年前我想我还是会提出建议。毕竟，可能会有一些人来到这里，他们对这些概念还比较陌生，但也可能会从中找到一些用处。我知道这是我会感激的。

Also, in a further response to your second question, there are now ways to add data to html elements that don't affect their performance or normal behavior. The link I found this with is for Javascript, but again, I would imagine crossing the language barrier would be relatively simple, especially with Google.

此外，在对您的第二个问题的进一步回答中，现在有一些方法可以将数据添加到不影响其性能或正常行为的 html 元素。我找到的链接是针对 Javascript 的，但同样，我认为跨越语言障碍会相对简单，尤其是使用 Google。

I believe this only works with HTML5, and not with XHTML. But hopefully it's helpful. Just keep in mind that having the data stored in the back-end (in your PHP code) will be faster than referencing these values back and forth. I believe that is mentioned in this link. I think that should only really matter for larger-scale projects, so if you're looking for efficiency this shouldn't be your first method of choice, but you may find yourself in a position where it's much simpler to take advantage of it.

我相信这只适用于 HTML5，而不适用于 XHTML。但希望它有帮助。请记住，将数据存储在后端（在您的 PHP 代码中）将比来回引用这些值更快。我相信在此链接中提到了这一点。我认为这应该只对更大规模的项目真正重要，所以如果您正在寻找效率，这不应该是您的首选方法，但您可能会发现自己处于一个更容易利用它的位置。

http://html5doctor.com/html5-custom-data-attributes/

http://html5doctor.com/html5-custom-data-attributes/