首页 > 其他分享 >【20.2】Django框架Form组件之渲染HTML代码

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

时间:2024-03-18 23:37:56浏览次数:24  
标签:20.2 obj Form form 渲染 标签 Django forms label

【一】引入

  • 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 : 必须符合邮箱格式  [email protected]
    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】前端样式

image-20240311145250657

【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】页面样式

image-20240311145352238

【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】页面样式

image-20240311144109925

【六】渲染成表格元素({{ 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】前端样式

image-20240311144854013

【七】遍历渲染(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】前端样式

image-20240311150106328

【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】前端样式

image-20240311151027369

【九】总结

  • 先在后端生成空对象

  • 再在前端拿到想要的属性

  • label属性默认展示的是类中定义的字段首字母大写的形式

  • 支持自己修改字段注释

    • 直接在字典后面加 label 属性赋值即可
    username = forms.CharField(max_length=8, min_length=3, label="用户名")
    
  • 不会渲染提交按钮

标签:20.2,obj,Form,form,渲染,标签,Django,forms,label
From: https://www.cnblogs.com/dream-ze/p/18081774

相关文章

  • 【20.1】Django框架Form组件之常用字段及插件
    【零】引入创建Form类时主要涉及到【字段】和【插件】字段用于对用户请求数据的验证插件用于自动生成HTML;【一】Field.clean(value)注意:这里说的是字段Field的clearn方法,不是表单Form的clean方法。虽然表单字段的Field类主要使用在Form类中,但也可以直接实例化它们来......
  • 【20.4】Django框架Form组件之钩子函数(Hook)
    【一】什么是钩子函数在forms组件中钩子函数(Hooks)是用来在特定事件发生时执行自定义逻辑的函数。它们提供了一种创建交互性和动态行为的方式,并可以用于处理表单的各种状态和数据。【二】常见的钩子函数【1】onInputChange当输入框的值发生变化时触发。你可以通过这个......
  • 【20.3】Django框架Form组件之渲染错误信息
    【一】定义form组件forms.py#定义form类classMyForm(forms.Form):#username:字符串类型最小三位,最大八位username=forms.CharField(max_length=8,min_length=3,label="用户名",error_messages={......
  • 【20.7】Django表单API详解
    【一】引入声明:以下的Form、表单等术语都指的的广义的Django表单。Form要么是绑定了数据的,要么是未绑定数据的。如果是绑定的,那么它能够验证数据,并渲染表单及其数据,然后生成HTML表单。如果未绑定,则无法进行验证(因为没有数据可以验证!),但它仍然可以以HTML形式呈现空白表单。若要......
  • 【20.6】Django框架Form组件之模型表单ModelForm
    【一】引入如果你正在构建一个数据库驱动的应用,那么你可能会有与Django的模型紧密映射的表单。比如,你有个BlogComment模型,并且你还想创建一个表单让大家提交评论到这个模型中。在这种情况下,写一个forms.Form类,然后在表单类中定义字段,这种一般创建表单的做法是冗余的,因为你已经......
  • 【20.5】Django框架Form组件之源码
    【一】切入点切入点form_obj.is_valid()defis_valid(self):"""ReturnTrueiftheformhasnoerrors,orFalseotherwise."""returnself.is_boundandnotself.errors如果is_valid要想返回True那么self.is_bound要为Trueself.errors......
  • Django 用re_path()方法正则匹配复杂路由
    app1.url.pyfromdjango.urlsimportpath,re_pathfrom.importviewsurlpatterns=[path('index',views.index,name='index'),path('test',views.test,name='test'),path('test_int/<int:id>/......
  • 【20.0】Django框架之Form组件
    【一】Django的表单系统【1】使用表单(1)原始表单我们之前在HTML页面中利用form表单向后端提交数据时都会写一些获取用户输入的标签并且用form标签把它们包起来。与此同时我们在好多场景下都需要对用户的输入做校验比如校验用户是否输入输入的长度和格式等正不正确。......
  • 【10.0】Django框架之路由层
    【零】Django的路由系统【1】什么是URL配置(URLconf)URL调度器|Django文档|Django(djangoproject.com)URL配置(URLconf)就像Django所支撑网站的目录。它的本质是URL与要为该URL调用的视图函数之间的映射表。你就是以这种方式告诉Django,对于这个URL调用这段代......
  • 【9.0】Django框架之生命周期流程图
    【5.0】Django框架之请求生命周期流程图解释图:浏览器>>发送请求(Http请求)>>web服务网关接口(django默认的wsgiref模块不能承受高并发,最大只有1000左右)>>中间件>>缓存数据库(返回给中间件已经缓存过的数据)>>urls.py(路由层)>>views.py(视图层)>>templates(模板......