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 相关文章推荐
Linux下用Python脚本监控目录变化代码分享
May 21 Python
解析Python中的__getitem__专有方法
Jun 27 Python
Python编码类型转换方法详解
Jul 01 Python
Python遍历文件夹和读写文件的实现代码
Aug 28 Python
安装Python和pygame及相应的环境变量配置(图文教程)
Jun 04 Python
Python获取系统所有进程PID及进程名称的方法示例
May 24 Python
查看python下OpenCV版本的方法
Aug 03 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
Dec 19 Python
python basemap 画出经纬度并标定的实例
Jul 09 Python
Python占用的内存优化教程
Jul 28 Python
用Python生成HTML表格的方法示例
Mar 06 Python
python 提高开发效率的5个小技巧
Oct 19 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
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
php实现有趣的人品测试程序实例
2015/06/08 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
js 操作select相关方法函数
2009/12/06 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
JavaScript知识点整理
2015/12/09 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
python中类的一些方法分析
2014/09/25 Python
一些常用的Python爬虫技巧汇总
2016/09/28 Python
python函数的5种参数详解
2017/02/24 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
python数据归一化及三种方法详解
2019/08/06 Python
python制作朋友圈九宫格图片
2019/11/03 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
python:动态路由的Flask程序代码
2019/11/22 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
自立自强的名人事例
2014/02/10 职场文书
物流管理毕业生自荐信范文
2014/03/15 职场文书
二年级学生评语大全
2014/04/23 职场文书
主要领导对照检查材料
2014/08/26 职场文书
技术经济专业求职信
2014/09/03 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
避暑山庄导游词
2015/02/04 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技