使用django脆脆表单建模自定义表单

Question

我遇到了这个问题，我想使用从互联网下载的模板中的django-crispy表单来建模字段的样式。

该领域如下所示：

​

​

本节的html是(显然使用bootstrap5 )：

<div class="form-group mb-4">
    <label for="id_username">Username</label>
    <div class="input-group">
        <span class="input-group-text" id="basic-addon1">
            <svg class="icon icon-xs text-gray-600" fill="currentColor" viewBox="0 0 
                20 20" xmlns="http://www.w3.org/2000/svg"> <g 
                transform="translate(0.000000,20.000000) scale(0.100000,-0.100000)" 
                fill-rule="evenodd" stroke="none"> <path d="M72 168 c-18 -18 -14 -56 
                7 -68 26 -14 50 -3 57 26 11 42 -34 72 -64 42z M48 59 c-34 -20 -17 
                -29 52 -29 39 0 70 4 70 10 0 26 -87 40 -122 19z"/></svg>
        </span>                 

        <input type="text" class="form-control" placeholder="admin" name="username" 
            id="id_username" autofocus required>

    </div>  
</div>

使用django-crispy forms，我尝试使用来自Layout()的crispy_forms.layout对其进行建模，并在django中使用forms.py中的表单类：

from django import forms
from django.utils.translation import gettext, gettext_lazy as _
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, MultiField, Fieldset, Submit, Div, HTML, Field, Row

class LoginForm(forms.Form):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper(self)
        self.helper.layout = Layout(
            Div(
                Div(
                    HTML('<span class="input-group-text" id="basic-addon1">'
                         '<svg class="icon icon-xs text-gray-600" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">'
                             '<g transform="translate(0.000000,20.000000) scale(0.100000,-0.100000)" fill-rule="evenodd" stroke="none">' 
                             '<path d="M72 168 c-18 -18 -14 -56 7 -68 26 -14 50 -3 57 26 11 42 -34 72 -64 42z M48 59 c-34 -20 -17 -29 52 -29 39 0 70 4 70 10 0 26 -87 40 -122 19z"/>'
                        '</svg>'
                        '</span>'
                    ),
                    Field('username',   css_class='form-control', placeholder='admin', autofocus=True, required=True),
                    css_class="input-group"
                ),
                css_class="form-group mb-4"
            ),
        )

    username = forms.CharField(label=_('Username'),)

看起来是这样的：

​

​

在从浏览器中检查html时：

<div class="form-group mb-4">
    <div class="input-group"> 
        <span class="input-group-text" id="basic-addon1">
            <!-- THAT SVG CODE -->
        </span> 
        <div id="div_id_username" class="control-group"> 
             <label for="id_username" class="control-label requiredField">
                    Username
                    <span class="asteriskField">*</span>
             </label> 
        ####==>#### <div class="controls">
             <input type="text" name="username" maxlength="150" class="form-control textinput textInput" placeholder="admin" autofocus="True" required="" id="id_username"> </div> </div> 
        ####==>#### </div>
    </div>
</div>

这里非常接近，但问题是，使用来自Field的crispy_forms.layout在<input>文本字段上添加了一个<div> .

你知道我能摆脱它吗？

显然，我可以使用HTML()从crispy_forms.layout在Layout()中复制和粘贴整个代码，但随后它就没有达到使用django窗体的目的。-我本可以从模板中呈现它，然后从request.POST中提取字段。

知道怎么解决这个问题吗？非常感谢。

Answer 1

通过创建一个名为template的input_field_only.html，我设法绕过了它。

{% load crispy_forms_field %}

<input type="{{ field.widget_type }}" class="form-control" placeholder="admin" name="{{ field.name }}" id="{{ field.id_for_label }}">

保存到templates目录。

然后在forms.py中，我将与LoginForm一起使用新的自定义模板

class InputFieldOnly(Field):
    template = '<APP_NAME>/templates/input_field_only.html'


class LoginForm(forms.Form):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper(self)
        self.helper.layout = Layout(
            Div(
                Div(
                    HTML('<span class="input-group-text" id="basic-addon1">'
                         '<svg class="icon icon-xs text-gray-600" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">'
                             '<g transform="translate(0.000000,20.000000) scale(0.100000,-0.100000)" fill-rule="evenodd" stroke="none">' 
                             '<path d="M72 168 c-18 -18 -14 -56 7 -68 26 -14 50 -3 57 26 11 42 -34 72 -64 42z M48 59 c-34 -20 -17 -29 52 -29 39 0 70 4 70 10 0 26 -87 40 -122 19z"/>'
                        '</svg>'
                        '</span>'
                    ),
                                        # Add InputFieldOnly
                    InputFieldOnly('username'),
                    css_class="input-group"
                ),
                css_class="form-group mb-4"
            ),
        )
    # Add the widget argument here
    username = forms.CharField(label=_('Username'),)

希望能对遇到同样问题的人有所帮助！