使用Django ModelForm时标记必填字段的标签

时间:2018-07-16 20:37:59

标签: css django django-models django-forms django-templates

在使用Django管理表单创建新对象或修改现有对象时,强制性模型字段的<label>标签使用类属性required声明,例如

<div>
  <label class="required" for="id_title">Title:</label>
  <input class="vTextField" id="id_title" maxlength="255" name="title" type="text" required />
  <p class="help">A title for this tool</p>
</div>

但是,使用Django ModelForm并非如此。以下代码段在模板文件中生成的HTML代码

<table>
{{ toolForm.as_table }}
</table>

<label>标记没有任何类属性,这将有助于为所需字段的适当标签设置样式:

<table>
<tr>
<th>
  <label for="id_title">Title:</label>
</th>
<td>
  <input id="id_title" maxlength="255" name="title" type="text" required />
  <br /><span class="helptext">A title for this tool</span>
</td>
</tr>
</table>

有什么想法可以有效地标记必填字段的标签吗?

1 个答案:

答案 0 :(得分:0)

在Ralf暗示xj9 here所描述的类似问题之后,以下解决方案对我来说很好:

<table>
{% for field in toolForm %}
  <tr>
    <th>
        <label class="field-label{% if field.field.required %} field-required{% endif %}" for="{{ field.name }}">{{ field.label }}</label>
    </th>
    <td>
        {% if field.errors %}<span class="field-error">{{ field.errors }}</span>{% endif %}
        {{ field }}<br/>
        {% if field.help_text %}<span class="field-helptext">{{ field.help_text|safe }}</span>{% endif %}
    </td>
  </tr>
{% endfor %}
</table>

相应的CSS还会在所需的字段名称旁边添加一个'*'符号:

.field-label {
    font-weight: normal;
}
.field-helptext {
    font-size: 12px;
}
.field-error {
    font-size: 14px;
    color: red;
}
.field-required {
    font-weight: bold;
}
.field-required:after {
    content: " *";
}