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下如何让web元素的生成更简单的分析
Jul 17 Python
Python的净值数据接口调用示例分享
Mar 15 Python
Python使用poplib模块和smtplib模块收发电子邮件的教程
Jul 02 Python
在python中bool函数的取值方法
Nov 01 Python
详解如何用django实现redirect的几种方法总结
Nov 22 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
Apr 06 Python
Python获取数据库数据并保存在excel表格中的方法
Jun 12 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
Oct 30 Python
基于python实现雪花算法过程详解
Nov 16 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
May 18 Python
Appium+Python实现简单的自动化登录测试的实现
Jan 26 Python
python中Pyqt5使用Qlabel标签播放视频
Apr 22 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 include任意文件或URL介绍
2014/04/29 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
JTrackBar水平拖动效果
2007/07/15 Javascript
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
Vue.js划分组件的方法
2017/10/29 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
jquery获取img的src值实例介绍
2019/01/16 jQuery
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
职称评定自我鉴定
2014/03/18 职场文书
2014年财政所工作总结
2014/11/22 职场文书
2014年工程部工作总结
2014/11/25 职场文书
2014年小学英语教师工作总
2014/12/03 职场文书
安装工程师岗位职责
2015/02/13 职场文书
胡桃夹子观后感
2015/06/11 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python
详解php中流行的rpc框架
2021/05/29 PHP
frg-100简单操作(设置)说明
2022/04/05 无线电