【一】引入#

forms组件只会帮我们渲染用户输入的标签(input/select…)

【二】书写forms组件#

forms.py

1
from django import forms
2

3

4
# 定义form类
5
class MyForm(forms.Form):
6
    # username : 字符串类型  最小三位，最大八位
7
    username = forms.CharField(max_length=8, min_length=3)
8
    # # username : 字符串类型  最小三位，最大八位 : 字符串类型  最小三位，最大八位
9
    password = forms.CharField(max_length=8, min_length=3)
10
    # email : 必须符合邮箱格式  xxx@xx.com
11
    email = forms.EmailField()

views.py

1
def index(request):
2
    # （1）产生一个空对象
3
    form_obj = MyForm()
4
    # （2） 直接将空对象传递给前端页面
5
    return render(request,'index.html',locals())

urls.py

1
# forms 组件渲染html标签
2
path('index/',views.index),

【三】直接渲染({{ form_obj }})#

【1】自定义渲染模板#

1
<form action="" method="post">
2
    {{ form_obj }}
3
    <p><input type="submit"></p>
4
</form>

【2】自动生成页面标签#

页面上会出现对应的HTML代码，但是是一开始没有的

1
<form action="" method="post">
2
    <label for="id_username">用户名:</label><input type="text" name="username" maxlength="8" minlength="3" required="" id="id_username">
3
<label for="id_password">Password:</label><input type="text" name="password" maxlength="8" minlength="3" required="" id="id_password">
4
<label for="id_email">Email:</label><input type="email" name="email" required="" id="id_email">
5
    <p><input type="submit"></p>
6
</form>

【3】前端样式#

【4】特点#

代码书写极少，封装程度太高，不便于后期拓展
一般情况下用于本地测试使用

【四】渲染成列表元素({{ form.as_ul }})#

{{ form.as_ul }} 将表单渲染成一个列表元素，每个输入框作为一个
标签

【1】自定义前端模板#

1
<form action="" method="post">
2
    {{ form_obj.as_ul }}
3
   <p><input type="submit"></p>
4
</form>

【2】自动生成前端标签#

1
<form action="" method="post">
2
    <li><label for="id_username">Username:</label> <input type="text" name="username" maxlength="8" minlength="3"
3
                                                          required="" id="id_username"></li>
4
    <li><label for="id_password">Password:</label> <input type="text" name="password" maxlength="8" minlength="3"
5
                                                          required="" id="id_password"></li>
6
    <li><label for="id_email">Email:</label> <input type="email" name="email" required="" id="id_email"></li>
7
   <p><input type="submit"></p>
8
</form>

【3】页面样式#

【4】特点#

可扩展性非常强
但是需要书写复杂的代码
一般情况下不用

【五】渲染成p标签({{ form.as_p }} )#

{{ form.as_p }} 将表单的每个输入框包裹在一个
标签内 tags

【1】自定义渲染模板#

1
<form action="" method="post">
2
    {{ form_obj.as_p }}
3
   <p><input type="submit"></p>
4
</form>

【2】自动生成前端标签#

1
<form action="" method="post">
2
    <p><label for="id_username">用户名:</label> <input type="text" name="username" maxlength="8" minlength="3" required="" id="id_username"></p>
3
<p><label for="id_password">Password:</label> <input type="text" name="password" maxlength="8" minlength="3" required="" id="id_password"></p>
4
<p><label for="id_email">Email:</label> <input type="email" name="email" required="" id="id_email"></p>
5
    <p><input type="submit"></p>
6
</form>

【3】页面样式#

【六】渲染成表格元素({{ form.as_table }})#

{{ form.as_table }} 将表单渲染成一个表格元素，每个输入框作为一个标签

【1】自定义渲染模板#

需要自己主动写 table 标签才会生效

1
<form action="" method="post">
2
    <table>
3
        {{ form_obj.as_table }}
4
    </table>
5
    <p><input type="submit"></p>
6
</form>

【2】自动生成前端标签#

1
<form action="" method="post">
2
    <table>
3
        <tbody><tr><th><label for="id_username">用户名:</label></th><td><input type="text" name="username" maxlength="8" minlength="3" required="" id="id_username"></td></tr>
4
<tr><th><label for="id_password">Password:</label></th><td><input type="text" name="password" maxlength="8" minlength="3" required="" id="id_password"></td></tr>
5
<tr><th><label for="id_email">Email:</label></th><td><input type="email" name="email" required="" id="id_email"></td></tr>
6
    </tbody></table>
7
    <p><input type="submit"></p>
8
</form>

【3】前端样式#

【七】遍历渲染(for)#

【1】自定义前端模板#

1
<form action="" method="post">
2
    {% for form in form_obj %}
3
        <p> {{ form.label }} : {{ form }}</p>
4
    {% endfor %}
5
    <p><input type="submit"></p>
6
</form>

【2】自动生成前段标签#

1
<form action="" method="post">
2

3
                    <p> 用户名 : <input type="text" name="username" maxlength="8" minlength="3" required="" id="id_username"></p>
4

5
                    <p> Password : <input type="text" name="password" maxlength="8" minlength="3" required="" id="id_password"></p>
6

