Question

我需要用户在我的django应用程序中将数据输入到表单中。我目前正在这样做：

forms.py :(使用模型表格）

@Autowired

这是我的models.py：

class BabysittingForm(forms.ModelForm):
    class Meta:
        model = models.Babysitting
        fields = [
            'title',
            'pay',
            'start_date',
            'end_date',
            'num_children',
            'babysitting_address',
            'babysitting_day_of_week',
            'babysitting_start_time_of_day',
            'babysitting_session_length_hours',
            'description',
        ]

这是我的布局：

class Job(models.Model):
    employer = models.ForeignKey(settings.AUTH_USER_MODEL, related_name="jobs")
    hired_user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, null=True)
    created_at = models.DateTimeField(auto_now_add=True)

    start_date = models.DateTimeField(default=datetime.now())
    end_date = models.DateTimeField(default=datetime.now())
    location = models.CharField(default="None", max_length=40)

    title = models.CharField(max_length=30)
    description = models.TextField()
    category = models.CharField(max_length=3, choices=JOB_CATEGORY_CHOICES)

    pay = models.FloatField()
    hourly_pay = models.BooleanField(default=True)

    complete = models.BooleanField(default=False)

    def __str__(self):
        return self.title

    def get_absolute_url(self):
        return reverse('jobs:detail', kwargs={
            'job_pk': self.id
            }
        )

class Babysitting(Job):
    num_children = models.PositiveSmallIntegerField()
    babysitting_address = models.CharField(default="None", max_length=40)
    babysitting_day_of_week = models.CharField(max_length=2, choices=DAYS_OF_WEEK_CHOICES)
    babysitting_start_time_of_day = models.CharField(max_length=8)
    babysitting_session_length_hours = models.FloatField()

我需要将付款表单字段的外观更改为：

我知道如何以这种方式设置样式，但我不知道如何更改表单模板来执行此操作。

如何在django中自定义单个表单的外观？

抱歉，我应该更具体一点，我想用这个html（bootstrap）替换其中一个表单字段：

{% extends 'layout.html' %}
{% load bootstrap3 %}

{% block title %}{{ form.instance.title|default:"New Job" }}{% endblock %}

{% block content %}
    <div class="container">
        <h1>{{ form.instance.title|default:"New Job" }}</h1>

        <form action="" method="POST">
            {% bootstrap_form form %}
            {% csrf_token %}
            <input type="submit" value="Post Job" class="btn btn-default"/>
        </form>
    </div>

{% endblock %}

谢谢。

Answer 1

也许你可以使用django-widget-tweaks

如果您需要自定义字段类，可以逐个渲染并向每个字段添加一个类

即在你的模板中

{% extends 'layout.html' %}
{% load bootstrap3 %}
{% load widget_tweaks %}

{% block title %}{{ form.instance.title|default:"New Job" }}{% endblock %}

{% block content %}
    <div class="container">
        <h1>{{ form.instance.title|default:"New Job" }}</h1>

        <form action="" method="POST">
            {% csrf_token %}
            <!-- ie field 1 -->
            {% render_field form.field1 class+="form-control other_class" %}
            <input type="submit" value="Post Job" class="btn btn-default"/>
        </form>
    </div>

{% endblock %}

有关django-widget-tweaks here

的文档

Answer 2

如果您想使用自定义CSS类，ID等设置表单样式，则应覆盖表单widget类的Meta class属性。有关详情，请参阅overriding the default fields。

示例：

#  forms.py

from django.forms import ModelForm
from .models import Babysitting

class BabysittingForm(forms.ModelForm):
    class Meta:
        model = Babysitting
        fields = [...]  # as is
        widgets = {
            # add here any css classes or attributes per field (on the specific widget)
            'title': forms.TextInput(attrs={'class': 'custom-class', 'id': 'custom-id',}),
            'pay': forms.NumberInput(attrs={'class': 'another-class', 'id': 'another-id',}),
        }

如何在表单中自定义一个表单字段的html？

2 个答案: