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

Chimengmeng

于 2024-03-18 23:19:00 发布

阅读量244

点赞数 4

文章标签： django html python 后端前端

本文链接：https://blog.csdn.net/chimengmeng/article/details/137288075

版权

【一】引入

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

【二】书写forms组件

forms.py

from django import forms


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

views.py

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

urls.py

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

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

【1】自定义渲染模板

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

【2】自动生成页面标签

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

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

【3】前端样式

【4】特点

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

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

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

【1】自定义前端模板

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

【2】自动生成前端标签

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

【3】页面样式

【4】特点

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

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

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

【1】自定义渲染模板

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

【2】自动生成前端标签

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

【3】页面样式

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

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

【1】自定义渲染模板

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

<form action="" method="post">
    <table>
        {{ form_obj.as_table }}
    </table>
    <p><input type="submit"></p>
</form>

【2】自动生成前端标签

<form action="" method="post">
    <table>
        <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>
<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>
<tr><th><label for="id_email">Email:</label></th><td><input type="email" name="email" required="" id="id_email"></td></tr>
    </tbody></table>
    <p><input type="submit"></p>
</form>

【3】前端样式

【七】遍历渲染(`for`)

【1】自定义前端模板

<form action="" method="post">
    {% for form in form_obj %}
        <p> {{ form.label }} : {{ form }}</p>
    {% endfor %}
    <p><input type="submit"></p>
</form>

【2】自动生成前段标签

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

【3】前端样式

【4】优点

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

【八】手动渲染

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

【1】自定义前端模板

<form action="" method="post">
    {{ form_obj.non_field_errors }}
    <div class="fieldWrapper">
        {{ form_obj.username.errors }}
        <label for="{{ form_obj.username.id_for_label }}">Username:</label>
        {{ form_obj.username }}
    </div>
    <div class="fieldWrapper">
        {{ form_obj.password.errors }}
        <label for="{{ form_obj.password.id_for_label }}">Password:</label>
        {{ form_obj.password }}
    </div>
    <div class="fieldWrapper">
        {{ form_obj.email.errors }}
        <label for="{{ form_obj.email.id_for_label }}">Email:</label>
        {{ form_obj.email }}
    </div>
    <p><input type="submit"></p>
</form>

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

<form action="" method="post">
    {{ form_obj.non_field_errors }}
    <div class="fieldWrapper">
        {{ form_obj.username.errors }}
        {{ form_obj.username.label_tag }}
        {{ form_obj.username }}
    </div>
    <div class="fieldWrapper">
        {{ form_obj.password.errors }}
        {{ form_obj.password.label_tag }}
        {{ form_obj.password }}
    </div>
    <div class="fieldWrapper">
        {{ form_obj.email.errors }}
        {{ form_obj.email.label_tag }}
        {{ form_obj.email }}
    </div>
    <p><input type="submit"></p>
</form>

【2】自动生成前端标签

<form action="" method="post">
                
                <div class="fieldWrapper">
                    
                    <label for="id_username">Username:</label>
                    <input type="text" name="username" maxlength="8" minlength="3" required="" id="id_username">
                </div>
                <div class="fieldWrapper">
                    
                    <label for="id_password">Password:</label>
                    <input type="text" name="password" maxlength="8" minlength="3" required="" id="id_password">
                </div>
                <div class="fieldWrapper">
                    
                    <label for="id_email">Email:</label>
                    <input type="email" name="email" required="" id="id_email">
                </div>
                <p><input type="submit"></p>
</form>

【3】前端样式

【九】总结

先在后端生成空对象
再在前端拿到想要的属性
label属性默认展示的是类中定义的字段首字母大写的形式
支持自己修改字段注释
- 直接在字典后面加 label 属性赋值即可
```
username = forms.CharField(max_length=8, min_length=3, label="用户名")
```
不会渲染提交按钮

Chimengmeng

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
【20.2】Django框架Form组件之渲染HTML代码

【一】引入forms组件只会帮我们渲染用户输入的标签(input/select...)【二】书写forms组件forms.pyfrom django import forms# 定义form类class MyForm(forms.Form): # username : 字符串类型最小三位，最大八位 username = forms.CharField(...
复制链接

扫一扫