govuk frontend wtf

Gov.uk frontend wtforms widgets

Gov.uk Frontend WTForms es una herramienta comunitaria del sistema de diseño Gov.uk. El equipo del sistema de diseño no es responsable de ello y no puede admitirlo con el uso. Póngase en contacto con los mantenedores directamente si necesita ayuda o desea solicitar una función.

Este repositorio contiene un conjunto de widgets WTFORMS utilizados para representar los campos WTFORM utilizando el estilo de componente frontend de Gov.uk. Esto se realiza usando Macros Jinja del puerto Jinja Gov.uk Jinja del original Gov.uk Frontend Nunjucks Macros. Estos se mantienen actualizados con las versiones frontend de Gov.uk, se prueban a fondo y producen un marcado 100% equivalente.

Este enfoque también representa los mensajes de error asociados en el lugar apropiado, muestra el componente de resumen de error en la parte superior de la página y establece todos los atributos de aria de accesibilidad relacionada. Agregar el widget apropiado a su clase Python de formulario existente, junto con plantillas mucho más simples, hace que sea rápido y fácil producir formularios complementarios totalmente de Gov.uk.

Si está buscando construir una aplicación Flask completamente destacada que se integre con Gov.uk Frontend Jinja y Gov.uk Frontend WTForms, utilice el repositorio de plantillas Flask de Gov.uk Frontend para generar su aplicación.

Cómo usar

Para ver ejemplos más detallados, consulte el código fuente de la aplicación de demostración.

Después de ejecutar pip install govuk-frontend-wtf , asegúrese de decirle a Jinja dónde cargar las plantillas para usar el PackageLoader , registrar WTFormsHelpers , luego establecer una variable de entorno para 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 )

Importe e incluya el widget relevante en cada campo en su clase de formulario (consulte la tabla a continuación). Tenga en cuenta que en este ejemplo widget=GovTextInput() es la única diferencia relativa a una definición de formulario estándar de frasco 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 ())

Cree una ruta para servir su forma y plantilla.

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 )

Finalmente, en su plantilla, establezca el título de la página adecuadamente si hay algún error de validación de formulario, según la guía del sistema de diseño Gov.uk. Incluya el componente govukErrorSummary() al comienzo del bloque content . Pase los parámetros en un diccionario a su campo de formulario según las opciones de macro de componentes asociados.

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

Los widgets disponibles y sus tipos de campo Flask-WTF correspondientes son los siguientes:

Campo WTForms	Gobierno de widgets del Reino Unido (s)	Notas
Campo boolean	GovcheckboxInput
Campo de fecha	GOVDATEINPUT
Detetimefield	GOVDATEINPUT
Decimalfield	GovTextInput
FileField	GovfileInput
Múltiple campo	GovFileInput (múltiple = verdadero)	Tenga en cuenta que debe especificar multiple=True al invocar el widget en su clase de formulario. No cuando lo renderizas en la plantilla Jinja.
Campo de flotación	GovTextInput
Entero	GovTextInput	Use params para especificar un type si necesita usar elementos de número HTML5. Esto no sucederá automáticamente.
Contraseña	GovPasswordInput
Radiofield	Govradioinput
Campo de selección	Gobernador
SelectMultiplefield	GovcheckboxesInput	Tenga en cuenta que esto hace que las casillas de verificación como <select multiple> los elementos están mal visto.
Campo	Govsubmitinput
Stringfield	GovTextInput
Texteeafield	GovTextarea, GovCharacterCount

Para generar cosas como campos de correo electrónico utilizando GovTextInput , deberá pasar parámetros adicionales al presentarlo de la siguiente manera:

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

Ejecutando las pruebas

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

Versiones

Usamos Semver para versiones. Para las versiones disponibles, consulte las etiquetas en este repositorio.

Cómo contribuir

Agradecemos la contribución de la comunidad. Si desea contribuir a este proyecto, revise el código de conducta y las pautas de contribución.

Colaboradores

• Matt Shaw (mantenedor primario)
• Andy Mantell (autor original)

Vea la lista completa de contribuyentes en Github

Apoyo

Este software se proporciona "as-es" sin garantía. Los mantenedores y la comunidad de código abierto brindan el soporte en función de los "mejores esfuerzos" .

Si usted es un funcionario, puede inscribirse en el espacio de trabajo digital del gobierno del Reino Unido para contactar a los mantenedores enumerados anteriormente y la comunidad de personas que usan este proyecto en el canal #Govuk-Design-System.

De lo contrario, consulte las pautas de contribución sobre cómo plantear un informe de error o una solicitud de función.