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