govuk frontend wtf

Widgets gov.uk frontend wtforms

Gov.uk Frontend WTFORMS est un outil communautaire du système de conception Gov.uk. L'équipe du système de conception n'en est pas responsable et ne peut pas vous soutenir de l'utiliser. Contactez directement les responsables si vous avez besoin d'aide ou si vous souhaitez demander une fonctionnalité.

Ce référentiel contient un ensemble de widgets WTFORMS utilisés pour rendre les champs WTFORM à l'aide du style de composant Frontend Gov.uk. Cela se fait à l'aide de Jinja Macros du port Jinja Gov.uk Frontend du Gov.uk Frontend Nunjucks Macros. Ceux-ci sont mis à jour avec les versions Gov.uk Frontend, sont soigneusement testées et produisent un balisage à 100% équivalent.

Cette approche rend également les messages d'erreur associés à l'endroit approprié, affiche le composant de résumé d'erreur en haut de la page et définit tous les attributs ARIA accessibilité connexes. L'ajout du widget approprié à votre classe Python de forme existante, ainsi que des modèles beaucoup plus simples, le rend rapide et facile à produire des formes conformes entièrement Gov.uk.

Si vous cherchez à créer une application FLASK entièrement en vedette qui s'intègre à Wtforms Gov.uk Frontend Jinja et Gov.uk Frontend, veuillez utiliser le référentiel de modèle Frontend Flask Gov.uk pour générer votre application.

Comment utiliser

Pour des exemples plus détaillés, veuillez vous référer au code source de l'application de démonstration.

Après avoir exécuté pip install govuk-frontend-wtf , assurez-vous de dire à Jinja où charger les modèles de l'utilisation du PackageLoader , enregistrez WTFormsHelpers , puis définissez une variable d'environnement pour 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 )

Importez et incluez le widget pertinent sur chaque champ de votre classe de formulaire (voir le tableau ci-dessous). Notez que dans cet exemple widget=GovTextInput() est la seule différence par rapport à une définition de formulaire FLASK-WTF standard.

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

Créez un itinéraire pour servir votre formulaire et votre modèle.

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 )

Enfin, dans votre modèle, définissez le titre de page de manière appropriée en cas d'erreurs de validation de formulaire, conformément aux conseils du système de conception Gov.uk. Incluez le composant govukErrorSummary() au début du bloc content . Passez des paramètres dans un dictionnaire dans votre champ de formulaire conformément aux options de macro de composant associées.

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

Widgets

Les widgets disponibles et leurs types de champs Flask-WTF correspondants sont les suivants:

Champ wtforms	GOV. UK Widget (s)	Notes
Booléen	GovcheckboxInput
Champ de date	Govdateinput
DateTimefield	Govdateinput
Décimalfield	GovTextInput
Champ de fichiers	Govfileinput
Multiples-fichiers	GovFileInput (multiple = true)	Notez que vous devez spécifier multiple=True lors de l'invoquer le widget dans votre classe de formulaire. Pas lorsque vous le rendez dans le modèle Jinja.
Champ flotteur	GovTextInput
Interfield	GovTextInput	Utilisez params pour spécifier un type si vous avez besoin d'utiliser des éléments de numéro HTML5. Cela ne se produira pas automatiquement.
Champ de passe	GovpasswordInput
Radiofield	Govradio à honneur
Selectfield	Govselect
SelectMultiplefield	GovcheckboxesInput	Notez que cela rend les cases à cocher comme <select multiple> fronçés.
Soumission	GovSubmitInput
Stringfield	GovTextInput
Textareafield	GovTextArea, GovCharacterCount

Afin de générer des éléments comme des champs de messagerie à l'aide de GovTextInput , vous devrez transmettre des paramètres supplémentaires lors du rendu comme suit:

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

Exécuter les tests

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

Versioning

Nous utilisons Semver pour le versioning. Pour les versions disponibles, consultez les balises de ce référentiel.

Comment contribuer

Nous accueillons la contribution de la communauté. Si vous souhaitez contribuer à ce projet, veuillez consulter le code de conduite et les directives de contribution.

Contributeurs

• Matt Shaw (mainteneur principal)
• Andy Mantell (auteur original)

Voir la liste complète des contributeurs sur GitHub

Soutien

Ce logiciel est fourni "tel quel" sans garantie. Le soutien est fourni sur la base des «meilleurs efforts» par les maintenants et la communauté open source.

Si vous êtes un fonctionnaire, vous pouvez vous inscrire à l'espace de travail Digital Slack du gouvernement britannique pour contacter les responsables énumérés ci-dessus et la communauté des personnes utilisant ce projet dans le canal # Govuk-Design-System.

Sinon, veuillez consulter les directives de contribution sur la façon d'augmenter un rapport de bogue ou une demande de fonctionnalité.