在保持 HTML 样式的同时编写 Django 表单
Writing a Django Form while keeping HTML styling
我有一个手动创建的 Django 表单,以保持样式的格式,但我意识到该表单受到多个输入的影响,手动更改每个输入的时间太长。
我也可以使用 {{ form.as_p }}
自动生成表单,但我丢失了下面的 HTML 样式格式。有没有一种简单的方法可以代替手动更改每个输入?
这是我要保留的原始 HTML 模板
</button>
<div class="form-outline mb-4">
<input
type="text"
id="businessName"
class="form-control"
name="businessName"
/>
<label class="form-label" for="typeText"
>Legal Business Name</label>
</div>
这是工作的 Django 表单:
{% if submitted %}
Your forms has been submitted
{% else %}
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<!-- Submit button -->
<button
type="submit"
class="btn btn-primary btn-block mb-4"
id="btn"
>
Submit
</button>
</form>
这是views.py
def add_form(request):
submitted=False
if request.method == 'POST':
form = infoForm(request.POST)
if form.is_valid():
form.save()
return HttpResponseRedirect('/?submitted=True')
else:
form = infoForm()
if 'submitted' in request.GET:
submitted=True
return render(request, 'template/template.html',{'form':form, 'submitted':submitted})
这是表格
class infoForm(ModelForm):
class Meta:
model = Info
fields = ['businessName']
这是我尝试过的:
<div class="form-outline mb-4">
<input type="text" class="form-control" name="businessName" {% if form.is_bound %}value="{{ form.businessName.value }}"{% endif %}>
<label class="form-label">Legal Business Name</label>
</div>
{% for err in form.businessName.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
我的问题:
如何保持相同的 HTML 样式,同时使用 {{ form.as_p }}
使其变得简单?
在这种情况下,属性的必需输入是什么?
这将是将自定义样式应用到 Django 表单的最快方法,这样您就可以让 Django 处理表单,同时仍然使用您喜欢的 css 样式...
摘自我对以下问题的回答:How to markup form fields with in Django
class MyForm(forms.Form):
myfield = forms.CharField(widget=forms.TextInput(attrs={'class': 'myfieldclass'}))
或
class MyForm(forms.ModelForm):
class Meta:
model = MyModel
def __init__(self, *args, **kwargs):
super(MyForm, self).__init__(*args, **kwargs)
self.fields['myfield'].widget.attrs.update({'class': 'myfieldclass'})
或
class MyForm(forms.ModelForm):
class Meta:
model = MyModel
widgets = {
'myfield': forms.TextInput(attrs={'class': 'myfieldclass'}),
}
originally answered
编辑 1:添加标签样式
1 通过上述方法设置class
例如:
self.fields['some_field'].widget.attrs.update({'class': 'some_class'})`
2 Select 的标签 class 并设置样式
.that_some_class label{
font-size: large;
}
我有一个手动创建的 Django 表单,以保持样式的格式,但我意识到该表单受到多个输入的影响,手动更改每个输入的时间太长。
我也可以使用 {{ form.as_p }}
自动生成表单,但我丢失了下面的 HTML 样式格式。有没有一种简单的方法可以代替手动更改每个输入?
这是我要保留的原始 HTML 模板
</button>
<div class="form-outline mb-4">
<input
type="text"
id="businessName"
class="form-control"
name="businessName"
/>
<label class="form-label" for="typeText"
>Legal Business Name</label>
</div>
这是工作的 Django 表单:
{% if submitted %}
Your forms has been submitted
{% else %}
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<!-- Submit button -->
<button
type="submit"
class="btn btn-primary btn-block mb-4"
id="btn"
>
Submit
</button>
</form>
这是views.py
def add_form(request):
submitted=False
if request.method == 'POST':
form = infoForm(request.POST)
if form.is_valid():
form.save()
return HttpResponseRedirect('/?submitted=True')
else:
form = infoForm()
if 'submitted' in request.GET:
submitted=True
return render(request, 'template/template.html',{'form':form, 'submitted':submitted})
这是表格
class infoForm(ModelForm):
class Meta:
model = Info
fields = ['businessName']
这是我尝试过的:
<div class="form-outline mb-4">
<input type="text" class="form-control" name="businessName" {% if form.is_bound %}value="{{ form.businessName.value }}"{% endif %}>
<label class="form-label">Legal Business Name</label>
</div>
{% for err in form.businessName.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
我的问题:
如何保持相同的 HTML 样式,同时使用 {{ form.as_p }}
使其变得简单?
在这种情况下,属性的必需输入是什么?
这将是将自定义样式应用到 Django 表单的最快方法,这样您就可以让 Django 处理表单,同时仍然使用您喜欢的 css 样式...
摘自我对以下问题的回答:How to markup form fields with in Django
class MyForm(forms.Form):
myfield = forms.CharField(widget=forms.TextInput(attrs={'class': 'myfieldclass'}))
或
class MyForm(forms.ModelForm):
class Meta:
model = MyModel
def __init__(self, *args, **kwargs):
super(MyForm, self).__init__(*args, **kwargs)
self.fields['myfield'].widget.attrs.update({'class': 'myfieldclass'})
或
class MyForm(forms.ModelForm):
class Meta:
model = MyModel
widgets = {
'myfield': forms.TextInput(attrs={'class': 'myfieldclass'}),
}
originally answered
编辑 1:添加标签样式
1 通过上述方法设置class 例如:
self.fields['some_field'].widget.attrs.update({'class': 'some_class'})`
2 Select 的标签 class 并设置样式
.that_some_class label{
font-size: large;
}