当前位置：极客教程 > Django > Django 表单 > 手动渲染Django表单字段

手动渲染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教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

Django 表单

登录

找回密码？

注册