Ответить на тему  [ 1 сообщение ] 
Форма авторизации - Плавающие метки 
Автор Сообщение
Опытный

Зарегистрирован: 12 дек 2011, 21:34
Сообщений: 548
Пол: мужской
Репутация: 1046
Добавить пункт репутацииВычесть пункт репутации
Сообщение Форма авторизации - Плавающие метки
Всем привет!

Может, кому-нибудь когда-нибудь пригодится. Если так, то буду рад :)

Речь именно о форме, а не о страницах user, user/register и user/password.
В общем, пришла идея добавить к полям формы так называемые "плавающие метки" (float labels). По этому поводу в сети не меренное количество статей, примеров и прочего. Например, у Криса Койера - https://css-tricks.com/float-labels-css/ Другой пример - https://materializecss.com/text-inputs.html
Плюс - желательно без скриптов, на чистом css.

Друпал, по умолчанию для форм (на примере формы авторизации) дает примерно такую разметку:
Код:
<div class="form-item form-type-textfield form-item-name">
  <label for="edit-name">Username<span class="form-required" title="This field is required.">*</span></label>
  <input type="text" id="edit-name" name="name" value="" size="60" maxlength="60" class="form-text required"> 
</div>


В блоке сначала лейбл, потом - текстовое поле. Если поищите в сети примеры реализации, то обнаружите, что разметка у большинства примеров противоположная: сначала поле, потом лейбл. Естественно, я имею в виду решения без скриптов.

То есть, у нас два варианта: либо пытаться реализовать эти плавающие метки с разметкой от Друпал, либо поменять саму разметку. И если я на первом варианте "застопорился", то вот со вторым всё получилось легко и просто.

Сначала необходимо в файле template.php добавить функцию themename_form_alter(&$form, &$form_state, $form_id). Далее - получить id формы, которую будем "менять". Самый простой способ - посмотреть в инспекторе элементов на id формы. Для формы авторизации - это user_login. Чтобы посмотреть на то, что доступно для изменения в форме, можно внутри функции добавить print_r($form); Вывод будет примерно такой
Код:
Array
(
    [name] => Array
        (
            [#type] => textfield
            [#title] => Username
            [#size] => 60
            [#maxlength] => 60
            [#required] => 1
            [#description] => Enter your username.
        )
    [pass] => Array
        (
            [#type] => password
            [#title] => Password
            [#description] => Enter the password that accompanies your username.
            [#required] => 1
        )
    [actions] => Array
        (
            [#type] => actions
            [submit] => Array
                (
                    [#type] => submit
                    [#value] => Log in
                )
        )


Так как форма - массив, можно не переписывая все функции менять элементы массива, добавляя новые или изменяя значения используемых. К примеру, чтобы изменить текст на кнопке Log In, необходимо выбрать в "дереве" вложенных массивов ответственный за действия по нажатию на кнопку (actions), в нем - массив submit и уже там искать значение value. Получается такой "путь" - $form['actions']['submit']['#value']. Осталось присвоить новое значение
Код:
$form['actions']['submit']['#value'] = 'Добро пожаловать';


Для создания плавающих меток нужно
1) расположить лейбл после поля для ввода (input + label) - это элемент title_display (см. функцию theme_form_element($variables) )
2) по желанию, можно очистить описания description - для этого достаточно прописать пустую функцию t('')
3) прописать плейсхолдер
Делается это просто: надо добавить новый массив #attributes (так как по умолчанию его нет), в котором ключу placeholder будет соответствовать нужное нам значение
Код:
$form['name']['#attributes']['placeholder'] = t( 'Full name or e-mail' );

4) желательно иметь одинаковые заголовок и плейсхолдер; сам заголовок лейбла (title) меняется так же, как и приветствие в кнопке авторизации.

Итоговая функция приобретает такой вид:
Код:
function themename_form_alter(&$form, &$form_state, $form_id) {
  if ( $form_id == 'user_login' ) {
    $form['name']['#title_display'] = "after"; // Положение тега label
    $form['name']['#title'] = t('Full name or e-mail'); // Смена содержимого лейбла
    $form['name']['#attributes']['placeholder'] = t( 'Full name or e-mail' ); // Добавленный плейсхолдер
    $form['name']['#description'] = t(''); // Очищенное описание
    $form['pass']['#title_display'] = "after";
    $form['pass']['#attributes']['placeholder'] = t( 'Password' );
    $form['pass']['#description'] = t('');
  }

Осталось добавить немного стилей:
Код:
form#user-login input {
  font-size: .9375rem;
  font-family: inherit;
  color: inherit;
  padding: .9375rem 1.25rem;
  border-radius: 2px;
  background-color: rgba(232, 232, 232, 0.5);
  border: none;
  border-bottom: 3px solid transparent;
  width: 90%;
  display: block;
  transition: all .3s; }
  form#user-login input:focus {
    outline: none;
    box-shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.3);
    border-bottom: 3px solid #d57f84; }
  form#user-login input::-webkit-input-placeholder {
    color: #666666; }
form#user-login label {
  font-size: .75rem;
  font-weight: 700;
  margin-left: 1.25rem;
  margin-top: .4375rem;
  display: block;
  transition: all .3s; }
form#user-login input:placeholder-shown + label {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2.5rem); }


Выглядит всё это вот так (извиняюсь за качество: анимированная гифка получается большого размера, пришлось делать её в ущерб качеству)
Изображение


22 июл 2018, 20:30
Профиль Отправить личное сообщение
Показать сообщения за:  Сортировать по:  
Ответить на тему   [ 1 сообщение ] 
   Похожие темы   Автор   Ответов   Просмотров   Последнее сообщение 
Нет новых непрочитанных сообщений в этой теме CronoForms. Форма обратной связи. Привязка юзеров Joomla

в форуме РАЗЛИЧНЫЕ СКРИПТЫ И ВНЕШНИЕ ПРИЛОЖЕНИЯ

Laudis

0

1568

13 мар 2012, 13:10

Laudis Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме SOBI2, gallery plugin - пропала форма добавления изображений

в форуме ВНЕШНИЕ РАСШИРЕНИЯ ДЛЯ JOOMLA

verok

0

1990

24 апр 2012, 11:00

verok Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме Перестала работать форма обратной связи настроенная на CKFor

в форуме ВНЕШНИЕ РАСШИРЕНИЯ ДЛЯ JOOMLA

peterhof

0

1454

20 сен 2012, 05:34

peterhof Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме Как к комментарию прикрепить форму, так чтобы эта форма отно

в форуме Drupal 7

HarryAscent

0

1246

14 окт 2013, 16:53

HarryAscent Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме Форма обратной связи (simpleform2) в лайтбоксе (joombox)

в форуме ВНЕШНИЕ РАСШИРЕНИЯ ДЛЯ JOOMLA

derzhko

2

2682

17 янв 2013, 23:30

Zvirec [Bot] Перейти к последнему сообщению


Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 2


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Перейти: