python - 带有 HTML 表单的 Django

Question

我知道如何设置 Django 表单以让 Django 呈现它们。不幸的是，造型形式变得不太直接。我有兴趣找到一种方法让 HTML 表单将其输入的值传递给 Django。 HTML 表单完全用 HTML 和 CSS 编程。仅供引用，请在下面找到我因多种原因而放弃的解决方案列表:

• 设置自定义模板过滤器 ( CSS styling in Django forms )
• 使用 for 循环来循环遍历每个表单并依次渲染每个字段 ( How to style a django form - bootstrap )
• 使用列表项直接引用表单字段https://stackoverflow.com/posts/5930179/revisions

我对前两个解决方案的问题是，我的表单中的 s 依赖于类属性，这些属性将它们分配到左列或右列(col_half 和 col_half col_last)。

第三个不太适合我，因为我的表单没有使用列表项。如果我碰巧将表单转换为列表项，则会在表单字段中添加一个奇怪的边框(请参见下面的屏幕截图)。

因此，我想知道是否有一种方法可以保留我的 HTML 模板并将其值一一分配给 forms.py 而不会得到这个奇怪的边框(理想情况下我想坚持我的输入标签) ？任何广告建议将不胜感激。

请参阅下面的 HTML 表单:

<form id="register-form" name="register-form" class="nobottommargin" action="#" method="post">
      <div class="col_half">
        <label for="register-form-name">First Name:</label>
        <input type="text" id="register-form-name" name="register-form-name" value="" class="form-control"/>
      </div>
  
      <div class="col_half col_last">
        <label for="register-form-name">Last Name:</label>
	    <input type="text" id="register-form-name" name="register-form-name" value="" class="form-control" />
      </div>
  
      <div class="col_half">
        <label for="register-form-email">Email Address:</label>
        <input type="text" id="register-form-email" name="register-form-email" value="" class="form-control" />
      </div>
  
      <!-- <div class="clear"></div> -->
  
      <div class="col_half col_last">
        <label for="register-form-username">Choose a Username:</label>
        <input type="text" id="register-form-username" name="register-form-username" value="" class="form-control" />
      </div>
  
      <div class="col_half">
        <label for="register-form-phone">Phone:</label>
        <input type="text" id="register-form-phone" name="register-form-phone" value="" class="form-control" />
      </div>
  
      <!--<div class="clear"></div> -->
  
      <div class="col_half col_last">
        <label for="register-form-phone">Country</label>
	    <input type="text" id="register-form-phone" name="register-form-phone" value="" class="form-control" />
      </div>
  
      <div class="col_half">
        <label for="register-form-password">Choose Password:</label>
        <input type="password" id="register-form-password" name="register-form-password" value="" class="form-control" />
      </div>
  
      <div class="col_half col_last">
        <label for="register-form-repassword">Re-enter Password:</label>
        <input type="password" id="register-form-repassword" name="register-form-repassword" value="" class="form-control" />
      </div>
  
      <div class="clear"></div>
  
      <div class="col_full nobottommargin">
        <button class="button button-3d button-black nomargin" id="register-form-submit" name="register-form-submit" value="register">Register Now</button>
      </div>

</form>

Answer 1

好吧，我明白了。

诀窍是要意识到 Django 已经将其表单标签(即 {{form.firstName}})渲染到输入标签。然后，我们可以在定义此表单的 forms.py 中向此标记添加类属性:

HTML:

<form id="register-form" name="register-form" class="nobottommargin" action="#" method="post">
     <div class="col_half">
       <label for="register-form-name">First Name:</label>
       {{ form.firstName }}
     </div>
</form>

FORMS.PY:

class newUserRegistration(forms.Form):
firstName = forms.CharField(widget=forms.TextInput(attrs={'type': 'text', 'id':'register-form-name', 'name':'register-form-name', 'value':"", 'class':'form-control'}))

class Meta:
    # specify model to be used
    model = model_name
    exclude = ()

HTML 呈现如下

<form id="register-form" name="register-form" class="nobottommargin" action="#" method="post">
      <div class="col_half">
        <label for="register-form-name">First Name:</label>
        <input type="text" id="register-form-name" name="register-form-name" value="" class="form-control" />
      </div>
</form>

通过向 forms.py 添加属性，我们实质上是将输入标记渲染到 HTML 中。