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生成对应的标签
源码
as_table，as_ul，as_p 三个方法对应的源码在 BaseForm 类
def as_table(self):
"Return this form rendered as HTML <tr>s -- excluding the <table></table>."
return self._html_output(
normal_row='<tr%(html_class_attr)s><th>%(label)s</th><td>%(errors)s%(field)s%(help_text)s</td></tr>',
error_row='<tr><td colspan="2">%s</td></tr>',
row_ender='</td></tr>',
help_text_html='<br /><span class="helptext">%s</span>',
errors_on_separate_row=False)
def as_ul(self):
"Return this form rendered as HTML <li>s -- excluding the <ul></ul>."
return self._html_output(
normal_row='<li%(html_class_attr)s>%(errors)s%(label)s %(field)s%(help_text)s</li>',
error_row='<li>%s</li>',
row_ender='</li>',
help_text_html=' <span class="helptext">%s</span>',
errors_on_separate_row=False)
def as_p(self):
"Return this form rendered as HTML <p>s."
return self._html_output(
normal_row='<p%(html_class_attr)s>%(label)s %(field)s%(help_text)s</p>',
error_row='%s',
row_ender='</p>',
help_text_html=' <span class="helptext">%s</span>',
errors_on_separate_row=True)
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页面效果
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>
生成效果
去掉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>
生成效果
遍历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>
<input type="submit" value="登录" >
</p>
</form>
渲染html效果
也可以使用 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）
2021年第八期《python接口web自动化+测试开发》7.17号开学（课程全面升级！） 加量不加价（新增postman, 赠送selenium和python基础2个课）
本期上课时间：7月17号-10月16号，每周六、周日晚上20:30-22:30