带有 HTML 表单的 Django

Posted 2023-02-24

【中文标题】带有 HTML 表单的 Django

【英文标题】：Django with HTML Forms

【发布时间】：2017-01-04 02:54:58

【问题描述】：

我知道如何设置 Django 表单以让 Django 呈现它们。不幸的是，造型形式变得不那么直接了。我有兴趣找到一种方法让 html 表单将其输入的值传递给 Django。 HTML 表单完全用 HTML 和 CSS 编写。仅出于上下文考虑，请在下面找到我出于多种原因而拒绝的解决方案列表：

设置自定义模板过滤器 (CSS styling in Django forms) 使用 for 循环来循环遍历每个表单并依次呈现每个字段 (How to style a django form - bootstrap) 使用列表项https://***.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>

【参考方案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'))

这会将 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 中。