django修改form表单的样式css
程序员文章站
2022-03-04 13:00:57
...
可以使用django自身的渲染模板,但是没有现在前端框架渲染出来的好看,所以我们使用attrs
参数,代码如下:
编写表单类
首先,在你当前app内新建一个forms.py文件,然后输入下面的内容:
from django import forms
class TaskForm(forms.Form):
task_domain = forms.CharField(label="", widget=forms.TextInput(attrs={'class':'form-control'}), max_length=50)
两个点:
- 不需要label标签,必须控制label为空
- 控制input标签类为前端渲染的css,通过widget来处理
最终渲染效果
<input type="text" name="task_domain" class="form-control" maxlength="50" required="" id="id_task_domain">
视图处理
在视图文件view.py中
from django.shortcuts import render
from django.http import HttpResponseRedirect
from .forms import NameForm
def get_name(request):
# 如果form通过POST方法发送数据
if request.method == 'POST':
# 接受request.POST参数构造form类的实例
form = NameForm(request.POST)
# 验证数据是否合法
if form.is_valid():
# 处理form.cleaned_data中的数据
# ...
# 如果是通过GET方法请求数据,返回一个空的表单
else:
form = NameForm()
return render(request, 'form.html', {'form': form})
模板使用
在Django
的模板中,我们只需要按下面处理,就可以得到完整的HTML页面:
<form action="/" method="post">
{% csrf_token %}
{{ form }}
<input type="submit" value="Submit" />
</form>
推荐阅读
-
Django form表单与请求的生命周期步骤详解
-
解决ie动态修改link样式,import css不刷新的问题
-
css3中检验表单的required,focus,valid和invalid样式
-
原生JS实现获取及修改CSS样式的方法
-
解决Django中修改js css文件但浏览器无法及时与之改变的问题
-
css3实现一款模仿iphone样式的注册表单
-
form表单内容编辑,只提交已经修改的部分,未修改的部分不提交
-
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
-
form表单内容编辑时 只提交已经修改的部分,未修改的部分不提交
-
vue中element-ui组件默认css样式修改的四种方式