Здравствуйте, решил спрятать метки поля внутрь поля для красоты. Для 7 версии был модуль Form Placeholder. Для 9 версии такого модуля не нашел. Добавил вот такую конструкцию
<?php/**
* Implements template_preprocess_input().
*/
function THEMENAME_preprocess_input(&$variables) {
if ($variables['attributes']['type'] == 'text') {
$variables['attributes']['placeholder'] = $variables['element']['#title'];
}
}?>
Подскажите пожалуйста, как спрятать метки во внутрь поля у всех типов, а не только у текстового. Может быть есть другой способ.
Комментарии
А в восьмёрке/девятке разве плейсхолдеры не в ядре? У меня для полей формы можно прямо в админке задать плейсхолдеры, и ничего специального я для этого не ставил.
PS Красота кстати весьма сомнительная. В пустой форме видно что куда вводить, а если форма уже заполнена, то иногда трудно понять что где и зачем.
В идеале, чтобы из плейсхолдера, при заполнении название переносилось вверх. Как на сайте сдека например.
Может такое лучше на фронте, а не на беке решать?
Можно сделать на чистом css. Но для этого нужно поменять местами input и label. Как это сделать?
В шаблоне для поля разве нельзя поменять местами?
Пробовал в form-element.html.twig вот его код
/**
* @file
* Default theme implementation for a form element.
*
* Available variables:
* - attributes: HTML attributes for the containing element.
* - errors: (optional) Any errors for this form element, may not be set.
* - prefix: (optional) The form element prefix, may not be set.
* - suffix: (optional) The form element suffix, may not be set.
* - required: The required marker, or empty if the associated form element is
* not required.
* - type: The type of the element.
* - name: The name of the element.
* - label: A rendered label element.
* - label_display: Label display setting. It can have these values:
* - before: The label is output before the element. This is the default.
* The label includes the #title and the required marker, if #required.
* - after: The label is output after the element. For example, this is used
* for radio and checkbox #type elements. If the #title is empty but the
* field is #required, the label will contain only the required marker.
* - invisible: Labels are critical for screen readers to enable them to
* properly navigate through forms but can be visually distracting. This
* property hides the label for everyone except screen readers.
* - attribute: Set the title attribute on the element to create a tooltip but
* output no label element. This is supported only for checkboxes and radios
* in \Drupal\Core\Render\Element\CompositeFormElementTrait::preRenderCompositeFormElement().
* It is used where a visual label is not needed, such as a table of
* checkboxes where the row and column provide the context. The tooltip will
* include the title and required marker.
* - description: (optional) A list of description properties containing:
* - content: A description of the form element, may not be set.
* - attributes: (optional) A list of HTML attributes to apply to the
* description content wrapper. Will only be set when description is set.
* - description_display: Description display setting. It can have these values:
* - before: The description is output before the element.
* - after: The description is output after the element. This is the default
* value.
* - invisible: The description is output after the element, hidden visually
* but available to screen readers.
* - disabled: True if the element is disabled.
* - title_display: Title display setting.
*
* @see template_preprocess_form_element()
*
* @ingroup themeable
*/
#}
{%
set classes = [
'js-form-item',
'form-item',
'js-form-type-' ~ type|clean_class,
'form-item-' ~ name|clean_class,
'js-form-item-' ~ name|clean_class,
title_display not in ['after', 'before'] ? 'form-no-label',
disabled == 'disabled' ? 'form-disabled',
errors ? 'form-item--error',
]
%}
{%
set description_classes = [
'description',
description_display == 'invisible' ? 'visually-hidden',
]
%}
<div{{ attributes.addClass(classes) }}>
{% if label_display in ['before', 'invisible'] %}
{{ label }}
{% endif %}
{% if prefix is not empty %}
<span class="field-prefix">{{ prefix }}</span>
{% endif %}
{% if description_display == 'before' and description.content %}
<div{{ description.attributes }}>
{{ description.content }}
</div>
{% endif %}
{{ children }}
{% if suffix is not empty %}
<span class="field-suffix">{{ suffix }}</span>
{% endif %}
{% if label_display == 'after' %}
{{ label }}
{% endif %}
{% if errors %}
<div class="form-item--error-message">
{{ errors }}
</div>
{% endif %}
{% if description_display in ['after', 'invisible'] and description.content %}
<div{{ description.attributes.addClass(description_classes) }}>
{{ description.content }}
</div>
{% endif %}
</div>
перенести {% if label_display in ['before', 'invisible'] %}
{{ label }}
{% endif %} вниз, но тогда появляется закрывающийся тег у Input. Не понимаю почему.
Решил вопрос таким кодом.
/**
* @file
* Default theme implementation for a form element.
*
* Available variables:
* - attributes: HTML attributes for the containing element.
* - errors: (optional) Any errors for this form element, may not be set.
* - prefix: (optional) The form element prefix, may not be set.
* - suffix: (optional) The form element suffix, may not be set.
* - required: The required marker, or empty if the associated form element is
* not required.
* - type: The type of the element.
* - name: The name of the element.
* - label: A rendered label element.
* - label_display: Label display setting. It can have these values:
* - before: The label is output before the element. This is the default.
* The label includes the #title and the required marker, if #required.
* - after: The label is output after the element. For example, this is used
* for radio and checkbox #type elements. If the #title is empty but the
* field is #required, the label will contain only the required marker.
* - invisible: Labels are critical for screen readers to enable them to
* properly navigate through forms but can be visually distracting. This
* property hides the label for everyone except screen readers.
* - attribute: Set the title attribute on the element to create a tooltip but
* output no label element. This is supported only for checkboxes and radios
* in \Drupal\Core\Render\Element\CompositeFormElementTrait::preRenderCompositeFormElement().
* It is used where a visual label is not needed, such as a table of
* checkboxes where the row and column provide the context. The tooltip will
* include the title and required marker.
* - description: (optional) A list of description properties containing:
* - content: A description of the form element, may not be set.
* - attributes: (optional) A list of HTML attributes to apply to the
* description content wrapper. Will only be set when description is set.
* - description_display: Description display setting. It can have these values:
* - before: The description is output before the element.
* - after: The description is output after the element. This is the default
* value.
* - invisible: The description is output after the element, hidden visually
* but available to screen readers.
* - disabled: True if the element is disabled.
* - title_display: Title display setting.
*
* @see template_preprocess_form_element()
*
* @ingroup themeable
*/
#}
{%
set classes = [
'js-form-item',
'form-item',
'js-form-type-' ~ type|clean_class,
'form-item-' ~ name|clean_class,
'js-form-item-' ~ name|clean_class,
title_display not in ['after', 'before'] ? 'form-no-label',
disabled == 'disabled' ? 'form-disabled',
errors ? 'form-item--error',
]
%}
{%
set description_classes = [
'description',
description_display == 'invisible' ? 'visually-hidden',
]
%}
<div{{ attributes.addClass(classes) }}>
{% if label_display in ['invisible'] %}
{{ label }}
{% endif %}
{% if prefix is not empty %}
<span class="field-prefix">{{ prefix }}</span>
{% endif %}
{% if description_display == 'before' and description.content %}
<div{{ description.attributes }}>
{{ description.content }}
</div>
{% endif %}
{{ children }}
{% if suffix is not empty %}
<span class="field-suffix">{{ suffix }}</span>
{% endif %}
{% if label_display == 'before' %}
{{ label }}
{% endif %}
{% if errors %}
<div class="form-item--error-message">
{{ errors }}
</div>
{% endif %}
{% if description_display in ['invisible'] and description.content %}
<div{{ description.attributes.addClass(description_classes) }}>
{{ description.content }}
</div>
{% endif %}
</div>
Так мы поменяем местами input и label. Далее стилизуем с помощью css.
https://drupal.ru/node/144850