在 Django 中呈现 HTML 表单(GET 和 POST)

简介: 在 Django 中呈现 HTML 表单(GET 和 POST)

Django 通常被称为“包含电池的框架”,因为它对所有内容都有默认设置,并且具有可以帮助任何人快速开发网站的功能。谈到表单,在 HTML 中,表单是


... 内的元素集合,允许访问者执行诸如输入文本、选择选项、操作对象或控件等操作,然后将其发送出去信息返回服务器。基本上,它是用于处理任何目的的数据集合,包括将其保存在数据库中或从数据库中获取数据。Django 支持所有类型的 HTML 表单并将数据从它们呈现到视图中,以便使用各种逻辑操作进行处理。

要了解有关 HTML 表单的更多信息,请访问如何使用 Django Forms 创建表单?


Django 还提供了Django Forms的内置功能,就像Django Models一样。可以在 Django 中创建表单并使用它们以一种方便的方式从用户那里获取数据。要开始使用表单,需要熟悉表单中的GET 和 POST 请求。


  • GET: 相比之下,GET 将提交的数据捆绑成一个字符串,并使用它来组成一个 URL。URL 包含必须发送数据的地址,以及数据键和值。如果您在 Django 文档中进行搜索,您可以看到这一点,这将产生一个格式为 docs.djangoproject.com/search/?q=f… 的 URL。
  • POST: 任何可用于更改系统状态的请求(例如,在数据库中进行更改的请求)都应使用 POST。


在 Django 中渲染 HTML 表单说明


使用示例说明Django 表单。考虑一个名为 geeksforgeeks 的项目,它有一个名为 geeks 的应用程序。

让我们创建一个简单的 HTML 表单来展示如何输入来自用户的数据并在视图中使用它。在 geeks > templates > home.html 中输入以下代码

<form action = "" method = "get">
  <label for="your_name">Your name: </label>
  <input id="your_name" type="text" name="your_name">
  <input type="submit" value="OK">
</form>

现在要在我们的视图中呈现它,我们需要为极客应用修改 urls.py。在 geeksforgeeks > urls.py 中输入以下代码

from django.urls import path
# importing views from views..py
from .views import geeks_view
urlpatterns = [
  path('', home_view ),
]

现在,让我们转到 home_view 并开始检查我们将如何获取数据。来自 Django 中 HTML 表单的全部数据作为 JSON 对象传输,称为请求。让我们首先创建一个视图,然后我们将尝试所有方法从表单中获取数据。

from django.shortcuts import render
# 在此处创建您的视图
def home_view(request):
  # 视图的逻辑将在这里实现
  return render(request, "home.html")

一切就绪后,让我们运行 Python manage.py run server 并检查主页上是否存在表单。112.png

默认情况下,每个用 HTML 编写的表单都会向应用程序的后端发出 GET 请求,GET 请求通常使用 URL 中的查询来工作。让我们用上面的表格来演示一下,用你的名字填写表格,让我们看看会发生什么。

113.png

上面的 URL 附加了输入标签的名称属性和在表单中输入的名称。 这就是 GET 请求的工作方式,无论它们将附加到 URL 以将数据发送到应用程序后端的输入数量是多少。让我们检查一下如何最终在我们的视图中获取这些数据,以便可以根据输入应用逻辑。 在views.py

from django.shortcuts import render
# 在此处创建您的视图
def home_view(request):
  print(request.GET)
  return render(request, "home.html")

现在,当我们填写表格时,我们可以在终端中看到如下输出:114.pngrequest.GET返回一个查询字典,可以像任何其他 python 字典一样访问它,最后使用它的数据来应用一些逻辑。 同样,如果传输方式是 POST,则可以使用 request.POST 作为查询字典,将表单中的数据渲染到视图中。

home.html中

<form action = "" method = "POST">
  {% csrf_token %}
  <label for="your_name">Your name: </label>
  <input id="your_name" type="text" name="your_name">
  <input type="submit" value="OK">
