如何为 django 表单自定义 html答案

【问题标题】：how to customize html for django form如何为 django 表单自定义 html
【发布时间】：2014-07-07 08:10:14
【问题描述】：

我正在为我的网站使用 html 模板，并希望将信息收集到我的 django 后端。具体来说，我想从这部分代码中返回电子邮件地址的值

<input type="text" placeholder="Email" value="" style="height: 30px; width: 250px; border: 2px solid grey; padding: 7px; margin-top: 10px; margin-bottom: 10px; font-size: 20px;">

如果我将{{%form.email%}} 放入value=""，它将在框内写入<input id=，在框外写入">。

如果我把{{%form.email%}放在这部分html代码后面，它会生成另一个框。但我只想用这个盒子。

我该怎么做？

【问题讨论】：

您想在表单域上自定义什么？ HttpResponseRedirect('/thanks/')?
我不想在HttpResponseRedirect('/thanks/') 上自定义任何内容。这是另一个问题，我的错。我想自定义创建我想要的框样式的 html 代码，我可以从中将用户生成的值返回到后端表单。

标签： javascript jquery html css django

【解决方案1】：

通常您希望使用 Django-Form 类生成一个字段。在那里您还可以自定义整个字段：对于您的示例，您必须在 forms.py 中创建一个这样的类

class EmailForm(forms.Form)
    email  = forms.CharField(widget=forms.EmailInput(attrs={'class': 'email-input',
                                                            'placeholder': 'Email'})

你也可以使用

{'style': 'height: 30px; width: 250px; border: 2px solid grey; padding: 7px; margin-top: 10px; margin-bottom: 10px; font-size: 20px;'}

而不是 {'class': 'email-input'} 适合您的风格，但通常最好使用 css 类。

您班级中的 email 基本上是您的整个电子邮件字段，但它会自动生成名称和 ID，因此更易于使用。

现在，如果您想要后端字段的值，您必须执行 GET 或 POST 请求（我认为在这种情况下是 POST）。您将通过在要处理接收到的数据的方法中使用以下模式来获得该值：（有效但不是最佳）field_value = request.POST.get('fieldname') 甚至更好，正如丹尼尔在field_value = form.cleaned_data['fieldname'] 中指出的那样。

所以在你的情况下，它会是这样的：email = form.cleaned_data['email']。这将返回输入到字段中的值以供以后后端使用。

【讨论】：

在最后两段之前你做得很好。表单的要点是您应该使用它通过form.cleaned_data['fieldname']在验证后访问发布的数据，而不是直接访问request.POST数据。
非常感谢你们！它确实适用于我的测试页面 - 但不适用于真实页面。我认为代码基本相同，但我不知道为什么我的真实页面上的代码无法将值存储到数据库中。
测试页面代码如下：<form action="/users/presignup/" method="POST"> {% csrf_token %} {{ form.non_field_errors }} <div class="fieldWrapper"> {{ form.email.errors }} <label for="id_email">Your email:</label> <input name="email" type="text" value=""> </div> <p><input type="submit" value="Send message" /></p>
真实页面代码如下：<div class="register-wrap"> <form action="" method="POST"> {% csrf_token %} {{ form.non_field_errors }} <div class="form"> {{ form.email.errors }} <input name="email" type="text" placeholder="Email" value="" style="height: 30px; width: 250px; border: 2px solid grey; padding: 7px; margin-top: 10px; margin-bottom: 10px; font-size: 20px;"> <input type="submit" value="Learn More" class="button3"> </div> </form> </div>
在视图方面，它已按照您所说的方式进行了更正：email=form.cleaned_data['email']，正如我所说，它适用于测试页面