值与HTML中的占位符属性

问题描述：

我正在处理表单，并且有可能被用户填充或不填充的字段。为了简化后端逻辑，我计划从表单中获取所有数据，并使用它全部更新我的记录，而不管用户输入或输入的字段是什么。值与HTML中的占位符属性

我被告知（也许不正确），我可以采取数据库中当前存在的数据（即在页面加载时）并将其放入输入区域的'value'属性中。假设，这将使得如果用户没有向该字段输入任何内容，旧的/当前的值将被简单地传回服务器并重新输入（但未被更改）。

如果用户输入数据，那么这将成为新的价值。

因此，这将是这个样子：

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

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

第二个问题是我不希望在实际文本字段中显示此值。因此，我在输入标记中添加了一个占位符属性：

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

但value属性似乎覆盖占位符标记！

-2 - 所以第二个问题是，是否有指定的值，因为我想，而不是它出现在实际的文本字段？

答

好的，是的。 value属性定义“在输入字段中”。这是输入字段的值。有三种方式来影响这个值：输入字段，通过Javascript更改它，或通过HTML属性设置它。因此，如果您通过HTML属性预填充值，然后提交表单，那就是将值提交回服务器。
占位符是只要实际值为空就显示的值。这是为了向用户提供他们应该进入该领域的暗示;一旦用户输入了某些内容或者填充了该字段（请参阅上文），就不再需要占位符。

你必须决定你准备做什么。假设你有一个用户的个人资料页面，用户可以更新他们的信息，在这种情况下，我非常希望填写所有当前信息并能够更改它。我不想要空白字段，从可用性的角度来看它没有任何意义。

如果你确实想空白领域，只更新在用户已填充字段中的数据库信息，最有用的技术可能是简单地只更新那些用户填写字段：

// 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);

以上是假定PDO作为数据库适配器的示例，根据自己的需要对其进行更改。它表明尽管编写只更新提交的列的动态更新非常简单，你不需要用表单数据做特殊的技巧。

tnx求救！ – 2014-10-28 17:40:11

答

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

占位符文本虽然与数值出现在相同的位置，但是不是的值，而是的值。它永远不会提交，只有在没有价值的情况下才会显示。

你所描述的是可能的，使用JavaScript。但这是奇怪的，意想不到的行为，并可能让用户感到困惑。将预先填入表单的值传达给用户：“你可以改变这个，但是如果你不这样做的话，这将会被发送。”坚持既定惯例通常是一个好主意。

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

下面是一个例子：

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 
});

或在普通的JavaScript：

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

如果你去这条路线，你也可能想要保存e变量中的默认值，以便在键入内容时将其恢复到隐藏字段，然后将其清除。但是，除非你有充分的理由，否则这一切都是令人沮丧的！

该解决方案是后端不可知的，但正如欺骗暗示的那样，这可能更好地在服务器端处理。

tnx寻求帮助和建议！ – 2014-10-28 17:41:21

答

是的，value属性规定input字段的初始（缺省）值。（对于textarea，您可以改为使用元素的内容。）是的，placeholder属性值仅在字段没有赋值的情况下显示;它应该是预期输入的一个暗示。
为了设置一个值的字段不可见地，使用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数据代替。

但是，目标听起来像可怜的可用性。你要求用户输入一些东西，它有一个默认值，但你不告诉用户它是什么。所以你可能会强迫用户输入一些你已经拥有的数据。

感谢您的帮助！ – 2014-10-28 17:40:58

答

我同意欺骗用户可能会发现它有助于查看他们提交的信息。我目前正在使用jQuery和Javascript，而不是PHP，所以虽然我不知道PHP及其相关工具的功能，但我知道jQuery有一种动态改变占位符值的方法;如果那是没有与您使用的语言和工具共享的东西，我会非常惊讶。

按照用户的观点来看待他们提交的内容，您可以始终保持占位符与提交内容的最新状态。这样，如果他们想改变它，他们可以写下来，但如果他们不这样做，他们仍然会看到进展情况。如果您只能在输入标签的值发生更改时才进行更新，而不是每次都将后端存储的信息替换为占位符，那么它使用的额外资源也将最小化。如果你真的想保持简单，就像你所要求的那样，你也可以引用旧值的占位符，但除非你是新的或特殊情况，否则这是一种效率低下的方法。

这当然是一个妥协，从你要求的东西，用户不会看到。如果你的旧信息是隐形的，那么这将不会有帮助，但即使这已经有几年了，我想我会提出这个建议。毕竟，可能有一些来这里的人对这些概念相对陌生，也可能从中找到一些用处。我知道这是我会欣赏的。

此外，在对第二个问题的进一步回应中，现在有方法可以将数据添加到不影响其性能或正常行为的html元素。我发现这个链接是用于Javascript的，但我想再次想象穿越语言障碍会相对简单，特别是对于Google。

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

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

值与HTML中的占位符属性

相关推荐