Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Plugins

Add link to a checkbox field's label

form

Started by Pere Castanyer 8 years ago · 7 replies · 2590 views
8 years ago

Hello,

I'm trying to do exactly the same as this post:

But without success.

I'm having this twig in ckeckbox filed:

TWIG
    {% extends "forms/field.html.twig" %}

 {% block label %}
 {% endblock %}

 {% block input %}
     {% set id = field.id|default(field.name) ~ '-' ~ key %}
     <div class="{{ form_field_wrapper_classes ?: 'form-input-wrapper' }} {{ field.size }} {{ field.wrapper_classes }}">
         <input
             {# required attribute structures #}
             name="{{ (scope ~ field.name)|fieldName }}"
             value="{{ value|join(', ') }}"
             type="checkbox"
             {% if value == true %} checked="checked" {% endif %}

             {# input attribute structures #}
             {% block input_attributes %}
                 id="{{ id|e }}"
                 {% if field.classes is defined %}class="{{ field.classes }}" {% endif %}
                 {% if field.style is defined %}style="{{ field.style|e }}" {% endif %}
                 {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
                 {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
                 {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
                 {% if required %}required="required"{% endif %}
             {% endblock %}
             />
         <label style="display:inline;" class="inline" for="{{ id|e }}">
             {% if field.markdown %}
                 {{ field.label|t|markdown(false) }}
             {% else %}
                 {{ field.label|t|e }}
             {% endif %}
             {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
         </label>
     </div>
 {% endblock %}

And I 've this form:

YAML
         placeholder: 'Escriu el teu missatge'
            type: textarea
             validate:
                 required: true
         -
             name: priv
             label: 'Accepta la <a target="_blank" href="avis-de-privacitat">política de privacitat</a>?'
             type: checkbox
             validate:
                 required: true

And the form shows all as string.
I've tried to change the twig without the |e but not working the html. And I'm aware of this post trying to do it in a markdown way:

What I must do?

last edited 06/01/18 by Pere Castanyer
8 years ago

/forum/forms-blueprints/how-can-i-add-anchor-link-in-form-label-t315?u=chris_jung

8 years ago

@chris_jung:
There is an escaping for the field labels.

Sorry for my ignorance. What do you mean with "There is an escaping.."? Ar you saying this line?

TWIG
 <label style="display:inline;" class="inline" for="{{ id|e }}">
            {% if field.markdown %}
                {{ field.label|t|markdown(false) }}
            {% else %}
 ->               {{ field.label|t|e }}<--
            {% endif %}
            {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
        </label>
8 years ago

Exactly this. 😉

This filters HTML from the string.

8 years ago

Then I need to do something after changing to {{ field.label|t } ?

Because I don't see any change and the a tag is showing as string like before.

8 years ago

Sorry to be THAT guy. I don't think it's a great idea to put links in labels, because it's outside the spec and you don't know what browsers will do with it. When looking up a reference, I noticed there are also valid accessibility concerns:

Accessibility concerns

Interactive content

Don't place interactive elements such as anchors or buttons inside of a label. Doing so will make it difficult for people to activate the form input associated with the label.

Just saying!

I can see what you are trying to achieve. An alternative might be to use the form field's help property, though that may also be stripped of markup. In a site I made some time ago, I think I added a custom field property called hint which I made a custom template to handle, and that allowed markup. I may have done that because I didn't know about help at the time I built it.

Cheers

Suggested topics

Topic Participants Replies Views Activity
Plugins · by Rene, 1 week ago
2 41 1 week ago
Plugins · by Xavier, 4 weeks ago
2 50 4 weeks ago
Plugins · by Luka Prinčič, 7 years ago
3 1178 1 month ago
Plugins · by Sebastian van de Meer, 1 month ago
1 45 1 month ago
Plugins · by PIERROT Alain, 2 months ago
3 68 2 months ago