input标签placeholder属性在浏览器显示为None的问题求解

看起来你碰到的问题是因为模板变量返回了None，浏览器直接把这个值渲染成了placeholder的文本。咱们一步步来解决：

问题根源 #

当你的表单处于未绑定状态（比如第一次加载页面、还没提交过），或者表单字段从未填入过值时，{{ form.first_name.value }}这类模板变量会返回None。如果你的placeholder属性误用了这类变量，就会出现浏览器显示None的情况。

另外注意你示例代码里的一个小错误：第二个input的value用了{{ form.first_name.value }}，应该改成{{ form.last_name.value }}，虽然这不是placeholder的问题，但会导致 lastName 字段错误显示 firstName 的值，记得修正。

解决方案 #

根据你的需求，有几种处理方式：

1. 使用固定的占位符文本（最常用） #

如果你只是想给用户一个固定的提示（比如"输入你的名字"），直接把placeholder写成字符串，不要用模板变量：

<div class="form-group">
  <label for="firstname" class="col-sm-1 control-label">FirstName</label>
  <div class="col-sm-11">
    <input type="text" class="form-control" id="firstname" value="{{ form.first_name.value|default:'' }}" name="first_name" placeholder="Enter your first name">
  </div>
</div>
<div class="form-group">
  <label for="lastname" class="col-sm-1 control-label">Lastname</label>
  <div class="col-sm-11">
    <input type="text" class="form-control" id="lastname" name="last_name" value="{{ form.last_name.value|default:'' }}" placeholder="Enter your last name">
  </div>
</div>

这里给value加了|default:''，是为了避免value字段显示None，让输入框保持空白。

2. 使用表单字段的内置提示文本 #

如果你想复用表单类里定义的提示（比如help_text），可以直接调用表单字段的属性，这样即使字段没有值，提示文本也是固定的：
首先在你的表单类里定义help_text：

from django import forms

class YourForm(forms.Form):
    first_name = forms.CharField(label="First Name", help_text="Enter your given name")
    last_name = forms.CharField(label="Last Name", help_text="Enter your family name")

然后模板里这样写：

<input type="text" class="form-control" id="firstname" value="{{ form.first_name.value|default:'' }}" name="first_name" placeholder="{{ form.first_name.help_text }}">

3. 当字段有值时用value，无值时显示自定义提示 #

如果你确实需要在字段有值时用value作为placeholder（不太常见，但也有场景），可以用default_if_none过滤器，只在变量是None时替换成自定义文本：

placeholder="{{ form.first_name.value|default_if_none:'first_name' }}"

这个过滤器只会在变量严格等于None时生效；如果想覆盖空字符串的情况，就用default过滤器：

placeholder="{{ form.first_name.value|default:'first_name' }}"

这样调整后，placeholder就不会再显示None啦。

内容的提问来源于stack exchange，提问作者Wizard