govuk frontend wtf

Widget frontend gov.uk wtforms

Gov.uk Frontend WTForms adalah alat komunitas dari sistem desain Gov.uk. Tim Sistem Desain tidak bertanggung jawab untuk itu dan tidak dapat mendukung Anda menggunakannya. Hubungi pemelihara secara langsung jika Anda membutuhkan bantuan atau Anda ingin meminta fitur.

Repositori ini berisi satu set widget WTForms yang digunakan untuk membuat bidang WTFORM menggunakan gaya komponen gov.uk frontend. Ini dilakukan dengan menggunakan makro jinja dari frontend gov.uk port Jinja dari frontend Gov.uk asli Macro Nunjucks. Ini tetap mutakhir dengan pelepasan frontend gov.uk, diuji secara menyeluruh dan menghasilkan markup setara 100%.

Pendekatan ini juga membuat pesan kesalahan terkait di tempat yang sesuai, menunjukkan komponen ringkasan kesalahan di bagian atas halaman dan menetapkan semua atribut ARIA aksesibilitas terkait. Menambahkan widget yang sesuai ke kelas python bentuk yang ada, bersama dengan templat yang jauh lebih sederhana, membuatnya cepat dan mudah untuk menghasilkan bentuk yang sepenuhnya sesuai dengan pemerintah.

Jika Anda ingin membangun aplikasi Flask yang sepenuhnya unggulan yang terintegrasi dengan Gov.uk Frontend Jinja dan Gov.uk Frontend WTForms, silakan gunakan repositori templat Flask Frontend Gov.uk untuk menghasilkan aplikasi Anda.

Cara menggunakan

Untuk contoh lebih rinci, silakan merujuk ke kode sumber aplikasi demo.

Setelah menjalankan pip install govuk-frontend-wtf , pastikan Anda memberi tahu Jinja di mana memuat templat dari menggunakan PackageLoader , daftarkan WTFormsHelpers , lalu atur variabel lingkungan untuk 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 )

Impor dan sertakan widget yang relevan di setiap bidang di kelas formulir Anda (lihat tabel di bawah). Perhatikan bahwa dalam contoh ini widget=GovTextInput() adalah satu-satunya perbedaan relatif terhadap definisi bentuk flask-WTF standar.

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 ())

Buat rute untuk melayani formulir dan templat Anda.

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 )

Akhirnya, di template Anda, atur judul halaman dengan tepat jika ada kesalahan validasi formulir, sesuai dengan panduan sistem desain gov.uk. Sertakan komponen govukErrorSummary() di awal blok content . Pass parameter dalam kamus ke bidang formulir Anda sesuai opsi makro komponen terkait.

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

Widget

Widget yang tersedia dan tipe bidang Flask-WTF yang sesuai adalah sebagai berikut:

Bidang WTforms	Gubernur widget Inggris	Catatan
Booleanfield	GovcheckboxInput
Datfield	GovDateInput
DateTimefield	GovDateInput
Decimalfield	GovTextInput
FileField	GovfileInput
MultiplefileField	GovfileInput (multipel = true)	Perhatikan bahwa Anda perlu menentukan multiple=True saat memanggil widget di kelas formulir Anda. Tidak saat Anda membuatnya di template Jinja.
Floatfield	GovTextInput
Integerfield	GovTextInput	Gunakan params untuk menentukan type jika Anda perlu menggunakan elemen nomor HTML5. Ini tidak akan terjadi secara otomatis.
Kata Sandi	GovPasswordInput
Radiofield	Govradiiinput
Selectfield	Pemerintah
SelectMultiplefield	GovcheckboxesInput	Perhatikan bahwa ini membuat kotak centang sebagai <select multiple> elemen disukai.
Submitfield	GovsubmitInput
Stringfield	GovTextInput
TextAdeAfield	GovtextArea, govcharactercount

Untuk menghasilkan hal -hal seperti bidang email menggunakan GovTextInput , Anda perlu melewati param tambahan saat menjadikannya sebagai berikut:

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

Menjalankan tes

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

Versi

Kami menggunakan SEMVER untuk versi. Untuk versi yang tersedia, lihat tag di repositori ini.

Bagaimana berkontribusi

Kami menyambut kontribusi dari komunitas. Jika Anda ingin berkontribusi pada proyek ini, silakan tinjau Pedoman Kode Etik dan Kontribusi.

Kontributor

• Matt Shaw (Pemelihara Utama)
• Andy Mantell (penulis asli)

Lihat daftar lengkap kontributor di GitHub

Mendukung

Perangkat lunak ini disediakan "apa adanya" tanpa jaminan. Dukungan disediakan berdasarkan "upaya terbaik" oleh pengelola dan komunitas open source.

Jika Anda seorang pegawai negeri sipil, Anda dapat mendaftar ke ruang kerja Slack Digital Pemerintah Inggris untuk menghubungi pengelola yang tercantum di atas dan komunitas orang-orang yang menggunakan proyek ini di saluran #-desain-desain-sistem.

Jika tidak, silakan lihat pedoman kontribusi untuk cara menaikkan laporan bug atau permintaan fitur.