手动渲染Django表单字段

手动渲染Django表单字段

Django表单字段有几个内置的方法来减轻开发者的工作,但有时需要手动实现一些东西来定制用户界面(UI)。我们已经介绍了如何在Django中创建和使用一个表单?一个表单有3个内置的方法,可以用来渲染Django表单字段。

  • {{ form.as_table }}将把它们渲染成由<tr>标签</tr>包裹的表格单元格。
  • {{ form.as_p }}将呈现它们被包裹在 <p>标签
  • {{ form.as_ul }}会把它们包在<li>标签</li>里呈现出来

这些都是自动渲染表单的,但如果你想创建一个带有一些CSS效果的漂亮表单,你需要手动渲染表单字段。本文围绕如何手动渲染表单字段展开。

手动渲染表格字段

用一个例子说明手动渲染Django表单的情况。考虑一个名为geeksforgeeks的项目,它有一个名为geeks的应用程序。

在你的geeks应用程序中,创建一个名为forms.py的新文件,你将在其中制作所有的表单。要创建一个Django表单,你需要使用Django表单类。让我们来演示一下。
在你的forms.py中输入以下内容。

from django import forms
  
# creating a form 
class InputForm(forms.Form):
  
    first_name = forms.CharField(max_length = 200)
    last_name = forms.CharField(max_length = 200)
    roll_number = forms.IntegerField(
                     help_text = "Enter 6 digit roll number"
                     )
    password = forms.CharField(widget = forms.PasswordInput())
Python

让我们解释一下到底发生了什么,左边表示字段的名称,右边则是相应地定义输入字段的各种功能。一个字段的语法被表示为
语法 :

Field_name = forms.FieldType(attributes)
Python

现在要把这个表单渲染成一个视图,请移到views.py并创建一个home_view,如下所示。

from django.shortcuts import render
from .forms import InputForm
  
# Create your views here.
def home_view(request):
    context ={}
    context['form']= InputForm()
    return render(request, "home.html", context)
Python

在视图中,我们只需要创建一个上面在forms.py中创建的表单类的实例。
现在让我们编辑模板 > home.html

<form action = "" method = "post">
    {% csrf_token %}
    {{form }}
    <input type="submit" value=Submit">
</form>
Python

一切准备就绪,检查表格是否工作,让我们访问http://localhost:8000/。

手动渲染Django表单字段

.
表单工作正常,但视觉效果令人失望,我们可以手动渲染这些字段来改善一些视觉上的东西。每个字段都可以作为表单的一个属性,使用{{ form.name_of_field }},在Django模板中,会被适当渲染。比如说。

{{ form.non_field_errors }}
<div class="fieldWrapper">
    {{ form.subject.errors }}
    <label for="{{ form.subject.id_for_label }}">Email subject:</label>
    {{ form.subject }}
</div>
Python

让我们修改一下我们的表格,使之看起来相当令人印象深刻。

<html>
  
<head>
    <link 
     rel="stylesheet"
     href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <style>
        .i-am-centered {
            margin: auto;
            max-width: 300px;
            padding-top: 20%;
        }
    </style>
</head>
  
<body>
    <div class="i-am-centered">
        <form method="POST">
            {% csrf_token %}
            <div class="form-group">
                <label>First Name </label>
                {{ form.first_name }}
            </div>
            <div class="form-group">
                <label>Last Name </label>
                {{ form.last_name }}
            </div>
            <div class="form-group">
                <label>Roll Number</label>
                {{ form.roll_number }}
            </div>
            <div class="form-group">
                <label>Password</label>
                {{ form.password }}
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</body>
  
</html>
HTML

现在访问http://localhost:8000/,检查修改后的表格。

手动渲染Django表单字段

这些只是使用Bootstrap进行的一些基本修改。人们可以使用各种CSS技巧和方法将其定制到高级水平。

{{field}}属性

  • {{field.label}}
    该字段的标签,例如:电子邮件地址。
  • {{field.label_tag }}.
    该字段的标签被包裹在适当的HTML标签中。这包括表单的label_suffix。例如,默认的 label_suffix 是一个冒号。
<label for="id_email">Email address:</label>
Python
  • {{field.id_for_label }}}
    这个字段将使用的ID(上面例子中的id_email)。如果你正在手动构建标签,你可能想用它来代替label_tag。它也很有用,例如,如果你有一些内联的JavaScript,想避免硬编码字段的ID。
  • {{field.value}}
    字段的值。例如:someone@example.com。
  • {{field.html_name}}
    将在输入元素的名称字段中使用的字段名称。如果设置了表单前缀,这将考虑到表单前缀。
  • {{ field.help_text }}}
    任何与该字段相关的帮助文本。
  • {{field.errors }}}
    输出一个<ul class="errorlist"></ul>包含该字段对应的任何验证错误。你可以用{% for error in field.errors %}循环来定制错误的呈现方式。在这种情况下,循环中的每个对象是一个包含错误信息的字符串。
  • {{field.is_hidden }}
    如果表单字段是一个隐藏字段,这个属性为True,否则为False。作为一个模板变量,它不是特别有用,但在条件测试中可能很有用,例如。
{% if field.is_hidden %}  
{# Do something special #}
{% endif %}
Python
  • {{field.field}}
    这个BoundField包裹的表单类中的字段实例。你可以用它来访问字段属性,例如,{{ char_field.field.max_length }}。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册