7
                    <p> Email : <input type="email" name="email" required="" id="id_email"></p>
8

9
                <p><input type="submit"></p>
10
</form>

【3】前端样式#

【4】优点#

代码书写简单，扩展性很高

【八】手动渲染#

直接{{ form }}虽然好，啥都不用操心，但是往往并不是你想要的，比如你要使用CSS和JS，比如你要引入Bootstarps框架，这些都需要对表单内的input元素进行额外控制，那怎么办呢？手动渲染字段就可以了。
可以通过{{ form.name_of_field }}获取每一个字段，然后分别渲染，如下例所示：

【1】自定义前端模板#

1
<form action="" method="post">
2
    {{ form_obj.non_field_errors }}
3
    <div class="fieldWrapper">
4
        {{ form_obj.username.errors }}
5
        <label for="{{ form_obj.username.id_for_label }}">Username:</label>
6
        {{ form_obj.username }}
7
    </div>
8
    <div class="fieldWrapper">
9
        {{ form_obj.password.errors }}
10
        <label for="{{ form_obj.password.id_for_label }}">Password:</label>
11
        {{ form_obj.password }}
12
    </div>
13
    <div class="fieldWrapper">
14
        {{ form_obj.email.errors }}
15
        <label for="{{ form_obj.email.id_for_label }}">Email:</label>
16
        {{ form_obj.email }}
17
    </div>
18
    <p><input type="submit"></p>
19
</form>

其中的label标签甚至可以用label_tag()方法来生成，于是可以简写成下面的样子:

1
<form action="" method="post">
2
    {{ form_obj.non_field_errors }}
3
    <div class="fieldWrapper">
4
        {{ form_obj.username.errors }}
5
        {{ form_obj.username.label_tag }}
6
        {{ form_obj.username }}
7
    </div>
8
    <div class="fieldWrapper">
9
        {{ form_obj.password.errors }}
10
        {{ form_obj.password.label_tag }}
11
        {{ form_obj.password }}
12
    </div>
13
    <div class="fieldWrapper">
14
        {{ form_obj.email.errors }}
15
        {{ form_obj.email.label_tag }}
16
        {{ form_obj.email }}
17
    </div>
18
    <p><input type="submit"></p>
19
</form>

【2】自动生成前端标签#

1
<form action="" method="post">
2

3
                <div class="fieldWrapper">
4

5
                    <label for="id_username">Username:</label>
6
                    <input type="text" name="username" maxlength="8" minlength="3" required="" id="id_username">
7
                </div>
8
                <div class="fieldWrapper">
9

10
                    <label for="id_password">Password:</label>
11
                    <input type="text" name="password" maxlength="8" minlength="3" required="" id="id_password">
12
                </div>
13
                <div class="fieldWrapper">
14

15
                    <label for="id_email">Email:</label>
16
                    <input type="email" name="email" required="" id="id_email">
17
                </div>
18
                <p><input type="submit"></p>
19
</form>

【3】前端样式#

【九】总结#

先在后端生成空对象
再在前端拿到想要的属性
label属性默认展示的是类中定义的字段首字母大写的形式
支持自己修改字段注释
- 直接在字典后面加 label 属性赋值即可

1
username = forms.CharField(max_length=8, min_length=3, label="用户名")

不会渲染提交按钮

音乐

音乐

【一】引入#

【二】书写forms组件#

【三】直接渲染({{ form_obj }})#

【1】自定义渲染模板#

【2】自动生成页面标签#

【3】前端样式#

【4】特点#

【四】渲染成列表元素({{ form.as_ul }})#

【1】自定义前端模板#

【2】自动生成前端标签#

【3】页面样式#

【4】特点#

【五】渲染成p标签({{ form.as_p }} )#

【1】自定义渲染模板#

【2】自动生成前端标签#

【3】页面样式#

【六】渲染成表格元素({{ form.as_table }})#

【1】自定义渲染模板#

【2】自动生成前端标签#

【3】前端样式#

【七】遍历渲染(for)#

【1】自定义前端模板#

【2】自动生成前段标签#

【3】前端样式#

【4】优点#

【八】手动渲染#

【1】自定义前端模板#

【2】自动生成前端标签#

【3】前端样式#

【九】总结#

支持与分享

音乐

Django框架Form组件之渲染HTML代码

【一】引入#

【二】书写forms组件#

【三】直接渲染({{ form_obj }})#

【1】自定义渲染模板#

【2】自动生成页面标签#

【3】前端样式#

【4】特点#

【四】渲染成列表元素({{ form.as_ul }})#

【1】自定义前端模板#

【2】自动生成前端标签#

【3】页面样式#

【4】特点#

【五】渲染成p标签({{ form.as_p }} )#

【1】自定义渲染模板#

【2】自动生成前端标签#

【3】页面样式#

【六】渲染成表格元素({{ form.as_table }})#

【1】自定义渲染模板#

【2】自动生成前端标签#

【3】前端样式#

【七】遍历渲染(for)#

【1】自定义前端模板#

【2】自动生成前段标签#

【3】前端样式#

【4】优点#

【八】手动渲染#

【1】自定义前端模板#

【2】自动生成前端标签#

【3】前端样式#

【九】总结#

支持与分享