govuk frontend wtfダウンロード-Govuk govuk frontend wtfソースコードダウンロード

govuk frontend wtf

サードパーティ製コンポーネント

3.2.0

ダウンロード

gov.uk frontend wtformsウィジェット

gov.uk frontend wtformsは、gov.uk設計システムのコミュニティツールです。設計システムチームはそれに対して責任を負わず、それを使用することであなたをサポートすることはできません。ヘルプが必要な場合、または機能をリクエストする場合は、メンテナーに直接お問い合わせください。

このリポジトリには、gov.ukフロントエンドコンポーネントスタイリングを使用してWTFORMフィールドをレンダリングするために使用されるWTFORMSウィジェットのセットが含まれています。これは、元のgov.uk frontend nunjucks macrosのgov.uk frontend jinjaポートのJinjaマクロを使用して行われます。これらはGov.uk FrontEndリリースで最新の状態に保たれ、徹底的にテストされ、100％同等のマークアップを生成します。

また、このアプローチは、関連するエラーメッセージを適切な場所にレンダリングし、ページの上部にエラー要約コンポーネントを表示し、関連するすべてのアクセシビリティARIA属性を設定します。既存のフォームPythonクラスに適切なウィジェットを追加し、はるかにシンプルなテンプレートとともに、完全にgov.ukに準拠したフォームを迅速かつ簡単に作成できます。

gov.uk frontend jinjaおよびgov.uk frontend wtformsと統合された完全に機能するフラスコアプリの構築を検討している場合は、gov.uk frontend flaskテンプレートリポジトリを使用してアプリを生成してください。

使い方

より詳細な例については、デモアプリのソースコードを参照してください。

pip install govuk-frontend-wtf実行した後、 PackageLoaderの使用からテンプレートをロードする場所、 WTFormsHelpersを登録してから、 SECRET_KEYの環境変数を設定する場所をJinjaに伝えることを確認してください。

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 %}

ウィジェット

使用可能なウィジェットとそれらに対応するFlask-WTFフィールドタイプは次のとおりです。

wtformsフィールド	Gov。UKウィジェット（s）	メモ
ブールフィールド	govcheckboxInput
デートフィールド	govdateinput
DateTimeField	govdateinput
小数フィールド	govtextinput
ファイルフィールド	govfileinput
MultipleFilefield	govfileInput（倍数= true）	フォームクラスのウィジェットを呼び出すときは`multiple=True`を指定する必要があることに注意してください。ジンジャテンプレートでレンダリングするときではありません。
フロートフィールド	govtextinput
整数フィールド	govtextinput	html5番号要素を使用する必要がある場合は、 `params`を使用して`type`を指定します。これは自動的に発生しません。
パスワードフィールド	govpasswordinput
Radiofield	govradioinput
セレクトフィールド	GovSelect
SelectMultipleField	govcheckboxesinput	これにより`<select multiple>`要素が眉をひそめられているため、チェックボックスがレンダリングされることに注意してください。
送信フィールド	govsubmitinput
ストリングフィールド	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