正文 

当前位置： 首页 > 问答 >

使用 Flask-WTForms，如何设置 html 表单部分的样式？

     2023-02-23     211

关键词：

【中文标题】使用 Flask-WTForms，如何设置 html 表单部分的样式？【英文标题】：Using Flask-WTForms, how do I style my form section of the html? 【发布时间】：2016-04-16 18:04:56 【问题描述】：

我阅读了 Flask-WTF 极其简化的 wiki，但对我能用它做什么并不太了解。我的印象是html的<form>部分现在只能看起来像

<form method="post">
     form.hidden_tag() 
     form.name 
    <input type="submit">
</form>

但我真的很想使用物化来设置我的样式，例如：

        <div class="row">
            <div class="input-field col s6">
                <i class="material-icons prefix">account_circle</i>
                <input value="FN" id="first_name" type="text" class="validate">
                <label class="active" for="first_name">First Name</label>
            </div>
            <div class="input-field col s6">
                <input value="LN" id="last_name" type="text" class="validate">
                <label class="active" for="last_name">Last Name</label>
            </div>
        </div>

我可以将 form.first_name 和 form.last_name 放入哪里？

编辑：让我详细说明一下我的答案： 例如，我想要像 Materialized datepicker 之类的东西（一个很好的弹出日历，让用户可以选择日期），这应该在 &lt;input class='datepicker' length="50"&gt; 中，但现在我用 @987654329 替换整个 &lt;input&gt; 行@...我失去了编辑课程的特权，什么都没有。

【问题讨论】：

【参考方案1】：

WTForms 字段可以是called，其属性将在它们呈现的输入上设置。将样式、JavaScript 功能等所需的属性传递给字段，而不仅仅是引用字段。标签的行为方式相同，可以使用field.label 访问。

for、value、type、id 和 name 不需要传递，因为它们是自动处理的。有一些rules 用于处理属性的特殊情况。如果属性名称是 Python 关键字，例如 class，请附加下划线：class_。破折号不是有效的 Python 名称，因此单词之间的下划线将转换为破折号； data_toggle 变为 data-toggle。

 form.first_name(class_='validate') 
 form.first_name.label(class_='active') 

 form.begins(class_='datepicker', length=50)

请注意，不需要直接调用任何链接方法，这些文档仅描述调用字段时的行为。

【讨论】：

【参考方案2】：

在 WTForms 2.1 我使用extra_classes，如下行：

1.第一种方式

 f.render_form_field(form.first_name, extra_classes='ourClasses')

或者在你的情况下就像这样：

 form.first_name, extra_classes='ourClasses'

我们也可以在表单字段中使用render_kw 属性，如下面的第二种方式：

2。第二种方式

style='class': 'ourClasses', 'style': 'width:50%; other_css_style;'
first_name = StringField('First name',
                     validators=[InputRequired(),Length(1, 64)],
                     render_kw=style)

但我更喜欢使用第一种方式。

【讨论】：

f 在您的第一种方式中指的是什么？

如何通过 AJAX 使用 Flask-WTForms CSRF 保护？

】如何通过AJAX使用Flask-WTFormsCSRF保护？【英文标题】：HowtouseFlask-WTFormsCSRFprotectionwithAJAX?【发布时间】：2015-10-3112:33:39【问题描述】：Flask-WTForms提供CSRF保护。它在使用普通HTML表单时效果很好，但在使用AJAX时过程不太清楚。我的... 查看详情

在网站的主要布局模板中使用 Flask-wtforms 的困难

】在网站的主要布局模板中使用Flask-wtforms的困难【英文标题】：DifficultieswithhavingaFlask-wtformsinthemainlayouttemplateofthewebsite【发布时间】：2021-11-1714:20:31【问题描述】：我过去一直在使用烧瓶、python和引导程序在网站上工作。我在我... 查看详情

flask-wtforms简单使用(代码片段)

安装wtforms2.2.1直接上代码:app.py文件:fromflaskimportFlask,render_template,requestfromwtformsimportForm,validatorsfromwtforms.fieldsimportsimple,core#form字段设计classRegForm(Form):#simple字段类型#StringField和TextAreaField都是字符串的意思,StringField支持的类型少于St... 查看详情

6---flask-wtforms(代码片段)

6、Flask-WTForms Flask-WTF是简化了WTForms操作的一个第三方库。WTForms表单的两个主要功能是验证用户提交数据的合法性以及渲染模板。还有其它一些功能：CSRF保护，文件上传等。安装方法：pipinstallflask-wtf1.1.WTForms简单验证fromflaski... 查看详情

flask-wtforms

what‘sthe WTForms　　WTForms是一个支持多个web框架的form组件，主要用于对用户请求数据进行验证。其作用是可以为轻量级的框架提供类似Django的form的功能。安装：pip3installwtforms　源码流程分析实例化流程分析#源码流程1.执行typ... 查看详情

