django表单的Widgets使用详解


Posted in Python onJuly 22, 2019

前言

不要将Widget与表单的fields字段混淆。表单字段负责验证输入并直接在模板中使用。而Widget负责渲染网页上HTML表单的输入元素和提取提交的原始数据。widget是字段的一个内在属性,用于定义字段在浏览器的页面里以何种HTML元素展现。

一、指定使用的widget

每个字段都有一个默认的widget类型。如果你想要使用一个不同的Widget,可以在定义字段时使用widget参数。 像这样:

from django import forms

class CommentForm(forms.Form):
  name = forms.CharField()
  url = forms.URLField()
  comment = forms.CharField(widget=forms.Textarea)

这将使用一个Textarea Widget来展现表单的评论字段,而不是默认的TextInput Widget。

二、设置widget的参数

许多widget具有可选的额外参数,下面的示例中,设置了SelectDateWidget的years 属性,注意参数的传递方法:

from django import forms

BIRTH_YEAR_CHOICES = ('1980', '1981', '1982')
FAVORITE_COLORS_CHOICES = (
  ('blue', 'Blue'),
  ('green', 'Green'),
  ('black', 'Black'),
)

class SimpleForm(forms.Form):
  birth_year = forms.DateField(widget=forms.SelectDateWidget(years=BIRTH_YEAR_CHOICES))
  favorite_colors = forms.MultipleChoiceField(
    required=False,
    widget=forms.CheckboxSelectMultiple,
    choices=FAVORITE_COLORS_CHOICES,
  )

三、为widget添加CSS样式

默认情况下,当Django渲染Widget为实际的HTML代码时,不会帮你添加任何的CSS样式,也就是说网页上所有的TextInput元素的外观是一样的。

看下面的表单:

from django import forms

class CommentForm(forms.Form):
  name = forms.CharField()
  url = forms.URLField()
  comment = forms.CharField()

这个表单包含三个默认的TextInput Widget,以默认的方式渲染,没有CSS类、没有额外的属性。每个Widget的输入框将渲染得一模一样,丑陋又单调:

>>> f = CommentForm(auto_id=False)
>>> f.as_table()
<tr><th>Name:</th><td><input type="text" name="name" required /></td></tr>
<tr><th>Url:</th><td><input type="url" name="url" required /></td></tr>
<tr><th>Comment:</th><td><input type="text" name="comment" required /></td></tr>

在真正的网页中,你可ending不想让每个Widget看上去都一样。可能想要给comment一个更大的输入框,可能想让‘name' Widget具有一些特殊的CSS类。

可以在创建Widget时使用Widget.attrs参数来实现这一目的:

class CommentForm(forms.Form):
  name = forms.CharField(widget=forms.TextInput(attrs={'class': 'special'}))
  url = forms.URLField()
  comment = forms.CharField(widget=forms.TextInput(attrs={'size': '40'}))

注意参数的传递方式!

这次渲染后的结果就不一样了:

>>> f = CommentForm(auto_id=False)
>>> f.as_table()
<tr><th>Name:</th><td><input type="text" name="name" class="special" required /></td></tr>
<tr><th>Url:</th><td><input type="url" name="url" required /></td></tr>
<tr><th>Comment:</th><td><input type="text" name="comment" size="40" required /></td></tr>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python正则表达式知识汇总
Sep 22 Python
PyCharm鼠标右键不显示Run unittest的解决方法
Nov 30 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
Nov 30 Python
Python匿名函数及应用示例
Apr 09 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
Apr 23 Python
Python爬虫抓取技术的一些经验
Jul 12 Python
python自动化测试之DDT数据驱动的实现代码
Jul 23 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
Mar 02 Python
Python使用Paramiko控制liunx第三方库
May 20 Python
想学画画?python满足你!
Dec 24 Python
如何利用Python实现一个论文降重工具
Jul 09 Python
python编程简单几行代码实现视频转换Gif示例
Oct 05 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
Jul 22 #Python
超简单的Python HTTP服务
Jul 22 #Python
对python 中re.sub,replace(),strip()的区别详解
Jul 22 #Python
django框架CSRF防护原理与用法分析
Jul 22 #Python
全面了解django的缓存机制及使用方法
Jul 22 #Python
python logging模块书写日志以及日志分割详解
Jul 22 #Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
Jul 22 #Python
You might like
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
jQuery ui 1.7更新小结
2009/08/15 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
vue项目实战总结篇
2018/02/11 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
Python中正则表达式的详细教程
2015/04/30 Python
python实现抖音视频批量下载
2018/06/20 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
会计专业大学生求职信范文
2014/01/28 职场文书
工程专业求职自荐书范文
2014/02/08 职场文书
小班秋游活动方案
2014/02/22 职场文书
工厂搬迁方案
2014/05/11 职场文书
大学生赌博检讨书
2014/09/22 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
任命通知范文
2015/04/21 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
导游词之太原天龙山
2020/01/02 职场文书
Redis的字符串是如何实现的
2021/10/24 Redis
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL