使用Bootstrap和Django格式化表单的字段

jvidinwx 于 2023-08-08 发布在 Go

关注(0)|答案(1)|浏览(123)

我有一个由Django中的模型生成的表单，由文本区域，选择字段，切换字段等生成：

class Test(models.Model):
    workerID = models.CharField(max_length=200, blank=True, null=True)
    dashboardURL = models.URLField(blank=True)
    centralinaVecchia = models.BooleanField(default=False)

字符串
我已经用

class StartWorker(ModelForm):
    class Meta:
        model = Test
        fields = ('testTitle', 'testDescription', 'centralinaVecchia')
        labels = {
            "testTitle": _("Titolo"),
            "testDescription": _("Descrizione"),
            "centralinaVecchia": _("Centralina Vecchia?"),
        }

        widgets = {
            'testTitle': forms.TextInput(attrs={'class':'form-control'}),
            'testDescription': forms.Textarea(attrs={'class':'form-control'}),
            'centralinaVecchia': forms.CheckboxInput(attrs={'class':'form-check-input'}),

型
问题是，如果每个字段的格式都是正确的，一个在另一个下面，那么复选框的位置就很奇怪了（见屏幕截图）

的数据
我无法将它的样式设置为表单的其他部分。根据documentation，我需要在<div class="form-check"></div>中添加复选框，但我不知道如何在Django中完成
该模板简单如

<form method="post">
  {% csrf_token %} {{ form }}
    <button class="btn btn-primary" type="submit" value="Submit">
      Submit
    </button>
</form>

型

django

来源：https://stackoverflow.com/questions/76825883/formatting-forms-field-with-boostrap-and-django

1条答案

按热度按时间

llew8vvj1#

试试这个代码

forms.py

class StartWorker(forms.ModelForm):

    class Meta:
        model = Test
        fields = "__all__"
        labels = {
            "workerID":"Worker",
            "dashboardURL":"Dashboard Url",
            "centralinaVecchia":"Centralina Vecchia?",
        }

        widgets = {
            'workerID': forms.TextInput(attrs={'class':'form-control'}),
            'dashboardURL': forms.Textarea(attrs={'class':'form-control'}),
            'centralinaVecchia': forms.CheckboxInput(attrs={'class':'form-check-input'}),}

字符串

Html代码

<div class="container p-5">
  <div class="row mx-auto">
    <div class="mb-3">
      <label  class="form-label">{{form.workerID.label_tag}}</label>
      {{form.workerID}}
    </div>
    <div class="mb-3">
      <label  class="form-label">{{form.dashboardURL.label_tag}}</label>
      {{form.dashboardURL}}
    </div>
    <div class="mb-3 form-check">
      <label  class="form-label">{{form.centralinaVecchia.label_tag}}</label>
      {{form.centralinaVecchia}}
    </div>
  </div>
</div>

型

浏览器输出

的数据

赞(0）回复(0）举报 2023-08-08

我来回答

使用Bootstrap和Django格式化表单的字段

1条答案

forms.py

Html代码

浏览器输出

相关问题

热门标签

最新问答