govuk frontend wtf下载govuk frontend wtf源代码下载

govuk frontend wtf

三方组件

3.2.0

下载

gov.uk前端wtforms小部件

gov.uk前端wtforms是gov.uk设计系统的社区工具。设计系统团队对此不承担任何责任，也不能支持您使用它。如果您需要帮助，请直接与维护人员联系或要请求功能。

该存储库包含一组WTFORMS的小部件，用于使用gov.uk前端组件样式渲染WTFORM字段。这是使用原始gov.uk前端nunjucks Macros的gov.uk前端Jinja港口的Jinja Macros完成的。这些由gov.uk前端发行最新，经过彻底测试，并产生100％的同等标记。

此方法还将在适当的位置呈现关联的错误消息，显示页面顶部的错误摘要组件并设置所有相关的可访问性ARIA属性。将适当的小部件添加到您现有的python类中，以及更简单的模板，可以快速且易于生成完全符合gov.uk的表单。

如果您想构建一个完整的烧瓶应用程序，该应用程序与gov.uk Frontend Jinja和gov.uk frontend wtforms集成在一起，请使用gov.uk前端烧瓶模板存储库来生成您的应用程序。

如何使用

有关更详细的示例，请参阅演示应用程序源代码。

运行pip install govuk-frontend-wtf后，请确保您告诉Jinja使用PackageLoader从何处加载模板，注册WTFormsHelpers ，然后为SECRET_KEY设置环境变量。

app/__init__.py ：

 from flask import Flask
from govuk_frontend_wtf . main import WTFormsHelpers
from jinja2 import ChoiceLoader , PackageLoader , PrefixLoader

app = Flask ( __name__ )
app . config [ "SECRET_KEY" ] = os . environ . get ( "SECRET_KEY" )

app . jinja_loader = ChoiceLoader (
    [
        PackageLoader ( "app" ),
        PrefixLoader (
            {
                "govuk_frontend_jinja" : PackageLoader ( "govuk_frontend_jinja" ),
                "govuk_frontend_wtf" : PackageLoader ( "govuk_frontend_wtf" ),
            }
        ),
    ]
)

WTFormsHelpers ( app )

导入并在您的表单类中的每个字段中包括相关的小部件（请参见下表）。请注意，在此示例中， widget=GovTextInput()是相对于标准烧瓶-WTF表单定义的唯一差异。

app/forms.py ：

 from flask_wtf import FlaskForm
from govuk_frontend_wtf . wtforms_widgets import GovSubmitInput , GovTextInput
from wtforms import StringField , SubmitField
from wtforms . validators import Email , InputRequired , Length


class ExampleForm ( FlaskForm ):
    email_address = StringField (
        "Email address" ,
        widget = GovTextInput (),
        validators = [
            InputRequired ( message = "Enter an email address" ),
            Length ( max = 256 , message = "Email address must be 256 characters or fewer" ),
            Email ( message = "Enter an email address in the correct format, like [email protected]" ),
        ],
        description = "We’ll only use this to send you a receipt" ,
    )

    submit = SubmitField ( "Continue" , widget = GovSubmitInput ())

创建一条路由以服务您的表单和模板。

app/routes.py ：

 from flask import redirect , render_template , url_for

from app import app
from app . forms import ExampleForm

@ app . route ( "/" )
def index ():
    return render_template ( "index.html" )


@ app . route ( "/example-form" , methods = [ "GET" , "POST" ])
def example ():
    form = ExampleForm ()
    if form . validate_on_submit ():
        return redirect ( url_for ( "index" ))
    return render_template ( "example_form.html" , form = form )

最后，在您的模板中，如果有任何形式验证错误，请根据gov.uk设计系统指南适当设置页面标题。在content块开始时包括govukErrorSummary()组件。根据关联的组件宏选项，将字典中的参数传递到您的表单字段。

app/templates/example_form.html ：

{% extends "base.html" %}

{%- from 'govuk_frontend_jinja/components/error-summary/macro.html' import govukErrorSummary -%}

{% block pageTitle %}{%- if form and form.errors %}Error: {% endif -%}Example form – GOV.UK Frontend WTForms Demo{% endblock %}

{% block content %}
< div class =" govuk-grid-row " >
    < div class =" govuk-grid-column-two-thirds " >
        {% if form.errors %}
            {{ govukErrorSummary(wtforms_errors(form)) }}
        {% endif %}

        < h1 class =" govuk-heading-xl " > Example form </ h1 >

        < form action ="" method =" post " novalidate >
            {{ form.csrf_token }}
            
            {{ form.email_address(params={
              'type': 'email',
              'autocomplete': 'email',
              'spellcheck': false
            }) }}
            
            {{ form.submit }}
        </ form >
    </ div >
</ div >
{% endblock %}

小部件

可用的小部件及其相应的烧瓶WTF字段类型如下：

WTFORMS字段	州长英国小部件	笔记
布尔菲尔德	GovCheckBoxInput
datefield	GovDateInput
DateTimeField	GovDateInput
十进制	GovTextinput
文件场	GovFileInput
多filefield	govfileInput（多重= true）	请注意，在表单类中调用小部件时，您需要指定`multiple=True` 。不是当您在Jinja模板中渲染它时。
弗拉特菲尔德	GovTextinput
Integerfield	GovTextinput	如果需要使用HTML5号元素，请使用`params`指定`type` 。这不会自动发生。
密码字段	GovPasswordInput
放射线	govradioput
Selectiff	GovSelect
SelectMultipleField	GovcheckBoxEsInput	请注意，这将复选框作为`<select multiple>`元素皱眉。
提交菲尔德	GovSubmitinput
Stringfield	GovTextinput
Textareafield	Govtextarea，Govcharactercount

为了使用GovTextInput生成电子邮件字段之类的内容，您需要在渲染如下时传递其他参数：

{{ form.email_address(params={'type': 'email', 'autocomplete': 'email', 'spellcheck': false}) }}

运行测试

python3 -m venv venv
source venv/bin/activate
pip install -r tests/requirements.txt
pytest --cov=govuk_frontend_wtf --cov-report=term-missing --cov-branch