</form>

请注意,每当我们创建表单请求时,为了安全起见,Django 都会要求您在表单中添加 {% csrf_token %} 现在,在 views.py 中,让我们检查 request.POST 有什么。

from django.shortcuts import render
# 在此处创建您的视图
def home_view(request):
  print(request.POST)
  return render(request, "home.html")

现在,当我们提交表单时,它会显示如下数据。114.png这样,人们可以使用这些数据来查询数据库或使用一些逻辑操作进行处理,并使用上下文字典传递给模板。

目录
相关文章
|
2月前
|
移动开发 HTML5
HTML5 表单属性3
`&lt;input&gt;` 标签的 `formaction`、`formenctype` 和 `formmethod` 属性分别用于指定表单提交的 URL 地址、数据编码类型和提交方法,这些属性可覆盖 `&lt;form&gt;` 标签中的相应属性,并且主要适用于 `type=&quot;submit&quot;` 和 `type=&quot;image&quot;` 的输入类型。
|
1月前
|
移动开发 JavaScript 前端开发
HTML5 表单属性7
`pattern` 属性使用正则表达式验证 `&lt;input&gt;` 元素的值,适用于 `text`, `search`, `url`, `tel`, `email`, 和 `password` 类型。
|
1月前
|
移动开发 UED HTML5
HTML5 表单属性6
`min`、`max` 和 `step` 属性用于限制 `&lt;input&gt;` 标签中的数值或日期范围。例如,可以设置日期选择器的最早和最晚日期,或限制数字输入框的值范围。`multiple` 属性允许在 `&lt;input&gt;` 中选择多个值,适用于邮箱和文件类型。这些属性增强了表单控件的功能性和用户体验。
|
1月前
|
移动开发 HTML5
HTML5 表单属性5
`height` 和 `width` 属性用于 `&lt;input&gt;` 标签中的 `image` 类型,定义图像的高度和宽度。
|
2月前
|
移动开发 HTML5
HTML5 表单属性4
`formnovalidate` 属性是一个布尔属性,用于 `&lt;input&gt;` 元素,指示该输入在表单提交时不需验证,可覆盖 `&lt;form&gt;` 元素的 `novalidate` 属性,常与 `type=&quot;submit&quot;` 一起使用。示例中展示了如何通过两个提交按钮(一个使用验证,另一个不使用)实现不同的表单提交方式。
|
2月前
|
移动开发 JavaScript 前端开发
HTML5 表单属性2
`novalidate` 是 HTML `&lt;form&gt;` 元素的布尔属性,用于禁用浏览器的默认表单验证功能。当此属性存在时,浏览器不会检查表单字段是否符合预设的验证规则,允许开发者通过 JavaScript 等手段自定义验证逻辑。
|
1月前
|
移动开发 数据安全/隐私保护 HTML5
HTML5 表单属性8
`required`属性确保表单提交前输入框不能为空,适用于多种类型的 `&lt;input&gt;` 标签,如文本、邮箱、密码等。`step`属性则用于指定输入域中合法数值的间隔,常与`max`和`min`属性配合使用,适用于数字、日期等类型。例如,设置`&lt;input type=&quot;number&quot; step=&quot;3&quot;&gt;`可使输入值以3为单位递增或递减。
|
5月前
|
移动开发 数据安全/隐私保护 UED
HTML表单标签详解:如何用HTML标签打造互动网页?
通过合理使用HTML表单标签,可以构建功能丰富、用户友好的互动网页。HTML表单的元素和属性提供了丰富的输入选项和验证功能,使得收集和处理用户输入成为可能。随着HTML5的发展,表单元素的功能性和用户体验将继续得到提升。开发者应充分利用这些工具,为用户打造流畅、互动性强的网页体验。
63 4
|
8月前
|
数据采集 数据安全/隐私保护
HTML表单标签和表单项标签示例
HTML表单标签和表单项标签示例
89 1