使用Django和Bootstrap创建表单

Question

好的，所以我创建了一个简单的购买表单，它使用了一些自定义表单字段。 我已经渲染了一个简单的表单来测试它是否正常工作，它确实如下所示。

<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>

现在，我希望将它设置为Bootstrap 3.我已经设法使用django widget tweaks包没有任何问题。 但是，当我提交表单时，我收到此错误'NoneType' object has no attribute 'replace'我尝试过没有小部件调整，我仍然得到相同的错误。

任何想法为什么会出现这种情况？ 原始表单工作得很好，没有样式，但一旦我设计它我得到上述错误。 现在，如果我的理解是正确的，Django将一个字段和相应字段的样式相同，但是，我的一些字段类型是不同的。 即下拉列表和文本框，不能以相同的方式设置样式。 我不确定这是最好的方法。

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

<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>

Answer 1

我不确定我是否正确理解你的问题。 但是我注意到1.表单中似乎没有标记。 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％}

希望你尽快弄清楚这个问题。

Answer 2

我建议使用python包django-bootstrap3来设置表单样式。 它可以在https://github.com/dyve/django-bootstrap3找到

希望这可以帮助！