在Django的form中使用CSS进行设计的方法

2024-09-28 13:49:56

修改form的显示的最快捷的方式是使用CSS。尤其是错误列表，可以增强视觉效果。自动生成的错误列表精确的使用`` <ul class=”errorlist”>``，这样，我们就可以针对它们使用CSS。下面的CSS让错误更加醒目了：

<style type="text/css">
  ul.errorlist {
    margin: 0;
    padding: 0;
  }
  .errorlist li {
    background-color: red;
    color: white;
    display: block;
    font-size: 10px;
    margin: 0 0 3px;
    padding: 4px 5px;
  }
</style>

虽然，自动生成HTML是很方便的，但是在某些时候，你会想覆盖默认的显示。 {{form.as_table}}和其它的方法在开发的时候是一个快捷的方式，form的显示方式也可以在form中被方便地重写。

每一个字段部件(<input type=”text”>, <select>, <textarea>, 或者类似)都可以通过访问{{form.字段名}}进行单独的渲染。

<html>
<head>
  <title>Contact us</title>
</head>
<body>
  <h1>Contact us</h1>

  {% if form.errors %}
    <p style="color: red;">
      Please correct the error{{ form.errors|pluralize }} below.
    </p>
  {% endif %}

  <form action="" method="post">
    <div class="field">
      {{ form.subject.errors }}
      <label for="id_subject">Subject:</label>
      {{ form.subject }}
    </div>
    <div class="field">
      {{ form.email.errors }}
      <label for="id_email">Your e-mail address:</label>
      {{ form.email }}
    </div>
    <div class="field">
      {{ form.message.errors }}
      <label for="id_message">Message:</label>
      {{ form.message }}
    </div>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

{{ form.message.errors }} 会在 <ul class="errorlist"> 里面显示，如果字段是合法的，或者form没有被绑定，就显示一个空字符串。我们还可以把 form.message.errors 当作一个布尔值或者当它是list在上面做迭代，例如：

<div class="field{% if form.message.errors %} errors{% endif %}">
  {% if form.message.errors %}
    <ul>
    {% for error in form.message.errors %}
      <li><strong>{{ error }}</strong></li>
    {% endfor %}
    </ul>
  {% endif %}
  <label for="id_message">Message:</label>
  {{ form.message }}
</div>

在校验失败的情况下, 这段代码会在包含错误字段的div的class属性中增加一个”errors”，在一个有序列表中显示错误信息。

jQuery Mobile动态刷新页面样式的实现方法

