HTML中的值与占位符属性

时间:2014-10-28 00:59:07

标签: html input

我正在处理表单,并且具有可能由用户填写或未填写的字段。为了保持后端逻辑简单,我计划从表单中获取所有数据并使用所有数据更新我的记录,无论用户输入的字段是什么。

我被告知(可能不正确)我可以获取当前存在于数据库中的数据(即,在页面加载时)并将其放入输入区域的'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 - 所以第二个问题是,无论如何要分配我想要的值而不是它出现在实际的文本字段中?

6 个答案:

答案 0 :(得分:4)

  1. 嗯,是的。 value属性定义输入字段中的&#34;&#34;。它是输入字段的。有三种方法可以影响此值:键入字段,通过Javascript更改,或通过HTML属性设置。因此,如果您通过HTML属性预先填充值,然后提交表单,则该值将提交回您的服务器。

  2. 只要实际值为空,占位符就是显示的值。它是为了向用户提供他们应该进入该领域的提示;一旦用户输入了某些内容或者填充了该字段(参见上文),就不再需要占位符。

  3. 你必须决定你是在做什么,并试图做到。假设您有一个用户可以更新其信息的用户个人资料页面,在这种情况下,我非常希望填写所有当前信息并能够更改它。我不想要空白领域,从可用性的角度来看,它没有任何意义。

    如果您确实需要空白字段并且只更新用户在字段中填写的数据库中的信息,那么最有用的技术可能只是更新用户填写的字段:

    // 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作为数据库适配器的示例,根据您自己的需要进行更改。它表明,编写仅更新已提​​交列的动态更新非常简单;你不需要对表单数据做一些特殊的技巧。

答案 1 :(得分:3)

第一部分是正确的;您可以使用&#34;值&#34;预设输入字段的值。属性,如第一个示例中所示。它是非常常见的,是网络运作方式的一个很好理解的部分。

占位符文本虽然与值显示在同一位置,但不是值。它永远不会被提交,只有在没有价值的情况下才会显示。

您可以使用javascript描述的内容。但这是奇怪的,意外的行为,并可能使用户感到困惑。将表格中预先填写的值传达给用户:&#34;您可以对此进行更改,但如果您不这样做,则会发送此消息。&#34;坚持既定惯例通常是一个好主意。

那就是说,一种方法是使用javascript。你可以拥有所有的&#34;真实&#34;输入字段隐藏,以便您的预填充字段对用户不可见。然后,你可以有一个未命名的“假”&#39;字段,标记为对应真实字段。当用户在其中一个虚拟字段中输入内容时,您可以使用脚本将值复制到其隐藏的伙伴,覆盖预设值。

以下是一个例子:

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

如果您使用此路线,您可能还希望将默认值存储在变量中,以便在键入内容时将其恢复到隐藏字段,然后将其清除。但是,除非你有充分的理由,否则所有这一切都是强烈的劝阻!

此解决方案与后端无关,但正如deceze所暗示的那样,这可能在服务器端更好地处理。

答案 2 :(得分:2)

  1. 是的,value属性指定input字段的初始(默认)值。 (对于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数据。

    然而,目标听起来像是可用性差。您要求用户输入内容,并且它具有默认值,但您没有告诉用户它是什么。因此,您可能会强制用户输入您已有的一些数据。

答案 3 :(得分:1)

您可以将isChecked()与两个输入一起使用,例如:

@if

答案 4 :(得分:0)

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

我目前正在使用jQuery和Javascript,而不是PHP,所以虽然我不了解PHP及其相关工具的功能,但我知道jQuery有一种方法可以改变它的价值。占位符动态;如果那些与您正在使用的语言和工具共享的东西,我会感到非常惊讶。

根据用户查看他们提交的内容,您可以始终使占位符与提交的内容保持同步。这样,如果他们想改变它,他们就可以写出来,但如果他们不这样做,他们仍然可以看到进入的情况。如果你只能在输入标签值改变时更新它 - 而不是每次都用后端存储的信息替换占位符 - 它将使用的额外资源也是最小的。如果您真的希望保持简单,例如您所要求的,那么您也可以引用旧版本的占位符,但除非您有新的或特殊情况,否则这是一个效率低下的方法。

这当然是对你要求用户不会看到的东西的妥协。如果您将旧信息设置为隐形,那么这将不会有所帮助,但即使这已经有几年了,我还是认为我会抛出这个建议。毕竟,可能有些人来到这里对这些概念相对较新,可能也会从中找到一些用处。我知道这是我会赞赏的。

此外,在对第二个问题的进一步回答中,现在有办法将数据添加到不会影响其性能或正常行为的html元素。我发现这个链接是为了Javascript,但我再次想象,跨越语言障碍会相对简单,特别是对谷歌来说。

我相信这只适用于HTML5,而不适用于XHTML。但希望它有所帮助。请记住,将数据存储在后端(在PHP代码中)将比来回引用这些值更快。我相信在这个链接中提到了这一点。我认为这应该只适用于大型项目,所以如果你正在寻找效率,这不应该是你选择的第一种方法,但你可能会发现自己处于这样一个位置:更容易利用它。

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

答案 5 :(得分:0)

  • 对项目符号使用减号
  • 或加号
  • 或星号
  1. 编号列表很容易
  2. Markdown 跟踪 给你的数字
  3. 所以这将是第 3 项。