[英]Styling forms using Django and Bootstrap
Okay, so I've created a simple purchase form which makes use of some custom form fields. 好的,所以我创建了一个简单的购买表单,它使用了一些自定义表单字段。 I've rendered a simple form to test if it works properly, and it does, as shown below. 我已经渲染了一个简单的表单来测试它是否正常工作,它确实如下所示。
<form id="category_form" method="post" action="/purchase/">
{% csrf_token %}
{% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}
{% for field in form.visible_fields %}
{{ field.errors }}
{{ field.help_text }}
{{ field }}
{% endfor %}
<input type="submit" name="submit" value="Make purchase" />
</form>
Now, I wish to style it to Bootstrap 3. I've managed to style it with no problems using the django widget tweaks package. 现在,我希望将它设置为Bootstrap 3.我已经设法使用django widget tweaks包没有任何问题。 However, when I submit the form, I get this error 'NoneType' object has no attribute 'replace'
I've tried it without the widget tweaks and I still get the same error. 但是,当我提交表单时,我收到此错误'NoneType' object has no attribute 'replace'
我尝试过没有小部件调整,我仍然得到相同的错误。
Any ideas why this may be the case? 任何想法为什么会出现这种情况? The original form works fine unstyled, but as soon as I style it I get the above error. 原始表单工作得很好,没有样式,但一旦我设计它我得到上述错误。 Now if my understanding is correct, Django takes one field and styles corresponding fields the same, but, some of my field types are different. 现在,如果我的理解是正确的,Django将一个字段和相应字段的样式相同,但是,我的一些字段类型是不同的。 ie dropdowns and text boxes, which can't be styled the same way. 即下拉列表和文本框,不能以相同的方式设置样式。 I'm not sure what the best way around this is. 我不确定这是最好的方法。
views.py views.py
def checkout(request):
if request.method == 'POST':
form = PurchaseForm(request.POST)
if form.is_valid():
form.save(commit=True)
return index(request) # Change this to point to the confirmation page
else:
print (form.errors)
else:
form = PurchaseForm()
return render(request, 'ticket/checkout.html', {'form': form})
checkout.html checkout.html
<form class="form-horizontal" method="post" action="/cart/checkout/">
{% csrf_token %}
<fieldset>
<!-- Form Name -->
<legend>Card Details</legend>
<!-- Select Basic -->
<div class="form-group">
<label class="col-sm-3 control-label" for="card-type">{{ form.payment_type.help_text }}</label>
<div class="col-sm-9">
{{ form.payment_type|attr:"id:card-type"|attr:"name:card-type"|attr:"class:form-control" }}
{{ form.error }}
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-3 control-label" for="card-name">{{ form.card_name.help_text }}</label>
<div class="col-sm-9">
{{ form.card_name|attr:"id:card-name"|attr:"name:card-name"|attr:"type:text"|attr:"placeholder:Card Holder's Name"|attr:"class:form-control input-md"|attr:"required:"}}
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-3 control-label" for="card-number">{{ form.card_number.help_text }}</label>
<div class="col-sm-9">
{{ form.card_number|attr:"id:card-number"|attr:"name:card-number"|attr:"type:text"|attr:"placeholder:Credit / Debit card number"|attr:"class:form-control input-md"|attr:"required:"}}
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-sm-3 control-label" for="expiry-date">{{ form.expiry_date.help_text }}</label>
<div class="col-sm-4">
{{ form.expiry_date|attr:"id:expiry-date"|attr:"name:expiry-date"|attr:"class:form-control col-sm-4" }}
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-3 control-label" for="cvv-number">{{ form.security_code.help_text }}</label>
<div class="col-sm-9">
{{ form.security_code|attr:"id:cvv-number"|attr:"name:cvv-number"|attr:"type:text"|attr:"placeholder:Security Code"|attr:"class:form-control input-md"|attr:"required:"}}
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="date">{{ form.date.help_text }}</label>
<div class="col-sm-9">
{{ form.date|attr:"id:date"|attr:"name:date"|attr:"class:form-control input-md"|attr:"required:"}}
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="Purchase"></label>
<div class="col-md-8">
<button id="Purchase" name="Purchase" class="btn btn-success">Purchase</button>
<a href="javascript:history.go(-1)"><button id="Cancel" name="Cancel" class="btn btn-inverse">Cancel</button></a>
</div>
</div>
</fieldset>
I am not sure whether I understand your question correctly. 我不确定我是否正确理解你的问题。 However I noticed that 1. there seems no tag in your form. 但是我注意到1.表单中似乎没有标记。 2. maybe you can use plain html instead of other tag( {{ form.security_code|attr:"id:cvv-number"|attr:"name:cvv-number" ****}} ), such as 3. to validate form, you may try to write something like : {% if form.password.errors %} {% for error in form.password.errors %} {{ error}} {% endfor %} {% endif %} 2.也许你可以使用普通的html代替其他标签({{form.security_code | attr:“id:cvv-number”| attr:“name:cvv-number”****}}),例如3。要验证表单,您可以尝试编写如下内容:{%if form.password.errors%} {%for form in error.password.errors%} {{error}} {%endfor%} {%endif%}
Hope you figure out this problem as soon as possible. 希望你尽快弄清楚这个问题。
I would suggest using the python package django-bootstrap3 to style your forms. 我建议使用python包django-bootstrap3来设置表单样式。 It can be found at https://github.com/dyve/django-bootstrap3 它可以在https://github.com/dyve/django-bootstrap3找到
Hope this helps! 希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.