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中PDB模块中的命令来调试Python代码的教程
Mar 30 Python
Fabric 应用案例
Aug 28 Python
Python实现的单向循环链表功能示例
Nov 10 Python
Python3 循环语句(for、while、break、range等)
Nov 20 Python
Python制作豆瓣图片的爬虫
Dec 28 Python
解决python3读取Python2存储的pickle文件问题
Oct 25 Python
利用python脚本如何简化jar操作命令
Feb 24 Python
详解Python打包分发工具setuptools
Aug 05 Python
Python安装及Pycharm安装使用教程图解
Sep 20 Python
Python 使用Opencv实现目标检测与识别的示例代码
Sep 08 Python
Pytorch数据读取之Dataset和DataLoader知识总结
May 23 Python
Python中递归以及递归遍历目录详解
Oct 24 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+JS实现搜索自动提示(实例)
2013/06/09 PHP
PHP中session变量的销毁
2014/02/27 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
XML的代替者----JSON
2007/07/21 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
2017/11/09 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
js判断密码强度的方法
2020/03/18 Javascript
vue实现评价星星功能
2020/06/30 Javascript
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
Python工程师面试题 与Python Web相关
2016/01/14 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
python构建深度神经网络(续)
2018/03/10 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
python保留小数位的三种实现方法
2020/01/07 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
优秀中专生推荐信
2013/11/17 职场文书
学习十八大报告感言
2014/02/04 职场文书
捐书倡议书
2014/08/29 职场文书
2014年营业员工作总结
2014/11/18 职场文书
团结友爱主题班会
2015/08/13 职场文书
Python实现位图分割的效果
2021/11/20 Python