欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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>
相关标签: web运维开发