python测试开发django-101.Form渲染成HTML的格式(as_p,as_ul,as_table)

前言

form表单类可以在模板中渲染成HTML的格式,在模板中一般可以用到这3个方法

  • {{ form.as_p }} 生成p标签
  • {{ form.as_ul }} 生成ul标签 需要自定义 ul
  • {{ form.as_table }} 生成table表格 需要自定义 table

除了上面3个方法我们也可以在模板中自己去遍历form生成对应的标签

form.as_p 生成p标签

写一个登录的Form表单

# views.py
from django import forms
# Create your views here.
# 作者-上海悠悠 QQ交流群:717225969
# blog地址 https://www.cnblogs.com/yoyoketang/

class LoginForm(forms.Form):
    """登录Form表单"""
    username = forms.CharField(max_length=32,
                               min_length=3,
                               required=True,
                               label="用户名",
                               )
    password = forms.CharField(max_length=16,
                               min_length=6,
                               required=True,
                               label="密码")

视图函数views.py

from django.shortcuts import render
from django.http import JsonResponse
# 作者-上海悠悠 QQ交流群:717225969
# blog地址 https://www.cnblogs.com/yoyoketang/


def login_form(request):
    if request.method == "GET":
        form_obj = LoginForm()
        return render(request, "demo.html", locals())

    if request.method == "POST":
        form_obj = LoginForm(request.POST)
        if form_obj.is_valid():
            username = form_obj.cleaned_data.get("username")
            password = form_obj.cleaned_data.get("password")
            print("username:", username)
            print("password:", password)
            # 登录认证
            if username == "admin" and password == "123456":
                return JsonResponse({"code": 0, "msg": "login success!"})
            else:
                error_msg = "用户名或密码不正确"
                return render(request, "demo.html", locals())
        else:
            error_msg = form_obj.errors
            return render(request, "demo.html", locals())

于是在模板中可以这样引用

<form action="" method="POST" id="login-form">
    {% csrf_token %}

    <p>
        {{ form_obj.username.label }}
        {{ form_obj.username }}
    </p>
    <p>
        {{ form_obj.password.label }}
        {{ form_obj.password }}
    </p>
    <p >
	   {{ error_msg }}
    </p>
    <p>
    <input type="submit" value="登录" >
    </p>
</form>

在p标签下,分别引用form_obj.username.label和form_obj.username,生成username的输入框。
但是这种方法很死板,input标签的内容是写死的,一旦LoginForm里面代码发生改动,还得去维护模板里面的代码,维护工作量很大。
于是可以使用 form_obj.as_p 方法自动生成p标签,也可以达到同样的效果。

<form action="" method="POST" id="login-form">
    {% csrf_token %}
    {{ form_obj.as_p }}
    <p>
        {{ error_msg }}
    </p>
    <p>
        <input type="submit" value="登录" >
    </p>
</form>

渲染后html页面效果
python测试开发django-101.Form渲染成HTML的格式(as_p,as_ul,as_table)

form.as_ul 生成 ul 标签

form.as_ul 方法需在模板里面自己写 ul 标签

<form action="" method="POST" id="login-form">
    {% csrf_token %}
    <ul>
        {{ form_obj.as_ul }}
    </ul>
    <p>
        {{ error_msg }}
    </p>
    <p>
        <input type="submit" value="登录" >
    </p>
</form>

生成效果
python测试开发django-101.Form渲染成HTML的格式(as_p,as_ul,as_table)

去掉ul li前面的黑色点可以<head>在加<style>

<style>
        ul li{
            list-style: none;
        }
    </style>

form.as_table 生成表格

form.as_table 方法需在模板里面自己写 table 标签

<form action="" method="POST" id="login-form">
    {% csrf_token %}
    <table>
        {{ form_obj.as_table}}
    </table>
    <p>
        {{ error_msg }}
    </p>
    <p>
        <input type="submit" value="登录" >
    </p>
</form>

生成效果
python测试开发django-101.Form渲染成HTML的格式(as_p,as_ul,as_table)

遍历form表单

除了上面提到的3种方法可以生成对应的输入框,我们也可以自己去遍历form,field.label_tag生成 label 标签

<form action="" method="POST" id="login-form">
    {% csrf_token %}
    {% for field in form_obj %}
        <p>
            {{ field.label_tag }}
            {{ field }}
            {{ field.errors }}
        </p>
    {% endfor %}
    <p>
        {{ error_msg }}
    </p>
    <p>
        <input type="submit" value="登录" >
    </p>
</form>

渲染html效果

python测试开发django-101.Form渲染成HTML的格式(as_p,as_ul,as_table)

也可以使用 field.label

<form action="" method="POST" id="login-form" style="text-align:center;">
    {% csrf_token %}
    {% for field in form_obj %}
        <p>
            {{ field.label }}
            {{ field }}
            {{ field.errors }}
        </p>
    {% endfor %}

实现效果如下(推荐使用field.label_tag)
python测试开发django-101.Form渲染成HTML的格式(as_p,as_ul,as_table)

上一篇:JavaScript


下一篇:ASP.NET获取DataTable的值 与 动态添加ul,li列表