当我们使用Ajax或者javascript动态在页面上添加元素后,如添加select控件的option元素,添加ul的li元素.添加之后我们会发现,它们显示的样式不是jQuery Mobile的炫酷样式了,而变成了很丑陋的元素样式.如下图所示: 代码如下: <script> function myFunction() { var ul = document.getElementById("myul"); var li1 = "<li data-role=\&
动态刷新 dorado树的js代码

function flushDataTree() { dataset_mainMenuTemp.setShowLoadingTip(true); var rootNode = tree_Menu.getFirstRootNode(); tree_Menu.setCurrentNode(rootNode); tree_Menu.expandNode(rootNode); dataset_mainMenu.clearData(); dataset_mainMenuTemp.flushData();
详解Django中的form库的使用

Django带有一个form库,称为django.forms,这个库可以处理我们本章所提到的包括HTML表单显示以及验证. 接下来我们来深入了解一下form库,并使用她来重写contact表单应用. Django的newforms库在Django社区上会经常看到django.newforms这个词语.当人们讨论django.newforms,其实就是我们本章里面介绍的django.forms. 改名其实有历史原因的. 当Django一次向公众发行时,它有一个复杂难懂的表单系统:django.f
使用Django Form解决表单数据无法动态刷新的两种方法

一.无法动态更新数据的实例 1. 如下,数据库中创建了班级表和教师表,两张表的对应关系为"多对多" from django.db import models class Classes(models.Model): title = models.CharField(max_length=32) class Teacher(models.Model): name = models.CharField(max_length=32) t2c = models.ManyToManyField(
Python的Django框架中forms表单类的使用方法详解

Form表单的功能自动生成HTML表单元素检查表单数据的合法性如果验证错误,重新显示表单(数据不会重置) 数据类型转换(字符类型的数据转换成相应的Python类型) Form相关的对象包括 Widget:用来渲染成HTML元素的工具,如:forms.Textarea对应HTML中的<textarea>标签 Field:Form对象中的一个字段,如:EmailField表示email字段,如果这个字段不是有效的email格式,就会产生错误. Form:一系列Field对象的集合,负责验证和
在Django的form中使用CSS进行设计的方法

修改form的显示的最快捷的方式是使用CSS. 尤其是错误列表,可以增强视觉效果.自动生成的错误列表精确的使用`` <ul class="errorlist">``,这样,我们就可以针对它们使用CSS. 下面的CSS让错误更加醒目了: <style type="text/css"> ul.errorlist { margin: 0; padding: 0; } .errorlist li { background-color: red; co
django项目登录中使用图片验证码的实现方法

应用下创建untils文件夹放置封装图片验证码的函数创建validCode.py文件定义验证码规则 import random def get_random_color(): return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)) def get_valid_code_img(request): # 方式: from PIL import Image, ImageDraw, ImageFon
发现四种在网页中使用CSS样式表的方法

如何在网页中插入CSS 前面我们了解了CSS的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用.当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外部样式表.内部样式表.导入外表样式表和内嵌样式. 1. 链入外部样式表链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用< link >标记链接到这个样式表文件,这个标记必须放到页面的< head >区内,如下: 复制代码代码如下: <head> -- &l
Django ORM 查询表中某列字段值的方法

1.什么是ORM ORM 全拼Object-Relation Mapping. 中文意为对象-关系映射. 在MVC/MVT设计模式中的Model模块中都包括ORM 2.ORM优势 (1)只需要面向对象编程, 不需要面向数据库编写代码. 对数据库的操作都转化成对类属性和方法的操作. 不用编写各种数据库的sql语句. (2)实现了数据模型与数据库的解耦, 屏蔽了不同数据库操作上的差异. 不在关注用的是mysql.oracle...等. 通过简单的配置就可以轻松更换数据库, 而不需要修改代码. 3.
在 React Native 中使用 CSS Modules的配置方法

目录安装依赖和配置使用示例有些前端工程师希望也能像开发 web 应用那样,使用 CSS Modules 来开发 React Native.本文将介绍如何在 React Native 中使用 CSS Modules. 安装依赖和配置首先安装 react-native-sass-transformer 使得我们可以在 React Native 应用中使用 sass 样式. yarn add react-native-sass-transformer sass -D 参考如下配置,修改 me
在Django的模型中执行原始SQL查询的方法

有时候你会发现Django数据库API带给你的也只有这么多,那你可以为你的数据库写一些自定义SQL查询. 你可以通过导入django.db.connection对像来轻松实现,它代表当前数据库连接. 要使用它,需要通过connection.cursor()得到一个游标对像. 然后,使用cursor.execute(sql, [params])来执行SQL语句,使用cursor.fetchone()或者cursor.fetchall()来返回记录集. 例如: >>> from django
IE中jquery.form中ajax提交没反应解决方法分享

花了三个钟头,反复查,发现,原来是改了处理页面的返回头信息. 加上了 application/x-javascript ,ie8就不干活了. 如果是text/html,就行,或者不指定也行. 算bug不?让我问候一下写这段代码的ie开发人员吧. ajax的头信息,编码看来都要注意哎. ajax提交表单数据的方式介绍 Url参数提交数复制代码代码如下: <script type ="text/javascript" src ="../js/jquery.js"
在Django的视图中使用form对象的方法

在学习了关于Form类的基本知识后,你会看到我们如何把它用到视图中,取代contact()代码中不整齐的部分. 一下示例说明了我们如何用forms框架重写contact(): # views.py from django.shortcuts import render_to_response from mysite.contact.forms import ContactForm def contact(request): if request.method == 'POST': form =
自定义Django Form中choicefield下拉菜单选取数据库内容实例

工作中遇到的问题,自定义了一个forms.form表单,某项需要作出下拉菜单,下拉菜单中的选项需要从数据库(objectForm models)中提取. form.py为: class objectForm(forms.Form): pre = choicefield(lable = "工作") 最后的解决办法: 1.定义一个函数 def get_object(request): r = [('', '----')] for obj in objectModels.objects.al
django为Form生成的label标签添加class方式

使用Form生成html标签的时候,虽然提供了widget的方法可以自定义标签的要是,但是只能给生成的input标签添加样式,对于生成的label标签无法添加样式. 而很多场景下需要为label和input都添加class以实现自定义样式. 测试环境创建一个Form,通过Form帮我们生成HTML: # urls.py 文件,对应关系 path('email/', views.email), # forms.py 文件 from django.forms import Form from dj

在Django的form中使用CSS进行设计的方法

相关推荐

随机推荐