flask-wtforms(代码片段)

简介WTForms是一个支持多个web框架的form组件，主要用于对用户请求数据进行验证。安装：1pip3installwtforms用户登录注册示例1.用户登录当用户登录时候，需要对用户提交的用户名和密码进行多种格式校验。如：用户不能为空；用户... 查看详情

如何设置网页默认index.htm而不是index.php？

如题，网站是PW系统，FTP打开后根目录里没有Apache，因此也无法通过更改httpd.conf来改变html和php的优先级，导致每次一输入域名就直接跳转到了index.php，中间的静态引导页index.htm完全无法调用。我想请问，怎样使输入域名后打开... 查看详情

Flask-WTForms 在我的项目目录中找不到 WTForms

】Flask-WTForms在我的项目目录中找不到WTForms【英文标题】：Flask-WTFormscan\'tfindWTFormsinmyprojectdirectory【发布时间】：2012-07-2708:38:54【问题描述】：这是我在***上的第一篇文章，大家好。我正在做博客应用程序来学习Python和Flask，我想... 查看详情

flask-wtforms(代码片段)

WTForms表单验证基本使用Flask-WTF是简化了WTForms操作的一个第三方库，WTForms表单的两个主要功能是验证用户提交数据的合法性以及渲染模板。当然还包括一些其他的功能：CSRF保护，文件上传等。安装Flask-WTF默认也会安装WTForms，因... 查看详情

如何使用win32com将.htm添加到电子邮件正文(代码片段)

我需要使用win32com.client制作电子邮件，在.htm上添加带有mail.HtmlBody扩展名的签名。但是，每次执行此操作时，都会得到UnicodeDecodeError。换句话说，如何纠正UnicodeDecodeError问题并将我的字符串和htm文件添加到HtmlBody？self.mail=win32.Disp... 查看详情

如何设置404页面，404错误页面自定义方法

...p等等)注意：(1).切记不要将404错误跳转到网站主页，比如使用了js脚本或者metarefresh跳转技术。否则可能会导致主页在搜索引擎中消失或者不被收录.(2).切记不要使用绝对URL如果使用绝对URL返回的状态码是“302”+“200”2、IIS/ASP.ne... 查看详情

如何把project文件保存为excel格式？

...为Web页”。Web页就是网页文件，在导出向导选择下一步，使用现有映射，选择数据映射，按向导一步步进行，htm根据实际情况改成你所需要的名字，如：“XX报表．htm”,再点击“保存”。注意，在改名时绝不能把后面的．htm去掉... 查看详情

如何使用flashfxp软件上传phpcms程序并设置目录属性

　　简介：在linux主机上安装一些cms或者bbs的时候经常需要把某些目录或者文件设置为0777，但是有时候目录下面还有许多东西，一个一个地设置太麻烦了。那么能不能批量修改呢？本文将告诉您如何通过flashfxp批量修改目录属性... 查看详情

如何设置自己的电脑与网上的时间一致呢？

...算机内部时钟自动同步校准1.1NTP网络时间服务协议如果您使用的计算机可以直接联网，您可以使用网络时间服务协议(NTP,networktimeprotocol)来进行计算机内部时钟的自动同步校准。欲了解其工作原理，请访问-time.htm(中文网页)，(中... 查看详情

如何将.htm重定向到特定域的非.htm？(代码片段)

....htm$https://new-domain.com/contact/[R=301,L]但这不起作用。我必须使用RewriteCond，因为我正在处理一个多域实例。有人能告诉我什么是缺失或错误的吗？编辑另外.htaccess看起来像这样：RewriteEngineOnRewriteCond%HTTP_HOST^(www.)?old-domain.com$[NC]Rewrite... 查看详情

如何在弹性盒子中淡入淡出？

...页面的一部分？我曾经用\'display：0;\'来做到这一点然后使用jQuery.fadeIn()。但是现在如果我将display设置为0，当我将它淡入时，我当然会失去盒子的灵活性。如果我使用jQuery将display设置为flex，那么它只会出现，不会淡入。HTM 查看详情

过滤器的url-pattern设置了a.htm，访问a.htm，不走过滤器？

...ttern等于/a.htm，路径都没问题，访问a.htm，用debug在过滤器设置断点，发现根本就不经过过滤器，直接a.htm就打开了？参考技术A如果你要让所有访问页面请求进过过滤器的话直接<url-pattern>/*.html</url-pattern>就可以了 查看详情

mfc中webbrowser.navigate方法如何调用本地的.htm文件？(代码片段)

-------------------------------------------------------------------------------------------------------------------------------------------   最近开发MFC程序，需要使用WebBrowser控件来调用百度地图API，前端代码写在h 查看详情