est-il possible de rendre wtf.form_field sans étiquette ?

Question

J'utilise flask et bootstrap et j'ai besoin de créer un champ sans étiquette, puisque je vais le mettre comme placeholder, pour gagner de la place dans l'interface utilisateur, puisque ce champ apparaît plusieurs fois.

{{ wtf.form_field(field) }}

Je ne veux pas de champ d'étiquette, juste le champ réel dans lequel l'utilisateur va taper ses informations,

Merci les gars.

Answer 1

J'arrive un peu tard, mais je trouve que le moyen le plus simple est d'utiliser une feuille de style en cascade pour définir la visibilité de l'étiquette sur None.

.control-label {
display: none;

}

Le CSS ci-dessus rendra toutes les étiquettes invisibles. Cela n'est peut-être pas souhaitable pour chaque étiquette, mais si vous ajoutez une classe "no-label" à des champs spécifiques du formulaire WTF (ou à un élément supérieur qui regroupe les champs), le CSS suivant n'affichera pas les étiquettes de ces champs :

.no-label .control-label {
display: none;

}

Answer 2

Vous utilisez une macro sur le thème de bootstrap pour rendre l'élément wtform il n'y a aucune raison pour que vous ne puissiez pas créer votre propre macro personnalisée basée sur celle qui existe déjà, qui fait exactement la même chose, mais sans l'objet .label le rendu.

Par exemple, le code de la macro que vous utilisez est le suivant situé sur github . Je pourrais copier toute cette macro et la mettre dans un nouveau custom_wtf.html et renommer la macro en 'wtf_nolabel' et l'adapter à mes besoins.

Prenons par exemple les lignes 83-93, qui semblent rendre tous les éléments de formulaire en ligne qui ne sont pas déjà traités ci-dessus :

{%- if form_type == "inline" %}
    {{field.label(class="sr-only")|safe}}
    {% if field.type == 'FileField' %}
      {{field(**kwargs)|safe}}
{% else %}

Je pourrais juste enlever le {{ field.label(class="sr-only")|safe }} et cela fonctionnerait maintenant pour les éléments en ligne, en descendant sous le code noté, je supprimerais les lignes 97-99 pour ajuster l'option de rendu horizontal telle qu'elle est actuellement :

{{field.label(class="control-label " + (
  " col-%s-%s" % horizontal_columns[0:2]
))|safe}}

Si votre élément de formulaire ne comporte qu'un seul type d'entrée particulier, vous pouvez construire votre propre macro réduite qui ne cible que cet élément de formulaire.

Answer 3

Si vous n'avez pas envie de modifier les macros du modèle comme indiqué par @Doobeh et que vous ne voulez pas afficher les étiquettes des champs, vous pouvez utiliser la technique suivante.

Créez une classe de mixage "No Label" qui définit la propriété "label" de tous les champs de formulaire comme suit None .

class NoLabelMixin(object):
    def __init__(self, *args, **kwargs):
        super(NoLabelMixin, self).__init__(*args, **kwargs)
        for field_name in self._fields:
            field_property = getattr(self, field_name)
            field_property.label = None

class MyForm(Form):
    first_name = StringField(u'First Name', validators=[validators.input_required()])
    last_name  = StringField(u'Last Name', validators=[validators.optional()])

class MyNoLabelForm(NoLabelMixin, MyForm):
    pass

my_no_label_form = MyNoLabelForm()

Answer 4

Au lieu de créer une nouvelle macro et de nouvelles classes

1) j'ai fait un style css qui cache les étiquettes au début de la page pour qu'elles n'apparaissent pas.

<style>
.my_div_class label{
 visibility: hidden;
}
</style>

2) un javascript qui supprime toutes les étiquettes sous la div que je veux et qui exécute document.ready.

        var all = hold.getElementsByTagName("LABEL");
        for (var i=0; i < all.length; i++){
            var parent = all[i].parentElement;
            parent.removeChild(all[i])
            }
        }

ce n'est peut-être pas la meilleure pratique mais c'était très simple à faire et très rapide, je le poste car c'est simple, je pourrais avoir besoin de m'en souvenir pour plus tard, et il n'est pas nécessaire d'avoir une connaissance approfondie de bootstrap et de flask forms. j'espère que cela aidera

Answer 5

Encore plus facile !

<style>
label{
  display: None;
}
</style>

c'était si simple