🌈 搜索
📅  最后修改于: 2020-10-19 03:30:39             🧑  作者: Mango
任何Web应用程序最重要的方面之一就是为用户提供用户界面。 HTML提供了一个
服务器端脚本必须根据http请求数据重新创建表单元素。因此,要达到这种效果,必须两次定义表单元素,一次是在HTML中定义,一次是在服务器端脚本中定义。
使用HTML表单的另一个缺点是很难(如果不是不可能)动态呈现表单元素。 HTML本身无法提供验证用户输入的方法。
TurboGears依赖于ToscaWidgets2,这是一个灵活的表单呈现和验证库。使用ToscaWidgets,我们可以在Python脚本中定义表单字段,并使用HTML模板呈现它们。也可以将验证应用于tw2字段。
ToscaWidgets库是许多模块的集合。下面列出了一些重要的模块-
tw2.core-它提供核心功能。此模块中的小部件不适用于最终用户。
tw2.forms-这是一个基本的表单库。它包含用于字段,字段集和表单的小部件。
tw2.dynforms-这包含动态表单功能。
tw2.sqla-这是SQLAlchemy数据库的接口。
它包含一个Form类,该类充当自定义表单的基础。有一个TableForm类可用于呈现两列表中的字段。 ListForm将其字段显示在无序列表中。
TextField
A single line text input field
TextArea
Multi-line text input field
CheckBox
Presents a checkable rectangular box with label
CheckBoxList
Multi-selectable group pf check boxes
RadioButton
A toggle button to select/deselect
RadioButtonList
Group of mutually exclusive Radio buttons
PasswordField
Similar to Textfield but input keys are not revealed
CalendarDatePicker
Lets the user to choose a date
SubmitButton
Button to submit a form
ImageButton
Clickable button with an image on top
SingleSelectField
Enables selection of single item from a list
MultipleSelectField
Enables selection of multiple items from the list
FileField
Field for uploading file
EmailField
An email input field
URLField
An input field to enter URL
NumberField
A number spinbox
RangeField
A number slider
在下面的示例中,使用其中一些小部件构造表单。尽管大多数这些小部件都是在tw2.forms中定义的,但CalendarDateField是在tw2.Dynforms模块中定义的。因此,这两个模块以及tw2.core都在开始时导入-
import tw2.core as twc import tw2.forms as twf import tw2.dynforms as twd
ToscaWidgets表单是从tw2.forms.form基类派生的类。所需的小部件放置在Layout对象中。在此示例中,使用TableLayout 。小部件在两列表中呈现。第一列显示标题,第二列显示输入或选择字段。
使用以下构造函数创建TextField对象-
twf.TextField(size, value = None)
如果未提及,则TextField对象采用默认大小,最初为空白。在声明TextArea对象时,可以提及行数和列数。
twf.TextArea("",rows = 5, cols = 30)
NumberField对象是一个TextField,它只能接受数字。在右边框上会产生上下箭头,以增加或减少其中的数字。初始值也可以在构造函数中指定为参数。
twf.NumberField(value)
在CalendarDatePicker框的右侧,显示一个日历按钮。按下时,日期选择器会弹出。用户可以在框中手动键入日期或从日期选择器中选择。
twd.CalendarDatePicker()
EmailField对象提供一个TextField,但是其中的文本必须为电子邮件格式。
EmailID = twf.EmailField()
以下形式也有一个RadioButtonList。此类的构造函数包含一个List对象,作为options参数的值。每个选项的单选按钮将被渲染。默认选择是通过value参数指定的。
twf.RadioButtonList(options = ["option1","option2"],value = option1)
CheckBoxList呈现列表中每个选项的复选框。
twf.CheckBoxList(options = [option1, option2, option3])
下拉列表在此ToscaWidgets库中称为SingleSelectfield。列表对象中与options参数对应的项目构成下拉列表。可见字幕设置为hint_text参数的值。
twf.SingleSelectField(prompt_text = 'text', options=['item1', 'item2', 'item3'])
默认情况下,该表单显示一个“提交”按钮,其标题为“保存”。为了显示另一个标题,创建一个SubmitButton对象并将其指定为value参数。
twf.SubmitButton(value = 'Submit')
表单被提交到URL,该URL被指定为表单的action参数的值。默认情况下,表单数据是通过http POST方法提交的。
action = 'URL'
在下面的代码中,使用上述小部件设计了名为AdmissionForm的表单。将此代码添加到RootController类之前的root.py中。
class AdmissionForm(twf.Form): class child(twf.TableLayout): NameOfStudent = twf.TextField(size = 20) AddressForCorrespondance = twf.TextArea("", rows = 5, cols = 30) PINCODE = twf.NumberField(value = 431602) DateOfBirth = twd.CalendarDatePicker() EmailID = twf.EmailField() Gender = twf.RadioButtonList(options = ["Male","Female"],value = 'Male') Subjects = twf.CheckBoxList(options = ['TurboGears', 'Flask', 'Django', 'Pyramid']) MediumOfInstruction = twf.SingleSelectField(prompt_text = 'choose', options = ['English', 'Hindi', 'Marathi', 'Telugu']) action = '/save_form' submit = twf.SubmitButton(value ='Submit')
现在将此代码另存为twform.html在模板目录中-
TurboGears Form Example ${form.display(value = dict(title = 'default title'))}
在RootController类中(在root.py中),添加以下控制器函数-
@expose('hello.templates.twform') def twform(self, *args, **kw): return dict(page = 'twform', form = MovieForm)
在AdmissionForm类中,我们规定了/ save_form作为操作URL。因此,在RootController中添加save_form()函数。
@expose() def save_movie(self, **kw): return str(kw)
确保服务器正在运行(使用变速箱服务)。在浏览器中输入http:// localhost:8080 / twform 。
按下提交按钮会将这些数据发布到save_form() URL,该URL将以字典对象的形式显示表单数据。
{ 'EmailID': u'lathkar@yahoo.com', 'NameOfStudent': u'Malhar Lathkar', 'Gender': u'Male', 'PINCODE': u'431602', 'DateOfBirth': u'2015-12-29', 'Subjects': [u'TurboGears', u'Flask', u'Django'], 'MediumOfInstruction': u'', 'AddressForCorrespondance': u'Shivaji Nagar\r\nNanded\r\nMaharashtra' }