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环境下安装使用异步任务队列包Celery的基础教程
May 07 Python
Python构造自定义方法来美化字典结构输出的示例
Jun 16 Python
机器学习经典算法-logistic回归代码详解
Dec 22 Python
浅析Python pandas模块输出每行中间省略号问题
Jul 03 Python
对python添加模块路径的三种方法总结
Oct 16 Python
python绘制散点图并标记序号的方法
Dec 11 Python
python实现windows倒计时锁屏功能
Jul 30 Python
Python获取一个用户名的组ID过程解析
Sep 03 Python
Jupyter notebook运行Spark+Scala教程
Apr 10 Python
解决jupyter运行pyqt代码内核重启的问题
Apr 16 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
Jan 28 Python
详解分布式系统中如何用python实现Paxos
May 18 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
PHP 文件类型判断代码
2009/03/13 PHP
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
html超链接打开窗口大小的方法
2013/03/05 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
Python网络爬虫项目:内容提取器的定义
2016/10/25 Python
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
python制作mysql数据迁移脚本
2019/01/01 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
matplotlib自定义鼠标光标坐标格式的实现
2021/01/08 Python
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
一套Delphi的笔试题二
2013/05/11 面试题
编辑求职信样本
2013/12/16 职场文书
冰淇淋店创业计划书范文
2013/12/27 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
小学语文国培感言
2014/03/04 职场文书
质量月活动总结
2014/08/26 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
中秋节寄语2015
2015/03/24 职场文书
母亲去世追悼词
2015/06/23 职场文书
2019秋季运动会口号
2019/06/25 职场文书
docker-compose部署Yapi的方法
2022/04/08 Servers