web-dev-qa-db-fra.com

Ajouter une classe CSS à un champ dans wtform

Je génère un formulaire dynamique en utilisant wtforms (et flask). Je voudrais ajouter des classes CSS personnalisées aux champs que je génère, mais jusqu'à présent, je n'ai pas pu le faire. En utilisant la réponse que j'ai trouvée ici , j'ai essayé d'utiliser un widget personnalisé pour ajouter cette fonctionnalité. Il est implémenté presque exactement de la même manière que la réponse à cette question:

class ClassedWidgetMixin(object):
  """Adds the field's name as a class.

  (when subclassed with any WTForms Field type).
  """

  def __init__(self, *args, **kwargs):
    print 'got to classed widget'
    super(ClassedWidgetMixin, self).__init__(*args, **kwargs)

  def __call__(self, field, **kwargs):
    print 'got to call'
    c = kwargs.pop('class', '') or kwargs.pop('class_', '')
    # kwargs['class'] = u'%s %s' % (field.name, c)
    kwargs['class'] = u'%s %s' % ('testclass', c)
    return super(ClassedWidgetMixin, self).__call__(field, **kwargs)


class ClassedTextField(TextField, ClassedWidgetMixin):
  print 'got to classed text field'

Dans la vue, je fais cela pour créer le champ (ClassedTextField est importé à partir de formulaires, et f est une instance du formulaire de base):

  f.test_field = forms.ClassedTextField('Test Name')

Le reste du formulaire est créé correctement, mais ce jinja:

{{f.test_field}}

produit cette sortie (pas de classe):

<input id="test_field" name="test_field" type="text" value="">

Tous les conseils seraient formidables, merci.

cssflaskwtforms
45
pheven

En fait, vous n'avez pas besoin d'aller au niveau du widget pour attacher un attribut de classe HTML au rendu du champ. Vous pouvez simplement le spécifier en utilisant le class_ paramètre dans le modèle jinja.

par exemple.

    {{ form.email(class_="form-control") }}

donnera le code HTML suivant:

    <input class="form-control" id="email" name="email" type="text" value="">

pour ce faire, par exemple, en utilisant le nom du formulaire comme valeur de l'attribut de classe HTML, vous pouvez effectuer les opérations suivantes:

Jinja:

    {{ form.email(class_="form-style-"+form.email.name) }}

Sortie:

    <input class="form-style-email" id="email" name="email" type="text" value="">

Pour plus d'informations sur l'injection d'attributs HTML, consultez la documentation officielle .

141
user559633

Si vous souhaitez inclure par programme la classe css (ou bien tout autre attribut) dans le champ du formulaire, vous pouvez utiliser le render_kw argument.

par exemple:

r_field = RadioField(
    'Label', 
    choices=[(1,'Enabled'),(0,'Disabled')], 
    render_kw={'class':'myclass','style':'font-size:150%'}
)

rendra comme:

<ul class="myclass" id="r_field" style="font-size:150%">
    <li><input id="r_field-0" name="r_field" type="radio" value="1"> <label for="r_field-0">Enabled</label></li>
    <li><input id="r_field-1" name="r_field" type="radio" value="0"> <label for="r_field-1">Disabled</label></li>
</ul>
9
John Go-Soco

Dans WTForms 2.1 J'utilise extra_classes, comme la ligne ci-dessous:

1. La première façon

{{ f.render_form_field(form.email, extra_classes='ourClasses') }}

Nous pouvons également utiliser les réponses @John Go-Soco pour utiliser render_kw attribut sur notre champ de formulaire, comme ceci.

2. La deuxième façon

style={'class': 'ourClasses', 'style': 'width:50%;'}
email = EmailField('Email', 
                   validators=[InputRequired(), Length(1, 64), Email()],
                   render_kw=style)

Mais je voudrais plus préférer utiliser la première façon.

1
Gofy and Kitty