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获取从命令行输入数字的方法
Apr 29 Python
python实现简易数码时钟
Feb 19 Python
python实现推箱子游戏
Mar 25 Python
使用python将请求的requests headers参数格式化方法
Jan 02 Python
python3.7通过thrift操作hbase的示例代码
Jan 14 Python
解决windows下python3使用multiprocessing.Pool出现的问题
Apr 08 Python
Python坐标轴操作及设置代码实例
Jun 04 Python
详解python如何引用包package
Jun 07 Python
python怎么提高计算速度
Jun 11 Python
keras slice layer 层实现方式
Jun 11 Python
Pandas 稀疏数据结构的实现
Jul 25 Python
Pygame Time时间控制的具体使用详解
Nov 17 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
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
php流量统计功能的实现代码
2012/09/29 PHP
PHP伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
javascript定义函数的方法
2010/12/06 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
react路由配置方式详解
2017/08/07 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
python中os操作文件及文件路径实例汇总
2015/01/15 Python
Python常用的爬虫技巧总结
2016/03/28 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
《称象》教学反思
2014/04/25 职场文书
2014年电话销售工作总结
2014/12/01 职场文书
参观邀请函范文
2015/02/02 职场文书
Python语言内置数据类型
2022/02/24 Python