用forms.py在django中呈现html表单

Question

我有django web应用程序和身份验证系统。我有用户注册视图、客户模型和

表单中的UserCreationForm。py:

class CustomerSignUpForm(UserCreationForm):
first_name = forms.CharField(required=True)
last_name = forms.CharField(required=True)
# phone_number = forms.CharField(required=True)
# location = forms.CharField(required=True)
class Meta(UserCreationForm.Meta):
model = User

@transaction.atomic
def save(self):
user = super().save(commit=False)
user.is_customer = True
user.first_name = self.cleaned_data.get('first_name')
user.last_name = self.cleaned_data.get('last_name')
print(user.last_name)
user.save()
customer = Customer.objects.create(user=user)
# customer.phone_number=self.cleaned_data.get('phone_number')
# customer.location=self.cleaned_data.get('location')
customer.save()
return user

我的型号如下：

...
first_name = models.CharField(max_length=100)
last_name = models.CharField(max_length=100)
phone_number = models.CharField(max_length=20)
location = models.CharField(max_length=20)

我在customer_register.html:中呈现表单

...
<section>
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card">
<div class="card-header text-black">
<h2>Register</h2>
</div>
<div class="card-body">
<form action="{% url 'customer_register' %}" method="POST" novalidate>
{% csrf_token %}
{% for field in form.visible_fields %}
<div class="form-group">
{{ field.label_tag }}
{% render_field field class="form-control" %}
{% for error in field.errors %}
<span style="color:red">{{ error }}</span>
{% endfor %}
{% endfor %}
</div>
</form>
</div>
</div>   
</div>
</div>
</div>
</div>
</section>
...

不过它看起来不是很漂亮。

我想做的是用新表单替换customer_register.html中的表单，在新表单中我不会使用widget_tweaks，而只使用html。

Answer 1

我对你所说的"；不会使用widget_tweaks，而只使用html">

---

但如果表单不漂亮，你可以自己渲染/放置表单字段，比如：

<form action="{% url 'customer_register' %}" method="POST" novalidate>
<div class="row justify-content-md-center">
<div class="col-md-3 col-md-auto text-center">
<b>First Name:<b>
{{ form.first_name }}
{% if 'first_name' in error %}
<div style='color:red'>{{error.first_name.0.message}}</div>
{% endif %}
</div>
<div class="col-md-3 col-md-auto text-center">
<b>Last Name:<b>
{{ form.last_name }}
{% if 'last_name' in error %}
<div style='color:red'>{{error.last_name.0.message}}</div>
{% endif %}
</div>
</div>
</form>

您也可以在Forms.py__init__函数中添加类，然后添加一些CSS使其看起来很漂亮(我认为这是Widget Tweaking，但我在您的原始形式中看不到它

class CustomerSignUpForm(UserCreationForm):
first_name = forms.CharField(required=True)
last_name = forms.CharField(required=True)
# phone_number = forms.CharField(required=True)
# location = forms.CharField(required=True)
def __init__(self,  *args, **kwargs):
super(CustomerSignUpForm, self).__init__(*args, **kwargs)
self.fields['first_name'].widget.attrs={'class': 'form-control'}
self.fields['last_name'].widget.attrs={'class': 'form-control'}

---

或者您可以直接自己创建HTML字段。。所有表单和后端关心的都是"name"属性-但是！你失去了Django所做的所有动态验证。。soooo我建议做第一个

<form action="{% url 'customer_register' %}" method="POST" novalidate>
<div class="row justify-content-md-center">
<div class="col-md-3 col-md-auto text-center">
<b>First Name:<b>
<input type="text" name="first_name" max_length="100" required class="form-control"></input>
{% if 'first_name' in error %}
<div style='color:red'>{{error.first_name.0.message}}</div>
{% endif %}
</div>
<div class="col-md-3 col-md-auto text-center">
<b>Last Name:<b>
<input type="text" name="last_name" max_length="100" required class="form-control"></input>
{% if 'last_name' in error %}
<div style='color:red'>{{error.last_name.0.message}}</div>
{% endif %}
</div>
</div>
</form>