Django Form设置文本框为readonly操作
用Django开发网站的时候,前端页面内的文本框总是不能被设置为只读,找了一些资料发现可以在form class里面进行设置。
方法一:
首先在自己创建的form.py文件中创建一个my_info_form 类:
** In form.py file ** """ 1. 利用Django form创建自己需要的表单 """ class my_info_form(forms.Form): user_id = forms.IntegerField() user_name = forms.CharField(max_length=254) email = forms.EmailField() """ 上面的这一小段代码就可以在页面上显示出一个表格, 但是表格里面的文本框IntegerField, CharField, EmailField都处于可编辑状态。 大多数情况下我们不想要用户可以随意更改页面展示的内容,所以需要对这些文本框进行设置来改变可编辑状态。 代码如下: """ def __init__(self, *args, **kwargs): super(forms.Form, self).__init__(*args,**kwargs) self.fields['user_id'].widget.attrs['readonly'] = True self.fields['user_name'].widget.attrs['readonly'] = True self.fields['email'].widget.attrs['readonly'] = True """ 编写__init__()方法, 首先, 要调用super(forms.Form, self).__init__(*args,**kwargs), 注意这里的__init__()方法里没有self。*args会传递要展示的信息, **kwargs会传递改变文本框格式的信息。 如果不调用super方法, 会报no fields 错误。 第二, 更改文本框编辑状态: self.fields['user_id'].widget.attrs['readonly'] = True self.fields['user_name'].widget.attrs['readonly'] = True self.fields['email'].widget.attrs['readonly'] = True 第三, 试着运行一下, 你会发现文本框已经不能进行编辑了! """
方法二:
""" 在创建文本框的时候实用Django的widget 设置文本框的属性为 readonly """ class my_info_form(forms.Form): user_id = forms.IntegerField(widget=forms.TextInput(attrs={'readonly': 'readonly'})) user_name = forms.CharField(widget=forms.TextInput(attrs={'readonly': 'readonly'})) email = forms.EmailField(widget=forms.TextInput(attrs={'readonly': 'readonly'}))
补充知识:将input标签设置为不可编辑状态的三种方法
一:disabled
disabled 属性规定应该禁用 input 元素,被禁用的 input 元素,不可编辑,不可复制,不可选择,不能接收焦点,后台也不会接收到传值。设置后文字的颜色会变成灰色。disabled 属性无法与 <input type="hidden"> 一起使用。
示例:
<input type="text" disabled="disabled" />
二:readonly
readonly 属性规定输入字段为只读可复制,但是,用户可以使用Tab键切换到该字段,可选择,可以接收焦点,还可以选中或拷贝其文本。后台会接收到传值. readonly 属性可以防止用户对值进行修改。readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。
示例:
<input type="text" readonly="readonly">
三:readonly unselectable="on"
readonly unselectable="on" 该属性跟disable类似,input 元素,不可编辑,不可复制,不可选择,不能接收焦点,设置后文字的颜色也会变成灰色,但是后台可以接收到传值。
示例:
<input type="text" readonly unselectable="on" >
以上这篇Django Form设置文本框为readonly操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持猪先飞。
相关文章
- 本篇文章是对C#中WinForm控件之Dock顺序调整进行了详细的分析介绍,需要的朋友参考下...2020-06-25
Django def clean()函数对表单中的数据进行验证操作
这篇文章主要介绍了Django def clean()函数对表单中的数据进行验证操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-09- 这篇文章主要介绍了C# Winform中实现主窗口打开登录窗口关闭的方法,这在需要用户名密码的软件项目中是必用的一个技巧,要的朋友可以参考下...2020-06-25
- 下面小编就为大家带来一篇C# winform打开Excel文档的方法总结(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
antd Form组件方法getFieldsValue获取自定义组件的值操作
这篇文章主要介绍了antd Form组件方法getFieldsValue获取自定义组件的值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29- 这篇文章主要给大家介绍C# winform快捷键设置技巧,涉及到C winform快捷键相关知识,对C winform知识感兴趣的朋友可以参考下本篇文章...2020-06-25
c#中Winform实现多线程异步更新UI(进度及状态信息)
本篇文章主要介绍了c#中Winform实现多线程异步更新UI(进度及状态信息) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25- 这篇文章主要介绍了C#实现windows form限制文本框输入的方法,涉及C#限制文本框输入的技巧,非常具有实用价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了angularjs $http实现form表单提交示例,非常具有实用价值,需要的朋友可以参考下 ...2017-06-15
- 这篇文章主要为大家详细介绍了jquery插表单件form使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23
- 这篇文章主要给大家介绍了关于c# winform异步不卡界面的实现方法,文中通过示例代码介绍的非常详细,对大家学习或者使用c#具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-06-25
C# WinForm程序处理后台繁忙导致前台控件假死现象解决方法
这篇文章主要介绍了C# WinForm程序处理后台繁忙导致前台控件假死现象解决方法,本文通过Application.DoEvents()解决这个问题,并讲解了Application.DoEvents()的作用,需要的朋友可以参考下...2020-06-25- 这篇文章主要介绍了C#中winform使用相对路径读取文件的方法,实例分析了C#使用相对路径读取文件的技巧与实际应用,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了js实现文本框输入文字个数限制代码,文本框输入的文字个数并不是无限制的,一般都会限定一个输入最高上限,如何限制,请看本文...2015-12-27
- 这篇文章主要介绍了解决antd Form 表单校验方法无响应的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-28
winform中的ListBox和ComboBox绑定数据用法实例
这篇文章主要介绍了winform中的ListBox和ComboBox绑定数据用法,实例分析了将集合数据绑定到ListBox和ComboBox控件的技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25- 这篇文章主要介绍了C#在Winform开发中使用Grid++报表,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-25
- 这篇文章主要为大家详细介绍了C# WinForm程序设计简单计算器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
C# WinForm控件对透明图片重叠时出现图片不透明的简单解决方法
这篇文章主要介绍了C# WinForm控件对透明图片重叠时出现图片不透明的简单解决方法,结合实例形式分析了WinForm图片重叠后造成图片不透明的原因与相应的解决方法,需要的朋友可以参考下...2020-06-25- 这篇文章主要介绍了Angular实现form自动布局的相关资料,以代码片段的形式分析了Angular实现form自动布局的实现方法,感兴趣的小伙伴们可以参考一下...2016-02-01