Django 表单输入字段样式

Posted 2023-02-24

【中文标题】Django 表单输入字段样式

【英文标题】：Django form input field styling

【发布时间】：2016-06-25 21:14:17

【问题描述】：

我已经重新定义了联系我们页面的表单，这是标准的 django-form 内容，但我很难理解如何在 <inpout> 字段中编写描述。

确切地说，我想在<input> 字段中写Name，那么我该怎么做。我将<input> 字段定义为 form.name ，那么我该如何定义它更像<input type="name" class="form-control" id="id_name" placeholder="Your Name">。

   <div class="col-xs-12 col-sm-12 col-md-4 col-md-offset-2 col-lg-4">
       % if form.errors %
           <p style="color: red">
               Please correct the error form.errors|pluralize  below.
           </p>
       % endif %

            <form class="form-horizontal" action="." method="POST">
                % csrf_token %
                <div class="field form-group">
                     form.name.errors                         
                    <label for="id_name" class="control-label"></label>
                    <div class="col-sm-10">    
                        form.name
                    </div>
                </div>
                <div class="field form-group">
                     form.email.errors                         
                    <label for="id_email" class="control-label"></label>
                    <div class="col-sm-10">
                         form.email 
                    </div>
                </div>
                <div class="field form-group">
                     form.phone_number.errors                         
                    <label for="id_phone_number" class="control-label"></label>
                    <div class="col-sm-10">
                         form.phone_number 
                    </div>
                </div>
                <div class="field form-group">
                     form.message.errors                         
                    <label for="id_message" class="control-label"></label>
                    <div class="col-sm-10">
                         form.message 
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12">
                        <input type="submit" class="btn btn-primary btn-block" value="Submit"></button>
                    </div>
                </div>
            </form>
          </div><!--/end form colon -->

【问题讨论】：

This question 应该会有所帮助。

您也可以在脚本中使用样式：$('#id_form.message').addClass()

【参考方案1】：

If you want to modify the placeholder text, or other values of the field Django creates, it can be done in the form code using the widget's attrs:

class MyForm(forms.Form):
    name = forms.CharField(
        widget=forms.TextInput(
            attrs=
                'class': 'my-class',
                'placeholder': 'Name goes here',
            ))

如果您打算将所有代码保留在模板中，您将不得不手动创建每个输入字段，而不是使用 Django 呈现的那些。 You can still access the values of the generated field in the template to help you do that though.

<input name=" form.name.name " type="text" placeholder="Name field">

【讨论】：

这是一个很好的例子，我在文档中错过了这个，但我希望 placeholder 住在 django-templates 里面而不是 django-forms。