Textarea placeholder не работает: Placeholder не отображается в input

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Пример

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

	60		9. 2

В таблице браузеров применяются следующие обозначения.

• — элемент полностью поддерживается браузером;
• — элемент браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Псевдоклассы

См. также

• Атрибут placeholder
• Подсказка в поле формы
• Подсказывающий текст
• Псевдоэлемент ::placeholder

Практика

• Подсказка

Справочник CSS

Значения свойств

Функции

Единицы CSS

Типы элементов

@-правила

Анимация

Границы

Контент

Логические

Отступы и поля

Печать

Позиционирование

Псевдоклассы

Псевдоэлементы

Размеры

Таблицы

Текст и шрифт

Флексы

Форматирование

Формы

Цвет и фон

⚡️ HTML и CSS с примерами кода

Тег <textarea> (от англ. text area — область текста) это элемент формы для создания области, в которую можно вводить несколько строк текста. Количество символов, которое можно ввести в поле не ограничено, а введенный текст отображается моноширинным шрифтом.

В отличие от элемента <input>, в текстовом поле можно делать переносы строк, и они сохраняются при отправке текста на сервер.

Между тегами <textarea> и </textarea> можно поместить любой текст, который будет отображаться внутри поля.

• button
• datalist
• fieldset
• form
• input
• label
• legend
• meter
• optgroup
• option
• output
• progress
• select
• textarea

Синтаксис

<textarea>
    текст
</textarea>

Закрывающий тег обязателен.

Атрибуты

autocomplete

Включает или отключает автозаполнение.

autofocus

Устанавливает фокус в поле формы.

cols

Ширина поля в символах.

dirname

Параметр, который передаёт на сервер направление текста.

disabled

Блокирует доступ и изменение элемента.

form

Связывает поле с формой по её идентификатору.

maxlength

Максимальное количество символов разрешённых в тексте.

minlength

Минимальное количество символов разрешённых в тексте.

name

Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.

placeholder

Выводит подсказывающий текст.

readonly

Устанавливает, что поле не может изменяться пользователем.

required

Обязательное для заполнения поле.

rows

Высота поля в строках текста.

wrap

Параметры переноса строк.

Также для этого элемента доступны универсальные атрибуты.

autocomplete

Этот атрибут помогает заполнить текстовое поле текстом, который был введён в нём ранее. Значения сохраняет и подставляет браузер, при этом автозаполнение по соображениям безопасности может отключаться пользователем в настройках браузера и не может в таком случае управляться атрибутом autocomplete.

Автозаполнение конкретного поля формы привязывается к его атрибуту name и при смене значения теряется.

Синтаксис

<textarea autocomplete="on | off"></textarea>

Значения

on

Включает автозаполнение текста.

off

Отключает автозаполнение.

Значение по умолчанию

Зависит от настроек браузера.

autofocus

Автоматически устанавливает фокус в текстовое поле. В таком поле можно сразу набирать текст без переключения курсора в текстовое поле.

Синтаксис

<textarea autofocus> </textarea>

Значения

Нет.

Значение по умолчанию

По умолчанию атрибут autofocus не установлен.

cols

Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задаётся количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.

Синтаксис

<textarea cols="<число>"> </textarea>

Значения

Любое целое положительное число.

Значение по умолчанию

В HTML4 зависит от настроек браузера и операционной системы.

В HTML5 — 20.

dirname

При наличии атрибута dirname на сервер отправляется пара имя/значение, где имя задаётся атрибутом dirname, а значение подставляется браузером. Для текста, идущего слева направо, значение будет ltr, а для текста справа налево (арабского, к примеру) значение будет rtl.

Синтаксис

<textarea dirname="<строка>"></textarea>

Значения

Произвольная текстовая строка, которая служит именем параметра. Чтобы показать, что этот параметр указывает направление текста, обычно в конце строки добавляют .dir.

Значение по умолчанию

Нет.

disabled

Блокирует доступ и изменение текстового поля. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов.

Заблокированный в поле текст не передаётся на сервер.

Синтаксис

<textarea disabled></textarea>

Значения

Нет.

Значение по умолчанию

По умолчанию это значение выключено.

form

Связывает текстовое поле с формой по её идентификатору. Такая связь необходима в случае, когда поле по каким-либо причинам располагается за пределами <form>.

Синтаксис

<textarea form="<идентификатор>"> </textarea>

Значения

Идентификатор формы (значение атрибута id элемента <form>).

Значение по умолчанию

Нет.

maxlength

Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.

Синтаксис

<textarea maxlength="<число>"> </textarea>

Значения

Любое целое положительное число.

Значение по умолчанию

Нет.

minlength

Задаёт минимальное число символов, которое может быть введено пользователем в текстовом поле. Если число символов меньше указанного значения, то браузер выдаёт сообщение об ошибке и не отправляет форму.

Синтаксис

<textarea minlength="<число>"></textarea>

Значения

Любое целое положительное число.

Значение по умолчанию

Нет.

name

Определяет уникальное имя элемента <textarea>. Как правило, это имя используется при отправке данных на сервер или для доступа к полю через скрипты.

Синтаксис

<textarea name="<имя>"> </textarea>

Значения

В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу <textarea> по имени соблюдайте ту же форму написания, что и в атрибуте name.

Значение по умолчанию

Нет.

placeholder

Выводит подсказывающий текст внутри текстового поля, который исчезает при получении фокуса или наборе текста. В качестве подсказки обычно применяется короткий текст, состоящий из одного слова или фразы.

Синтаксис

<textarea placeholder="<текст>"> </textarea>

Значения

Текстовая строка.

Значение по умолчанию

Нет.

readonly

Когда к элементу <textarea> добавляется атрибут readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов. Также содержимое поле можно выделить и скопировать в буфер обмена.

Синтаксис

<textarea readonly></textarea>

Значения

Нет.

Значение по умолчанию

По умолчанию это значение выключено.

required

Устанавливает текстовое поле обязательным для заполнения перед отправкой формы на сервер. Если в обязательном поле нет текста, браузер выведет сообщение, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может.

Синтаксис

<textarea required> </textarea>

Значения

Нет.

Значение по умолчанию

По умолчанию атрибут required выключен.

rows

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

Синтаксис

<textarea rows="<число>"></textarea>

Значения

Любое целое положительное число.

Значение по умолчанию

В HTML4 зависит от настроек браузера и операционной системы.

В HTML5 — 2.

wrap

Атрибут wrap говорит браузеру, как осуществлять перенос текста в поле <textarea> и в каком виде отправлять данные на сервер. Если этот атрибут отсутствует, текст в поле набирается одной строкой, когда число введённых символов превышает ширину области, появляется горизонтальная полоса прокрутки. Нажатие кнопки Enter переносит текст на новую строку, и курсор устанавливается у левого края поля.

Синтаксис

<textarea wrap="soft | hard"> </textarea>

Значения

soft

Слова в текстовом поле переносятся механически, если они не поместились в размер области, но при отправке на сервер переносы не сохраняются.

hard

Длинный текст, который самостоятельно не помещается в поле по ширине, автоматически переносится на новую строку и вместе с переносами отправляется на сервер. Для работы требуется наличие атрибута cols.

Значение по умолчанию

soft

Спецификации

• WHATWG HTML Living Standard
• HTML 5
• HTML 4.01 Specification

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>TEXTAREA</title>
  </head>
  <body>
    <form action="textarea1.php" method="post">
      <p><b>Введите ваш отзыв:</b></p>
      <p>
        <textarea
          rows="10"
          cols="45"
          name="text"
        ></textarea>
      </p>
      <p><input type="submit" value="Отправить" /></p>
    </form>
  </body>
</html>

См. также

• <form>
• <input>

Ссылки

• Тег <textarea> ^{MDN (рус. )}

Form Textarea | Components | BootstrapVue

Создавайте многострочные текстовые поля ввода с поддержкой автоматического изменения размера, минимального и максимального количества строк и контекстных состояний.

<template>
  <div>
    <b-form-textarea
     
      v-model="text"
      placeholder="Введите что-нибудь..."
      rows="3"
      max-rows="6"
    ></b-form-textarea>
    <pre>{{ text }}</pre>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        text: ''
      }
    }
  }
</script>
<!-- b-form-textarea.vue -->

Размеры элементов управления

Установите высоту текста с помощью свойства size на sm или lg для маленьких или больших соответственно.

Чтобы контролировать ширину, поместите ввод внутри стандартного столбца сетки Bootstrap.

<b-container fluid>
  <b-row>
    <b-col sm="2">
      <label for="textarea-small">Маленький:</label>
    </b-col>
    <b-col sm="10">
      <b-form-textarea
       
        size="sm"
        placeholder="Маленькая текстовая область"
      ></b-form-textarea>
    </b-col>
  </b-row>
  <b-row>
    <b-col sm="2">
      <label for="textarea-default">По умолчанию:</label>
    </b-col>
    <b-col sm="10">
      <b-form-textarea
       
        placeholder="Текстовая область по умолчанию"
      ></b-form-textarea>
    </b-col>
  </b-row>
  <b-row>
    <b-col sm="2">
      <label for="textarea-large">Большой:</label>
    </b-col>
    <b-col sm="10">
      <b-form-textarea
       
        size="lg"
        placeholder="Большая текстовая область"
      ></b-form-textarea>
    </b-col>
  </b-row>
</b-container>
<!-- b-form-textarea-sizes. vue -->

Отображаемые строки

Чтобы установить высоту <b-form-textarea>, установите свойство rows на желаемое количество строк. Если для rows, не задано значение, то по умолчанию будет 2 (значение по умолчанию для браузера и минимально допустимое значение). Если задать для него значение null или значение ниже 2, будет использоваться значение по умолчанию 2.

<div>
  <b-form-textarea
   
    placeholder="Высокое текстовое поле"
    rows="8"
  ></b-form-textarea>
</div>
<!-- b-form-textarea-rows.vue -->

Отключить маркер изменения размера

Некоторые веб-браузеры позволяют пользователю изменять высоту текстового поля. Чтобы отключить эту функцию, установите для свойства no-resize значение true.

<div>
  <b-form-textarea
   
    placeholder="Текстовое поле с фиксированной высотой"
    rows="3"
    no-resize
  ></b-form-textarea>
</div>
<!-- b-form-textarea-no-resize. vue -->

Автоматическая высота

<b-form-textarea> также может автоматически регулировать свою высоту (текстовые строки) в соответствии с содержимым, даже когда пользователь вводит или удаляет текст. Высота текстового поля будет либо увеличиваться, либо уменьшаться, чтобы соответствовать содержимому (увеличиваться до максимума max-rows или уменьшаться до минимального rows).

Чтобы установить начальную минимальную высоту (в строках), установите свойство rows на желаемое количество строк (или оставьте значение по умолчанию 2), а затем установите максимальное количество строк, до которых будет увеличиваться текстовая область (до показывая полосу прокрутки), установив для свойства max-rows максимальное количество строк текста.

Чтобы сделать высоту sticky (т.е. никогда не уменьшаться), установите для свойства no-auto-shrink значение true. Свойства no-auto-shrink не действуют, если max-rows не задано или равно или меньше rows.

Обратите внимание, что дескриптор изменения размера текстового поля (если он поддерживается браузером) будет автоматически отключен в режиме автоматической высоты.

<b-container fluid>
  <b-row>
    <b-col sm="2">
      <label for="textarea-auto-height">Автоматическая высота:</label>
    </b-col>
    <b-col sm="10">
      <b-form-textarea
       
        placeholder="Текстовое поле с автоматической высотой"
        rows="3"
        max-rows="8"
      ></b-form-textarea>
    </b-col>
  </b-row>
  <b-row>
    <b-col sm="2">
      <label for="textarea-no-auto-shrink">Без автоматического сжатия:</label>
    </b-col>
    <b-col sm="10">
      <b-form-textarea
       
        placeholder="Текстовое поле с автоматической высотой (без сжатия)"
        rows="3"
        max-rows="8"
        no-auto-shrink
      ></b-form-textarea>
    </b-col>
  </b-row>
</b-container>
<!-- b-form-textarea-auto-height. vue -->

Примечание о реализации автоматической высоты

Автоматическая высота работает путем вычисления результирующей высоты с помощью запросов CSS, поэтому ввод должен быть в документе (DOM) и видимым (не скрытым с помощью display: none). Начальная высота рассчитывается на креплении. Если клиент браузера поддерживает IntersectionObserver (либо изначально, либо через a polyfill), то <b-form-textarea> воспользуется преимуществом. этого, чтобы определить, когда текстовое поле станет видимым, и затем вычислит высоту. Смотрите раздел Поддержка браузера на странице начала работы.

Контекстные состояния

Bootstrap включает стили валидации для состояний valid и invalid для большинства элементов управления формой.

Вообще говоря, вы захотите использовать определенное состояние для определенных типов обратной связи:

• false (обозначает недопустимое состояние) отлично подходит, когда есть блокирующее или обязательное поле. Пользователь должен правильно заполнить это поле, чтобы отправить форму.
• true (обозначает допустимое состояние) идеально подходит для ситуаций, когда у вас есть проверка по каждому полю во всей форме и вы хотите побудить пользователя пройти через остальные поля.
• null Не отображает состояние проверки (ни действительное, ни недействительное)

Чтобы применить один из значков контекстного состояния к <b-form-textarea>, установите для свойства state значение false (для недопустимого), true (для действительного) или null (без состояния проверки).

<template>
  <div>
    <b-form-textarea
     
      v-model="text"
      :state="text.length >= 10"
      placeholder="Введите не менее 10 символов"
      rows="3"
    ></b-form-textarea>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        text: ''
      }
    }
  }
</script>
<!-- b-form-textarea-state. vue -->

Передача состояния контекста вспомогательным технологиям и дальтоникам

Использование этих контекстных состояний для обозначения состояния элемента управления формы обеспечивает только визуальную цветовую индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана, или пользователям с дальтонизмом.

Убедитесь, что также имеется альтернативная индикация состояния. Например, вы можете включить подсказку о состоянии в самом тексте <label> элемента управления формой или предоставив дополнительный текстовый блок справки.

Атрибут

Когда <b-form-textarea> имеет недопустимое контекстное состояние (т.е. состояние false), вы также можете захотеть установить для свойства aria-invalid значение true или одно из поддерживаемых значений:

• false: Без ошибок (по умолчанию)
• true или 'true': Значение не прошло проверку.
• 'grammar': Обнаружена грамматическая ошибка.
• 'spelling' Обнаружена орфографическая ошибка.

Если для свойства state задано значение false, а свойство aria-invalid явно не установлено, <b-form-textarea> автоматически установит для атрибута aria-invalid значение 'true'.

Поддержка форматтера

<b-form-textarea> опционально поддерживает форматирование, передавая ссылку на функцию в свойство formatter.

Форматирование (когда предоставляется функция форматирования) происходит, когда срабатывают собственные события элемента управления input и change. Вы можете использовать логическое свойство lazy-formatter, чтобы ограничить вызов функции форматирования для собственного события элемента управления blur.

Функция formatter получает два аргумента: необработанное value элемента ввода и нативный объект event, который инициировал форматирование (если доступно).

Функция formatter должна возвращать отформатированное значение как строка.

Форматирование не происходит, если не предоставлено средство форматирования formatter.

<template>
  <div>
    <b-form-group
      label="Текстовая область с форматеров (при вводе)"
      label-for="textarea-formatter"
      description="Мы мгновенно переведем ваш текст в нижний регистр"
     
    >
      <b-form-textarea
       
        v-model="text1"
        placeholder="Enter your text"
        :formatter="formatter"
      ></b-form-textarea>
    </b-form-group>
    <p><b>Значение:</b> {{ text1 }}</p>
    <b-form-group
      label="Текстовая область с отложенным форматеров (при блюре)"
      label-for="textarea-lazy"
      description="Этот немного поленился!"
     
    >
      <b-form-textarea
       
        v-model="text2"
        placeholder="Enter your text"
        lazy-formatter
        :formatter="formatter"
      ></b-form-textarea>
    </b-form-group>
    <p><b>Значение:</b> {{ text2 }}</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        text1: '',
        text2: ''
      }
    },
    methods: {
      formatter(value) {
        return value. toLowerCase()
      }
    }
  }
</script>
<!-- b-form-textarea-formatter.vue -->

Примечание: При неленивом форматировании, если курсор не находится в конце входного значения, он может переместиться в конец после ввода символа. Вы можете использовать предоставленный объект события и event.target для доступа к собственным методам выбора и свойствам ввода, чтобы контролировать, где находится точка вставки. Это оставлено читателю в качестве упражнения.

Обычный текст только для чтения

Если вы хотите, чтобы элементы <b-form-textarea readonly> в вашей форме были стилизованы как простой текст, установите свойство plaintext (не нужно устанавливать readonly, так как она будет установлена автоматически), чтобы удалить форму по умолчанию стиль поля и сохранить правильный размер текста, поля, отступы и высоту.

<template>
  <div>
    <b-form-textarea plaintext :value="text"></b-form-textarea>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        text: "Это какой-то текст. \nОн доступен только для чтения и не похож на ввод."
      }
    }
  }
</script>
<!-- b-form-textarea-plaintext.vue -->

Модификаторы

Vue официально не поддерживает модификаторы .lazy, .trim и .number в v-model входных данных на основе настраиваемых компонентов и может создавать неудобства для пользователей. Избегайте использования собственных модификаторов Vue.

Чтобы обойти это, в <b-form-textarea> есть три логических свойства trim, number и lazy, которые имитируют встроенные модификаторы Vue v-model .trim и .number и .lazy соответственно. Свойство lazy будет обновлять v-model при событиях change/blur.

Примечания:

• Свойство number имеет приоритет перед свойством trim (то есть trim не будет иметь никакого эффекта, если установлено number).
• При использовании свойства number и если значение может быть проанализировано как число (через parseFloat), оно вернет значение типа Number в v-model, в противном случае возвращается исходное входное значение, как тип String. Это то же самое поведение, что и собственный модификатор .number.
• Свойства модификаторов trim и number не влияют на значение, возвращаемое событиями input или change. Эти события всегда будут возвращать строковое значение содержимого <textarea> после необязательного форматирования (которое может не соответствовать значению, возвращаемому через событие update в v-model, которое обрабатывает модификаторы).

Поддержка Debounce

В качестве альтернативы свойства модификатора lazy, <b-form-textarea> опционально поддерживает отладку пользовательского ввода, обновляя v-model после периода простоя с момента, когда последний символ был введен пользователем ( или происходит событие change). Если пользователь вводит новый символ (или удаляет символы) до истечения тайм-аута простоя, тайм-аут запускается повторно.

Чтобы включить debouncing, установите для свойства debounce любое целое число больше нуля. Значение указывается в миллисекундах. Установка debounce на 0 отключит debouncing.

Примечание: устранение неполадок не произойдет, если установлено свойство lazy.

<template>
  <div>
    <b-form-textarea v-model="value" debounce="500" rows="3" max-rows="5"></b-form-textarea>
    <pre>{{ value }}</pre>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        value: ''
      }
    }
  }
</script>
<!-- b-form-textarea-debounce. vue -->

Автофокус

Когда свойство autofocus установлено на <b-form-textarea>, текстовое поле будет автоматически сфокусировано, когда оно вставлено (т.е. mounted) в документ или повторно активировано, когда оно находится внутри компонента Vue <keep-alive>. Обратите внимание, что это свойство не устанавливает атрибут autofocus в текстовом поле и не может определить, когда текстовое поле станет видимым.

Собственные и пользовательские события

Поддерживаются все собственные события (кроме настраиваемых событий input и change) без модификатора .native.

Пользовательские события input и change получают единственный аргумент текущего значения value (после применения любого форматирования) и запускаются при взаимодействии с пользователем.

Пользовательские события update передается входное значение, и оно генерируется всякий раз, когда v-model нуждается в обновлении (оно генерируется перед input, change и blur по мере необходимости).

Вы всегда можете получить доступ к собственным событиям input и change с помощью модификатора .native.

Открытые входные свойства и методы

<b-form-textarea> предоставляет несколько свойств и методов встроенного элемента ввода в ссылке на компонент (т.е. присваивает ref вашему <b-form-textarea ref="foo" ...> и используйте this.$refs['foo'].propertyName или this.$refs['foo'].methodName(...)).

Свойства ввода

Свойство	Примечания
. selectionStart	Чтение/Запись
.selectionEnd	Чтение/Запись
.selectionDirection	Чтение/Запись
.validity	Только чтение
.validationMessage	Только чтение
.willValidate	Только чтение

Методы ввода

Метод	Примечания
.focus()	Фокус на вводе
.blur()	Убрать фокус с ввода
.select()	Выбирает весь текст в поле ввода
.setSelectionRange()
.setRangeText()
. setCustomValidity()
.checkValidity()
.reportValidity()

Обратитесь к https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement для получения дополнительной информации об этих методах и свойствах. Поддержка будет зависеть от типа ввода.

Справочник по компонентам

Смотреть источник

• <b-form-textarea> Псевдонимы компонентов
• <b-form-textarea> Свойства
• <b-form-textarea> v-model
• <b-form-textarea> События

Псевдонимы компонентов

<b-form-textarea> также может использоваться через следующие псевдонимы:

• <b-textarea>

Примечание: Псевдонимы компонентов доступны только при импорте всего BootstrapVue или при использовании подключаемого модуля группы компонентов.

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство (Click to sort ascending)	Тип (Click to sort ascending)	По умолчанию	Описание
aria-invalid	Boolean или String	false	Устанавливает атрибут ‘aria-invalid’ с указанным значением
autocomplete	String		Устанавливает значение атрибута ‘autocomplete’ в элементе управления формы
autofocus	Boolean	false	Если установлено значение `true`, пытается автоматически сфокусировать элемент управления, когда он установлен, или повторно активировать, когда находится в состоянии активности. Не устанавливает атрибут `autofocus` на элементе управления
debounce v2.1.0+	Number или String	0	Если установлено количество миллисекунд больше нуля, пользовательский ввод будет подавлен. Не действует, если задано свойство ‘lazy’
disabled	Boolean	false	Если установлено значение `true`, отключает функциональность компонента и переводит его в отключенное состояние.
form	String		Идентификатор формы, к которой принадлежит элемент управления формой. Устанавливает атрибут `form` в элементе управления
formatter	Function		Ссылка на функцию форматирования текстового поля
id	String		Используется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
lazy v2.1.0+	Boolean	false	Если установлено, обновляет v-модель при событиях ‘change’/’blur’ вместо ‘input’. Эмулирует модификатор Vue v-model ‘.lazy’
lazy-formatter	Boolean	false	Если установлено, текстовое поле форматируется при размытии вместо каждого нажатия клавиши (если указано средство форматирования)
max-rows	Number или String		Максимальное количество отображаемых строк. Если предоставляется, текстовое поле будет увеличиваться (или уменьшаться), чтобы соответствовать содержимому до максимального количества строк
name	String		Устанавливает значение атрибута `name` в элементе управления формы
no-auto-shrink	Boolean	false	Если задано, предотвращает сжатие текстового поля с автоматической высотой, чтобы оно соответствовало содержимому
no-resize	Boolean	false	Если установлено, отключен дескриптор изменения размера браузера, который не позволяет пользователю изменять высоту текстового поля. Автоматически устанавливается в режиме автоматической высоты
number	Boolean	false	При установке пытается преобразовать входное значение в собственное число. Эмулирует модификатор Vue ‘.number’ v-model
placeholder	String		Устанавливает значение атрибута `placeholder` в элементе управления формы
plaintext	Boolean	false	Устанавливает элемент управления формы как только для чтения и визуализируйте элемент управления как обычный текст (без границ)
readonly	Boolean	false	Устанавливает атрибут `readonly` в элементе управления формы
required	Boolean	false	Добавляет атрибут `required` в элемент управления формы
rows	Number или String	2	Минимальное количество отображаемых строк. Должно быть значение больше 1
size	String		Установите размер внешнего вида компонента. ‘sm’, ‘md’ (по умолчанию) или ‘lg’
state	Boolean	null	Управляет внешним видом состояния проверки компонента. `true` для действительного, `false` для недопустимого или `null` для отсутствия проверки состояния
trim	Boolean	false	Если установлено, обрезает все начальные и конечные пробелы входного значения. Эмулирует модификатор Vue ‘.trim’ v-model
value v-model	Number или String	''	Текущее значение textarea. Результат всегда будет строкой, за исключением случаев, когда используется свойство ‘number’
wrap	String	'soft'	Значение, которое нужно разместить в атрибуте ‘wrap’ текстового поля. Управляет возвратом разрыва строки

События

Событие	Аргументы	Описание
blur	event — Собственное событие размытия (до того, как произойдет какое-либо дополнительное форматирование)	Генерируется после того, как текстовое поле теряет фокус
change	value — Текущее значение текстового поля	Событие ввода, вызванное взаимодействием с пользователем. Генерируется после любого форматирования (не включая свойства ‘trim’ или ‘number’) и после обновления v-model
input	value — Текущее значение текстового поля	Событие изменения, вызванное взаимодействием с пользователем. Генерируется после любого форматирования (не включая свойства ‘trim’ или ‘number’) и после обновления v-model
update	value — Значение textarea после любого форматирования. Не генерируется, если значение не меняется	Выпущено для обновления v-model

Импорт отдельных компонентов

Вы можете импортировать отдельные компоненты в свой проект с помощью следующих именованных экспортов:

Пример:

import { BFormTextarea } from 'bootstrap-vue'
Vue. component('b-form-textarea', BFormTextarea)

Импортировать как плагин Vue.js

Этот плагин включает в себя все перечисленные выше отдельные компоненты. Плагины также включают псевдонимы любых компонентов.

Пример:

import { FormTextareaPlugin } from 'bootstrap-vue'
Vue.use(FormTextareaPlugin)

Стилизуем Placeholder с помощью CSS 

Используйте псевдоэлемент ::placeholder для стилизации дефолтного текста в элементе input или textarea. Большинство современных браузеров поддерживают это, но для старых браузеров требуются префиксы.

::placeholder { 
 color: deeppink;
 font-size: 5rem;
 text-transform: uppercase;
}

HTML

Префиксы

Используемый мной синтаксис поддерживается большинством современных браузеров:

::placeholder { 
 color: deeppink;
}

Но для более старых браузеров вам нужно будет использовать префиксы поставщика.

/* WebKit, Edge */
::-webkit-input-placeholder {
 color: deeppink;
}

/* Firefox 4-18 */
:-moz-placeholder { 
 color: deeppink;
 opacity: 1;
}

/* Firefox 19+ */
::-moz-placeholder { 
 color: deeppink;
 opacity: 1;
}

/* IE 10-11 */
:-ms-input-placeholder { 
 color: deeppink;
}

/* Edge */
::-ms-input-placeholder { 
 color: deeppink;
}

/* MODERN BROWSER */
::placeholder { 
 color: deeppink;
}

Вау! Я знаю, это огромный список. И вы можете заметить довольно много разных вариантов реализации. Итак, давайте разберем эти различия и поймем, что здесь происходит.

Псевдоэлемент против псевдокласса

Вы можете заметить, что я использую двойное двоеточие ::. Это называется псевдоэлементом и было введено в CSS3. Если бы мы использовали одно двоеточие :, это назвали бы псевдоклассом.

Поскольку псевдоэлемент, :: был представлен в CSS3, а не в более ранних версиях CSS, некоторые старые браузеры, такие как Internet Explorer, просто никогда не поддерживали его. Принимая во внимание, что псевдокласс, : был представлен ранее (в CSS1 и CSS2). Вот почему гораздо больше браузеров, включая Internet Explorer, поддерживают его.

Следовательно, в нашем ::placeholder префиксе поставщика вы будете использовать смесь псевдокласса и псевдоэлемента.

Непрозрачность Placeholder в Firefox по умолчанию

Хорошо, с чем это связано opacity: 1 для Firefox. Это потому, что по умолчанию для placeholder Firefox применяется значение непрозрачности. Таким образом, чтобы переопределить это, мы должны установить его принудительно. Таким образом, наш placeholder будет отображаться и не будет иметь блеклого внешнего вида по умолчанию.

CSS-обработка неверных селекторов

Таким образом, вы также можете подумать, почему мы не просто сгруппировали все префиксы вендоров вместе как в примере ниже:

::-moz-placeholder, /* Firefox 19+ */
:-moz-placeholder /* Firefox 4-18 */
{ 
 color: deeppink;
 opacity: 1;
}

Ну, это потому, что в CSS3 было правило, которое гласит:

группа селекторов, содержащая недопустимый селектор, недействительна.

Давайте посмотрим на пример, чтобы увидеть, что это значит. Вот правильный CSS-селектор

h2 {
 color: blue;
}

Так что в нашем HTML это будет выглядеть как ожидалось

Но что произойдет, если мы добавим неверный селектор CSS

h2, /* valid */
h3::poop /* invalid */
{
 color: blue;
}

Так как в группе есть недопустимый селектор CSS. Вся группа будет считаться недействительной, и стилизация не будет применена.

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

⭐️ НО! похоже, это можно изменить в CSS4.

Как правило, если в цепочке или группе селекторов присутствует недопустимый псевдоэлемент или псевдокласс, весь список селекторов является недействительным. Если псевдоэлемент (но не псевдокласс) имеет префикс -webkit-, то по состоянию на Firefox 63 браузеры Blink, Webkit и Gecko предполагают, что он действителен, не аннулирует список выбора.

Подробнее об этом читайте в статье Криса Койера «Один неверный псевдо-селектор равен целому игнорируемому селектору»

Поддерживаемые стили

Вот список всех стилей, которые вы можете применить к вашему placeholder:

• background свойства
• color
• font свойства
• letter-spacing
• line-height
• opacity
• text-decoration
• text-indent
• text-transform
• vertical-align
• word-spacing

Проблемы доступности

Способность стилизовать заполнители — это круто. Но мне нужно отметить кое-что действительно важное — текст-заполнитель не заменяет элемент метки !! Я был виновен в этом, когда впервые попал в веб-программирование 🙁. Когда ваша форма основана исключительно на инструкциях-заполнителях без меток, это очень вредно для доступности. Доступность важна не только для того, чтобы сделать ваш веб-сайт доступным для всех, но и для повышения удобства работы пользователей. И, в конечном итоге, создание лучшего сайта или веб-приложения.

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

1. Поскольку placeholder исчезает в при вводе, он может напрягать кратковременную память вашего пользователя
2. Без label пользователи не могут проверить свою работу перед отправкой формы.
3. Когда появляются сообщения об ошибках, люди не знают, как решить проблему.

Автоматически добавлять Vendor-префиксы

Если вы не хотите иметь дело со всеми префиксами вендоров, вы можете использовать PostCSS с плагином Autoprefixer . Этот плагин будет анализировать ваш CSS и добавлять префиксы.

Тег — поле для ввода текста

Поддержка браузерами

Описание

HTML тег <textarea> определяет многострочное текстовое поле. Количество символов, которое можно ввести в поле не ограничено, а введенный текст отображается моноширинным шрифтом.

По умолчанию поле ввода элемента <textarea>, при отображении в браузере, можно растянуть (изменить его размер), потянув за нижний правый угол. Если вам нужно запретить изменение размера <textarea>, то нужно прописать CSS свойство resize со значением none в атрибуте style, в этом случае получится запретить растягивать только данное поле ввода:

<textarea></textarea>

Либо можно прописать resize: none; в стилях, тогда правило примениться ко всем многострочным текстовым полям:

textarea { resize: none; }

Размер текстового поля, заданный по умолчанию, может в разных браузерах быть разным. Для указания нужного размера можно воспользоваться атрибутами rows и cols или изменить ширину и высоту элемента с помощью CSS.

Между тегами <textarea> и </textarea> можно поместить любой текст, который будет изначально отображаться внутри текстового поля. Обратите внимание, что этот текст не исчезнет, когда поле ввода окажется в фокусе, поэтому если пользователь, при заполнении поля, не удалит данный текст, то он будет отправлен на сервер вместе с введенными данными.

Атрибуты

autofocus:

Указывает, что элемент <textarea> автоматически получит фокус после загрузки страницы. Возможные значения логического атрибута autofocus:

<textarea autofocus>
<textarea autofocus="autofocus">
<textarea autofocus="">

Примечание: атрибут autofocus не поддерживается в IE9 и более ранних версиях.

cols:

Указывает положительное целое число, определяющее ширину текстового поля (единицей измерения выступает ширина одного символа). Если атрибут не указан, то используется значение по умолчанию — 20.

disabled:

Указывает, что текстовая область будет неактивна, т.е. не будет возможности вводить текст или изменять и копировать текст, заданный по умолчанию. Возможные значения логического атрибута disabled:

<textarea disabled>
<textarea disabled="disabled">
<textarea disabled="">

form:

Определяет форму с которой связан элемент <textarea>. В качестве значения атрибута выступает идентификатор элемента <form>. Этот атрибут позволяет размещать многострочное текстовое поле в произвольном месте документа, а не только в качестве потомка элемента <form>.

Примечание: атрибут form не поддерживается браузером Internet Explorer.

maxlength:

Определяет максимально количество символов, которое можно будет ввести в текстовое поле.

Примечание: атрибут maxlength не поддерживается в IE9 и более ранних версия, и в Opera.

name:

Определяет имя для элемента.

placeholder:

Определяет короткую подсказку, которая описывает ожидаемое значение для текстового поля. Подсказка будет отображаться в текстовом поле, когда оно пустое, и исчезнет при получение им фокуса.

Примечание: атрибут placeholder не поддерживается в IE9 и более ранних версия.

readonly:

Указывает, что текстовое поле будет доступно только для чтения, т.е. текст невозможно будет изменить, но будет возможность его скопировать. Возможные значения логического атрибута readonly:

<textarea readonly>
<textarea readonly="readonly">
<textarea readonly="">

required:

Указывает, что текстовое поле должно быть заполнено перед отправкой формы на сервер.

Примечание: атрибут required не поддерживается браузерами Internet Explorer и Safari.

rows:

Указывает положительное целое число, определяющее высоту текстового поля (единицей измерения выступает высота строки). Если атрибут не указан, то используется значение по умолчанию — 2.

wrap:

Определяет параметры переноса строк в тексте, при отправке данных на сервер:

• hard — браузер автоматически вставляет разрывы строки так, что каждая строка не будет иметь ширину больше, чем ширина текстового поля. Обязательным условием использования значения hard является установленный атрибут cols.
• soft — текст отправляется одной сплошной строкой, дополнительные переносы строк не добавляются. Является значением по умолчанию.

Тег <textarea> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

Нет.

Пример

<textarea rows="3" cols="40">
  Здесь могла быть ваша реклама :)
</textarea>

Результат данного примера в окне браузера:

Стилизовать текст-заполнитель HTML5 с помощью CSS [input and textarea]

До HTML5 существовал XHTML1, а до него — HTML4. Заполнители, какими мы их знаем сегодня, были в XHTML1 и HTML4, смоделированные с помощью JavaScript. Стилизовать эти смоделированные заполнители было легко, потому что они на самом деле были входными значениями. Теперь, когда заполнители интегрированы в HTML5, эти заполнители JavaScript являются излишними, но стилизация этих заполнителей HTML5 стала намного сложнее, чем стилизация заполнителей JavaScript, особенно если вы хотите, чтобы стили заполнителей HTML5 применялись в разных браузерах. Этот учебник покажет вам, как именно стилизовать текст-заполнитель HTML5, используя только CSS, для обоих элементов ввода как элементов textarea. Прежде чем использовать какой-либо из приведенных ниже фрагментов кода, важно знать, что основные браузеры, такие как Chrome, FireFox, Safari, Opera и Internet Explorer/Edge, используют разные шаблоны для стилизации заполнителей ввода и заполнителей текстовой области.

Создайте поле ввода HTML5 и текстовую область с заполнителем

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

. Введите HTML:

Textarea HTML:

< /textarea> </p> <h3><span class="ez-toc-section" id="_-_HTML5_CSS"> Стилизация текста-заполнителя HTML5 с использованием CSS </span></h3> <p> Как было сказано ранее, каждый из основных браузеров использует разные шаблоны для стилизации ввода и заполнителей текстовой области. Поэтому нам нужно создать отдельное правило CSS для каждого браузера.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> У вас есть выбор: настроить таргетинг на все заполнители на вашем веб-сайте одновременно, только на определенные элементы, только на определенные элементы формы, только на определенные типы ввода, только на те входные данные, которые содержат заполнитель, только на целевые элементы, содержащие определенный класс, или только на таргетинг элементы, содержащие определенный идентификатор. Ниже вы найдете правила CSS для всех различных вариантов таргетинга: </p> <p> Цель <strong> каждый </strong> текст заполнителя: </p> <p> ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ <br/> цвет: #123456; <br/> } <br/> :-moz-placeholder { /* Mozilla Firefox с 4 по 18 */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> ::-moz-placeholder { /* Mozilla Firefox 19+ */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> :-ms-input-placeholder { /* Internet Explorer 10-11 */ <br/> цвет: #123456; <br/> } <br/> :placeholder-show { /* Стандартный псевдокласс */ <br/> цвет: #123456; <br/> } </p> <p> Цель <strong> каждый ввод </strong> текст заполнителя: </p> <p> input::-webkit-input-placeholder { /* WebKit, Blink, Edge */ <br/> цвет: #123456; <br/> } <br/> input:-moz-placeholder { /* Mozilla Firefox с 4 по 18 */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> input::-moz-placeholder { /* Mozilla Firefox 19+ */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> input:-ms-input-placeholder { /* Internet Explorer 10-11 */ <br/> цвет: #123456; <br/> } <br/> input:placeholder-show { /* Стандартный псевдокласс */ <br/> цвет: #123456; <br/> } </p> <p> Цель <strong> каждая текстовая область </strong> текст заполнителя: </p> <p> textarea::-webkit-input-placeholder { /* WebKit, Blink, Edge */ <br/> цвет: #123456; <br/> } <br/> textarea:-moz-placeholder { /* Mozilla Firefox 4–18 */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> textarea::-moz-placeholder { /* Mozilla Firefox 19+ */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */ <br/> цвет: #123456; <br/> } <br/> textarea:placeholder-show { /* Стандартный псевдокласс */ <br/> цвет: #123456; <br/> } </p> <p> Целевые тексты-заполнители из <strong> все входные данные определенного типа </strong> : </p> <p> input[type=»text»]::-webkit-input-placeholder { /* WebKit, Blink, Edge */ <br/> цвет: #123456; <br/> } <br/> input[type=»text»]:-moz-placeholder { /* Mozilla Firefox с 4 по 18 */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> input[type=»text»]::-moz-placeholder { /* Mozilla Firefox 19+ */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> input[type=»text»]:-ms-input-placeholder { /* Internet Explorer 10-11 */ <br/> цвет: #123456; <br/> } <br/> input[type=»text»]:placeholder-show { /* Стандартный псевдокласс */ <br/> цвет: #123456; <br/> } </p> <p> Целевые тексты заполнителей из всех входных данных <strong>, которые имеют атрибут заполнителя </strong> : </p> <p> input[placeholder]::-webkit-input-placeholder { /* WebKit, Blink, Edge */ <br/> цвет: #123456; <br/> } <br/> input[placeholder]:-moz-placeholder { /* Mozilla Firefox 4–18 */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> input[placeholder]::-moz-placeholder { /* Mozilla Firefox 19+ */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> input[placeholder]:-ms-input-placeholder { /* Internet Explorer 10-11 */ <br/> цвет: #123456; <br/> } <br/> input[placeholder]:placeholder-show { /* Стандартный псевдокласс */ <br/> цвет: #123456; <br/> } </p> <p> Цель <strong> элементов формы с определенным классом </strong> (класс в этом примере: «имя класса»): </p> <p> .<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> classname::-webkit-input-placeholder { /* WebKit, Blink, Edge */ <br/> цвет: #123456; <br/> } <br/> .classname:-moz-placeholder { /* Mozilla Firefox с 4 по 18 */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> .classname::-moz-placeholder { /* Mozilla Firefox 19+ */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> .classname:-ms-input-placeholder { /* Internet Explorer 10-11 */ <br/> цвет: #123456; <br/> } <br/> .classname:placeholder-show { /* Стандартный псевдокласс */ <br/> цвет: #123456; <br/> } </p> <p> Целевые <strong> элементы формы с определенным идентификатором </strong> (идентификатор в этом примере: «idname»): </p> <p> #idname::-webkit-input-placeholder { /* WebKit, Blink, Edge */ <br/> цвет: #123456; <br/> } <br/> #idname:-moz-placeholder { /* Mozilla Firefox с 4 по 18 */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> #idname::-moz-placeholder { /* Mozilla Firefox 19+ */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> #idname:-ms-input-placeholder { /* Internet Explorer 10-11 */ <br/> цвет: #123456; <br/> } <br/> #idname:placeholder-show { /* Стандартный псевдокласс */ <br/> цвет: #123456; <br/> } </p> <p> Приведенные выше правила CSS показывают, что существует два способа нацеливания на вводимые тексты и замещающие тексты текстовой области: с помощью псевдоэлементов (::) и псевдоклассов (:).<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Различные основные браузеры поддерживают псевдоэлементы или псевдоклассы, но они никогда не поддерживают и то, и другое, что делает важным использование каждого из приведенных выше правил CSS для применения желаемых стилей в каждом браузере. Список поддерживаемых свойств CSS для псевдо- элементы становятся все больше и больше, они перечислены ниже. Имейте в виду, что приведенные ниже свойства CSS в основном не работают с псевдоклассами, потому что псевдоклассы просто не поддерживают многие свойства CSS. </p> <h3><span class="ez-toc-section" id="_CSS-3"> Поддерживаемые свойства CSS для заполнителей </span></h3> <p> Следующие свойства CSS для псевдоэлементов (::) поддерживаются большинством основных браузеров: </p> <ul> <li> цвет </li> <li> межсловный интервал </li> <li> межбуквенный интервал </li> <li> вертикальное выравнивание </li> <li> высота строки </li> <li> padding-свойства </li> <li> свойства шрифта </li> <li> свойства текста </li> <li> свойства границы </li> <li> свойства фона </li> <li> свойства позиции </li> <li> свойства преобразования </li> <li> opacity — FireFox автоматически уменьшает непрозрачность заполнителя, поэтому вам нужно добавить opacity:1; (как вы можете видеть в приведенных выше примерах).<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> </li> </ul> <p>   </p> <h3><span class="ez-toc-section" id="i-55"> Важно! Также стилизуйте тексты ввода и текстовой области, а не только заполнители. Как только вы начнете вводить текст в поле ввода или текстовой области, появится текст ввода/текстовой области, и к этим текстам будут применены стили браузера по умолчанию. Поэтому всегда убедитесь, что вы сначала стилизуете обычный текст ввода и текстовую область, а затем стилизуете заполнители. Например: </span></h3> </p> <p data-readability-styled="true"> ввод, текстовая область { <br/> цвет: #123456; /* Это добавит цвет к тексту ввода и текстовой области */ <br/> } </p> <p> ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ <br/> цвет: #123456; <br/> } <br/> :-moz-placeholder { /* Mozilla Firefox с 4 по 18 */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> ::-moz-placeholder { /* Mozilla Firefox 19+ */ <br/> цвет: #123456; <br/> непрозрачность: 1; <br/> } <br/> :-ms-input-placeholder { /* Internet Explorer 10-11 */ <br/> цвет: #123456; <br/> } <br/> :placeholder-show { /* Стандартный псевдокласс */ <br/> цвет: #123456; <br/> } </p> <h3><span class="ez-toc-section" id="i-56"> Заполнитель слишком велик для поля ввода? </span></h3> <p> Заполнители могут быть слишком большими для поля ввода (ширина ввода слишком мала для текста заполнителя).<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Это может произойти с полями ввода по умолчанию, а также когда макет нарушает адаптивное поведение, а ширина полей ввода уменьшается, что приводит к тому, что текст-заполнитель больше, чем ширина ввода. Чтобы решить эту проблему, убедитесь, что вы добавили text-overflow:ellipsis; к тексту-заполнителю, чтобы часть текста-заполнителя, которая не помещается в поле ввода, была обрезана. Используйте следующие правила CSS, чтобы применить это: </p> <p> ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ <br/> переполнение текста: многоточие; <br/> } <br/> :-moz-placeholder { /* Mozilla Firefox с 4 по 18 */ <br/> переполнение текста: многоточие; <br/> } <br/> ::-moz-placeholder { /* Mozilla Firefox 19+ */ <br/> переполнение текста: многоточие; <br/> } <br/> :-ms-input-placeholder { /* Internet Explorer 10-11 */ <br/> переполнение текста: многоточие; <br/> } <br/> :placeholder-show { /* Стандартный псевдокласс */ <br/> переполнение текста: многоточие; <br/> } </p> <h3><span class="ez-toc-section" id="i-57"> Отключение заполнителя при нажатии (фокусе) на поле ввода или текстовой области </span></h3> <p> По умолчанию тексты-заполнители, когда вы щелкаете/сосредотачиваетесь на поле ввода/текстовой области, таковы, что тексты-заполнители остаются видимыми до тех пор, пока вы не начнете печатать.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Чтобы убедиться, что текст заполнителя исчезает, как только вы нажмете/сосредоточитесь на вводе или текстовой области, сделайте цвет текста заполнителя прозрачным. Следующие правила CSS полностью скроют текст заполнителя при фокусе/щелчке: </p> <p> ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ <br/> цвет: прозрачный; <br/> } <br/> :-moz-placeholder { /* Mozilla Firefox с 4 по 18 */ <br/> цвет: прозрачный; <br/> } <br/> ::-moz-placeholder { /* Mozilla Firefox 19+ */ <br/> цвет: прозрачный; <br/> } <br/> :-ms-input-placeholder { /* Internet Explorer 10-11 */ <br/> цвет: прозрачный; <br/> } <br/> :placeholder-show { /* Стандартный псевдокласс */ <br/> цвет: прозрачный; <br/> } </p> <h3><span class="ez-toc-section" id="i-58"> Совместимость с браузерами-заполнителями </span></h3> <p> Заполнители HTML5 поддерживаются последними версиями всех основных браузеров. Приведенные ниже правила CSS предназначены для всех современных основных браузеров и максимально старых браузеров, но есть ограничения.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Возьмем, к примеру, старые версии Internet Explorer (IE9 и старше), которые вообще не поддерживают заполнители, или старые версии Opera, которые не поддерживают селекторы CSS для заполнителей. Если вы убедитесь, что используете все следующие правила CSS, тексты-заполнители будут отлично смотреться во всех основных браузерах и в большинстве старых браузеров: </p> <p> ::-webkit-input-placeholder — WebKit, Blink, Edge <br/> :-moz-placeholder — Mozilla Firefox 4–18 <br/> ::-moz-placeholder — Mozilla Firefox 19+ <br/> :-ms-input-placeholder — Интернет Explorer 10-11 <br/> :placeholder-show — Стандартный псевдокласс </p> <p> Некоторые браузеры уже поддерживают новые типы ввода HTML5, такие как «email», «url» или «tel». Не все браузеры поддерживают эти новые типы ввода, и если они их не поддерживают, эти типы ввода будут автоматически преобразованы в тип ввода «текст». Среди браузеров, которые поддерживают эти новые типы ввода HTML5, есть браузеры, которые поддерживают эти типы ввода, но добавляют некоторый дополнительный CSS по умолчанию, который будет отображать эти вводы странным образом.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Чтобы избежать этого, всегда убедитесь, что вы установили внешний вид на «текстовое поле», чтобы каждый браузер отображал эти новые типы ввода HTML5 как текстовые поля: </p> <p data-readability-styled="true"> HTML5: </p> <p> <input type="url" placeholder="http://.."> </p> <p data-readability-styled="true"> CSS: </p> <p> ввод [тип = «URL»] { <br/> -moz-внешний вид: текстовое поле; <br/> -webkit-внешний вид: текстовое поле; <br/> внешний вид: текстовое поле; <br/> } </p> <h5><span class="ez-toc-section" id="i-59"> Было ли это полезно? </span></h5> <h2><span class="ez-toc-section" id="_Placeholder_Smashing_Magazine"> Не используйте атрибут Placeholder — Smashing Magazine </span></h2> <ul> <li> Чтение: 14 мин. UX, Браузеры, Специальные возможности </li> <li> Поделиться в Twitter, LinkedIn </li> </ul> <h5><span class="ez-toc-section" id="i-60"> Об авторе </span></h5> <p> Эрик — дизайнер из Бостона, который помогает создавать простые решения, отвечающие практическим, физическим, когнитивным и эмоциональным потребностям человека.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Больше о Эрик ↬ </p> Атрибут-заполнитель содержит удивительное количество проблем, которые мешают ему выполнить то, что он обещает. Давайте проясним, почему вам нужно прекратить его использовать. <p> Представленный как часть спецификации HTML5 атрибут placeholder «представляет собой краткую подсказку (слово или короткую фразу), предназначенную для помощи пользователю при вводе данных, когда элемент управления не имеет значения. Подсказкой может быть образец значения или краткое описание ожидаемого формата». </p> <p> Этот, казалось бы, простой атрибут содержит удивительное количество проблем, которые мешают ему выполнить то, что он обещает. Надеюсь, я смогу убедить вас прекратить его использовать. </p> <h3><span class="ez-toc-section" id="i-61"> Технически правильно </span></h3> <p> Входы — это ворота, через которые проходит почти вся электронная коммерция. Независимо от того, что вы думаете о месте эмпатии в дизайне, бесполезные входные данные оставляют деньги на столе. </p> <p> Наличие атрибута-заполнителя не будет помечено программным обеспечением автоматической проверки доступности.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Однако это не обязательно означает, что его можно использовать. В конечном счете, доступность касается людей, а не стандартов, поэтому важно думать о вашем интерфейсе не только с помощью контрольного списка. </p> <p> Назовите это исправлением, инклюзивным дизайном, универсальным доступом и так далее. Суть всех этих философий сводится к созданию вещей, которые люди — все люди — могут использовать. Если смотреть через эту призму, <code>-заполнитель </code> просто не выдерживает критики. </p> <h3><span class="ez-toc-section" id="i-62"> Проблемы </span></h3> <h4><span class="ez-toc-section" id="i-63"> Перевод </span></h4> <p> Браузеры с функциями автоматического перевода, такими как Chrome, пропускают атрибуты при инициировании запроса на перевод текущей страницы. Для многих атрибутов это желательное поведение, поскольку обновленное значение может нарушить базовую логику или структуру страницы. </p> <p> Одним из атрибутов, пропущенных браузерами, является <code> заполнитель </code> . Из-за этого содержимое <code> заполнителя </code> не будет переведено и останется исходным языком.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> </p> <p data-readability-styled="true"> Больше после прыжка! Продолжить чтение ниже ↓ </p> <p> Если человек запрашивает перевод страницы, ожидается, что все видимое содержимое страницы будет обновлено. Заполнители часто используются для предоставления важных инструкций по форматированию ввода или вместо более подходящего <code> метка </code> элемент (подробнее об этом чуть позже). Если это содержимое не будет обновлено вместе с остальной частью переведенной страницы, существует высокая вероятность того, что человек, незнакомый с языком, не сможет успешно понять ввод и управлять им. </p> <p> Это должно быть достаточной причиной, чтобы не использовать атрибут. </p> <p> Раз уж мы заговорили о переводе, стоит также отметить, что местоположение — это не то же самое, что языковые предпочтения. Многие люди настраивают свои устройства на использование языка, который не является официальным языком страны, указанной в IP-адресе их браузера (не говоря уже о VPN), и мы должны уважать это. Убедитесь, что ваш контент семантически описан — ваши соседи будут вам благодарны! </p> <h4><span class="ez-toc-section" id="i-64"> Интероперабельность </span></h4> <p> Интероперабельность — это практика, позволяющая различным системам обмениваться информацией и понимать ее.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Это фундаментальная часть как Интернета, так и вспомогательных технологий. </p> <p> Семантическое описание содержимого делает его интероперабельным. Интероперабельный вход <code> </code> создается путем программного связывания с ним элемента <code> label </code>. Метки описывают назначение поля ввода, предоставляя человеку, заполняющему форму, подсказку, с которой он может действовать. Один из способов связать 9Метка 0327 </code> с входом <code> </code> заключается в использовании атрибута <code> для </code> со значением, которое соответствует идентификатору входа <code> </code> . </p> <p> Без этого сопряжения <code> для </code> / <code> id </code> вспомогательные технологии не смогут определить, для чего предназначен ввод. Программная ассоциация предоставляет крючок API, который может использовать такое программное обеспечение, как программы чтения с экрана или распознавание голоса. Без него люди, которые полагаются на это специализированное программное обеспечение, не смогут читать или управлять входными данными.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> </p> Как семантическая разметка используется как для визуального представления, так и для доступного контента. (Большой предварительный просмотр) <p> Причина, по которой я упоминаю об этом, заключается в том, что <code> заполнитель </code> часто используется вместо элемента </code> метки </code>. Хотя я лично сбит с толку этой практикой, похоже, она набрала популярность в дизайнерском сообществе. Мое лучшее предположение о его популярности — геометрически точный эффект сетки, который он создает при размещении рядом с другими полями ввода без меток, действует как дизайнерская кошачья мята. </p> Пример фетишизации сетки ввода с одного печально известного синего сайта. (Большой предварительный просмотр) <p> Эффект плавающей метки, близкий родственник этого явления, также часто использует атрибут заполнителя вместо метки <code> </code> . </p> <p> Стоит отметить, что если метка программно связана с вводом, щелчок или касание текста метки переместит фокус на ввод. Этот небольшой трюк обеспечивает дополнительную область для взаимодействия с входными данными, что может быть полезно для людей с проблемами контроля моторики.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Заполнители, действующие как метки, а также плавающие метки, не могут этого сделать. </p> <h4><span class="ez-toc-section" id="i-65"> Когниция </span></h4> <p> По данным переписи населения США 2016 года, почти 15 миллионов человек сообщают о когнитивных проблемах, и это только с учетом тех, кто решил сообщить о себе. Экстраполируя это, мы можем предположить, что проблемы когнитивной доступности затрагивают значительную часть населения мира. </p> <p> О самоотчетах стоит упомянуть, поскольку человек может не знать или не чувствовать себя комфортно, говоря, что у него есть состояние когнитивной доступности. К сожалению, раскрытие такого рода информации по-прежнему вызывает клеймо позора, поскольку оно часто влияет на такие вещи, как перспективы трудоустройства и жилья. </p> <p> Познание может быть подавлено ситуативно, то есть это вполне может случиться с вами. На него могут повлиять такие вещи, как многозадачность, недосыпание, стресс, злоупотребление психоактивными веществами и депрессия. Я могу быть немного измученным здесь, но это очень похоже на условия, которые вы найдете на большинстве офисных работ.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> </p> <h5><span class="ez-toc-section" id="i-66"> Повторный вызов </span></h5> <p> Зонтик когнитивных проблем охватывает такие состояния, как кратковременная потеря памяти, черепно-мозговая травма и синдром дефицита внимания с гиперактивностью. Все они могут повлиять на способность человека вспоминать информацию. </p> <p> Когда человек вводит информацию в поле ввода, его заполнитель исчезает. Единственный способ восстановить его — удалить введенную информацию. Это создает ощущение, что направляющий язык удаляется, как только человек, пытающийся заполнить ввод, взаимодействует с ним. Не хорошо! </p> Они хотели ММ/ДД/ГГ или ММ/ДД/ГГГГ? (Большое превью) <p> Когда ваша способность вспоминать информацию ограничена, следование этим исчезающим правилам раздражает. Ввод данных со сложными требованиями — например, создание нового пароля — не вызывает раздражения и становится труднопреодолимым барьером. </p> Подождите, какая минимальная длина? Сколько чисел они хотят снова? (Большой предварительный просмотр) <p> В то время как более технологически искушенные люди, возможно, научились хитрым трюкам, таким как вырезание введенной информации, просмотр содержимого заполнителя, чтобы освежить свою память, а затем повторная вставка его обратно для редактирования, люди, менее технически грамотные, могут не понять почему содержимое справки исчезает или как его вернуть.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> </p> <h4><span class="ez-toc-section" id="i-67"> Цифровая грамотность </span></h4> <p> Учитывая, что все больше и больше населения мира подключается к сети, на нас, как на ответственных дизайнеров и разработчиков, ложится ответственность за то, чтобы эти люди чувствовали себя желанными. Ваш маленький уголок Интернета (или интрасети!) вполне может быть одним из их первых онлайн-впечатлений — при условии, что конечный пользователь «просто узнает» о простом высокомерии. </p> <p> Для читателей из США нежное напоминание о том, что новое может не означать иностранное. Доступ растет для пожилых американцев. Хотя со временем цифровая грамотность станет более распространенным явлением среди пожилых людей, проблемы доступности также будут расти. </p> <p> Для тех, кто никогда раньше с этим не сталкивался, текст-заполнитель может выглядеть как введенный контент, из-за чего они пропускают ввод. Если это обязательное поле, отправка формы создаст разочарование, когда они могут не понять, в чем ошибка или как ее исправить. Если это не обязательное поле, ваша форма по-прежнему подвергается ненужному риску не собрать потенциально ценную вторичную информацию.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> </p> <h4><span class="ez-toc-section" id="i-68"> Утилита </span></h4> <p> Содержимое справки-заполнителя ограничено только строкой статического текста, и этого не всегда может быть достаточно для передачи сообщения. К нему может потребоваться применить дополнительные стили или содержать описательную разметку, атрибуты, изображения и иконографию. </p> <p> Это особенно удобно в зрелых системах проектирования. Дополнительные параметры стиля, созданные путем перемещения строки текста из элемента ввода, означают, что он может использовать маркеры дизайна системы и все преимущества, связанные с их использованием. </p> <p> Длина текста-заполнителя также ограничена шириной входных данных, в которых он содержится. В нашем адаптивном, ориентированном на мобильные устройства мире существует очень большая вероятность того, что важная информация может быть усечена: </p> Думаю, я никогда не узнаю, где этот код есть. (Большой предварительный просмотр) <h4><span class="ez-toc-section" id="Vision"> Vision </span></h4> <h5><span class="ez-toc-section" id="Color_Contrast"> Color Contrast </span></h5> <p> Стили основных браузеров по умолчанию для содержимого-заполнителя используют светло-серый цвет, чтобы визуально сообщить, что это предложение.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Многие пользовательские дизайны ввода следуют этому соглашению, беря цвет содержимого ввода и осветляя его. </p> <p> К сожалению, этот метод может привести к проблемам с цветовым контрастом. Цветовой контраст — это соотношение, определяемое путем сравнения значений яркости текста и цвета фона; в данном случае это цвет текста-заполнителя на фоне ввода. </p> <p data-height="480" data-theme-id="light" data-slug-hash="dKbbEV" data-user="ericwbailey" data-default-tab="result"> См. коэффициент контрастности заполнителя браузера Pen Default от Эрика Бейли (@ericwbailey) на CodePen. </p> См. коэффициент контрастности заполнителя браузера Pen Default от Эрика Бейли (@ericwbailey) на CodePen. <p> Если коэффициент контрастности содержимого заполнителя слишком низок для восприятия, это означает, что информация, необходимая для успешного заполнения формы, может быть не видна людям с плохим зрением. Для наиболее распространенных размеров входного шрифта соотношение составляет 4,5:1. </p> <p> Как и все проблемы доступности, плохое зрение может быть постоянным или временным, биологическим или экологическим, или их комбинацией.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> К биологическим нарушениям относятся такие состояния, как дальнозоркость, дальтонизм, расширенные зрачки и катаракта. Условия окружающей среды включают в себя такие обстоятельства, как яркий свет полуденного солнца, настройка низкой яркости для экономии заряда батареи, экраны конфиденциальности, жир и макияж, оставшиеся на экране после вашего последнего телефонного звонка, и т. д. </p> <p> Это соотношение не является каким-то личным эстетическим предпочтением, которое я пытаюсь произвольно навязать другим. Это часть набора тщательно разработанных правил, которые помогают гарантировать, что цифровыми технологиями сможет пользоваться как можно больше людей, независимо от их способностей или обстоятельств. Сознательное игнорирование этих правил означает соучастие в практике исключения. </p> <p> И вот в чем загвоздка: при попытке сделать атрибуты заполнителя инклюзивными, обновленный более контрастный цвет содержимого заполнителя может стать достаточно темным, чтобы его могли интерпретировать как введенные данные даже более грамотными в цифровом отношении людьми.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Это отбрасывает проблему обратно в область познавательных проблем. </p> Цвет текста заполнителя на странице сброса пароля GoFundMe делает его похожим на введенный ввод. Кроме того, значок галочки на кнопке «Запросить новый пароль» создает впечатление, что запрос уже обработан. (большой превью) <h5><span class="ez-toc-section" id="i-69"> Режим высокой контрастности </span></h5> <p> Операционная система Windows содержит функцию, называемую режимом высокой контрастности. При активации он назначает новые цвета элементам интерфейса из специальной высококонтрастной палитры, использующей ограниченное количество цветовых вариантов. Вот пример того, как это может выглядеть: </p> Windows 10 настроена на использование темы High Contrast Mode 1 под управлением Internet Explorer 11. (Большой предварительный просмотр) делая его похожим на предварительно заполненную информацию. Как обсуждалось ранее, это может помешать людям понять, что входные данные могут нуждаться в введенной в них информации. </p> <p> Вам может быть интересно, можно ли обновить стиль в режиме высокой контрастности, чтобы сделать заполнитель более понятным.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Хотя в медиа-запросе можно выбрать режим высокой контрастности, я умоляю вас не делать этого. Разработчик внешнего интерфейса Китти Жиродель сказала об этом лучше всего: </p> <blockquote> «Режим высокой контрастности больше не связан с дизайном, а строго ориентирован на удобство использования. Вы должны стремиться к максимальной читабельности, а не к цветовой эстетике». </blockquote> <p> Люди, которые полагаются на режим высокой контрастности, используют его из-за его предсказуемости. Чрезмерное изменение способа представления контента может помешать единственному способу надежного использования компьютера. В случае осветления цвета содержимого-заполнителя, чтобы оно выглядело как обработка без режима высокой контрастности, вы рискуете сделать его невозможным для восприятия. </p> <h3><span class="ez-toc-section" id="i-70"> Решение </span></h3> <p> Напомним, атрибут-заполнитель: </p> <ul> <li> Не может быть переведен автоматически; </li> <li> Часто используется вместо этикетки, блокируя вспомогательные технологии; </li> <li> Может скрывать важную информацию при вводе контента; </li> <li> Может быть слишком светлым для разборчивости; </li> <li> Имеет ограниченные варианты оформления; </li> <li> Может выглядеть как предварительно заполненная информация и может быть пропущена.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> </li> </ul> <p> Эш. Это не здорово. Итак, что мы можем с этим поделать? </p> <h4><span class="ez-toc-section" id="i-71"> Дизайн </span></h4> <p> Переместите содержимое заполнителя выше ввода, но ниже метки: </p> Большой предварительный просмотр <p> Этот подход: </p> <ul> <li> Сообщает визуальную и структурную иерархию: <ul> <li> Для чего предназначен этот ввод, </li> <li> Что вам нужно знать для успешного использования ввода и </li> <li> сам ввод. </li> </ul> </li> <li> Можно перевести. </li> <li> Не будет выглядеть как предварительно заполненная информация. </li> <li> Можно увидеть в условиях плохой видимости. </li> <li> Не исчезает при вводе содержимого в поле ввода. </li> <li> Может включать семантическую разметку и стилизоваться с помощью CSS. </li> </ul> <p> Кроме того, содержимое справки будет отображаться при активации ввода на устройстве с программной клавиатурой. При размещении под входом содержимое может быть скрыто, когда экранная клавиатура появляется в нижней части области просмотра устройства: </p> Содержимое скрыто экранной клавиатурой.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Клавиатуры сторонних производителей с большей высотой могут иметь больший риск блокировки важного содержимого. (большой превью) <h4><span class="ez-toc-section" id="i-72"> Разработка </span></h4> <p> Вот как перевести наш разработанный пример в код: </p><pre> <div> <метка для="идентификатор-сотрудника"> Ваш идентификационный номер сотрудника </метка> <р > Можно найти в профиле вашего сотрудника в интранете. Пример: <samp>a1234567-89</samp>. </p> <ввод aria-describedby="подсказка-id-сотрудника" имя = "идентификационный номер" тип = "текст" /> </div> </pre><p> Небольшой отход от традиционных доступных <code> для </code> / <code> id </code> пары атрибутов: элемент <code> label </code> программно связан с <code> input </code> через его <code> id </code> объявление «employee-id». Элемент <code> p </code>, помещенный между меткой <code> </code> и входными элементами <code> </code>, действует как замена атрибута </code> заполнителя </code>. </p> <p> «Итак, — спросите вы. «Почему бы нам просто не поместить весь этот замещающий контент в элемент <code> label </code>? Кажется, работы будет намного меньше!» Ответ заключается в том, что удобство для разработчиков не должно иметь приоритет над пользовательским опытом.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> </p> <p> Используя <code> aria-described by </code>, чтобы программно связать ввод <code> </code> с элементом <code> p </code>, мы создаем приоритет информации для программ чтения с экрана, который имеет паритет с тем, что испытал бы человек, просматривающий без программы чтения с экрана. <code> aria-describedby </code> гарантирует, что содержимое <code> p </code> будет описано последним, после содержимого метки <code> </code> и типа ввода, с которым оно связано. </p> <p> Другими словами, это то, какой контент запрашивает ввод, какой это тип ввода, а затем дополнительная помощь, если она вам нужна — именно то, что кто-то испытает, если посмотрит на ввод формы. </p> <p> Пользовательский опыт распространяется на всех пользователей, включая тех, кто перемещается с помощью программ чтения с экрана. Содержимое справки является автономным, и в нем легко перемещаться, если человеку, использующему программу чтения с экрана, потребуется повторно сослаться на него. Поскольку это автономный узел, его также можно отключить (обычно с помощью клавиши Control), не рискуя заглушить другую важную информацию.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> </p> <p> Включение содержимого справки в состав метки <code> </code> делает его излишне подробным. <code> этикетка </code> должны быть осмысленными, но также краткими. Добавление слишком большого количества информации к метке может привести к эффекту, противоположному желаемому, что сделает ее слишком длинной для запоминания или просто слишком раздражающей, чтобы слушать ее полностью. На самом деле в Руководстве по обеспечению доступности веб-контента есть правила, специально касающиеся этого: критерии успеха 2.4.6 и 3.3.2. </p> <h4><span class="ez-toc-section" id="i-73"> Пример </span></h4> <p> Вот решение, реализованное в реальном коде: </p> <p data-height="265" data-theme-id="0" data-slug-hash="ea10dcdde2520c561bd588a2e1f50ce8" data-default-tab="html,result" data-user="ericwbailey" data-embed-version="2" data-pen-title="Don't use the placeholder attribute" data-editable="true"> См. перо Не используйте атрибут-заполнитель Эрика Бейли (@ericwbailey) на CodePen. </p> <p> А вот видео, демонстрирующее, как с этим справляются популярные программы чтения с экрана: </p> <iframe loading="lazy" src="https://www.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> youtube.com/embed/MHGJna9GcTM?rel=0″ frameborder=»0″ webkitallowfullscreen=»» mozallowfullscreen=»» allowfullscreen=»»/> </iframe> <h3><span class="ez-toc-section" id="i-74"> Лучшее решение </span></h3> <blockquote> «Чем меньше интерфейс требует от пользователей, тем он доступнее». <p> — Элис Боксхолл </p> </blockquote> <p> Последняя мысль: нужна ли вам эта дополнительная информация-заполнитель? </p> <p> В хороших интерфейсных решениях используются специальные входные атрибуты и методы проверки, чтобы не перекладывать дополнительную работу на человека, который просто хочет использовать ваш сайт или приложение с минимальными осложнениями. </p> <p> Хороший копирайтинг создает ярлыки, которые четко и кратко описывают цель входных данных. Сделайте здесь достаточно хорошую работу, и этикетка устранит двусмысленность, особенно если вы заранее протестируете ее. </p> <p> Хороший пользовательский опыт заключается в создании интеллектуальных потоков, которые опережают потребности, желания и желания людей, используя существующую информацию для устранения как можно большего количества ненужных вопросов.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> </p> <p> Прислушиваться к людям, которые используют ваш веб-сайт или веб-приложение, означает критически относиться к тому, что вы считаете само собой разумеющимся, когда просматриваете Интернет. Не делая предположений об обстоятельствах других людей, включая технологии, которые они используют, вы можете внести свой вклад в предотвращение исключения. </p> <p> Потратьте некоторое время, чтобы просмотреть свой дизайн и код и посмотреть, что не выдерживает критики. Для начала неплохо было бы проверить, используете ли вы атрибут-заполнитель. </p> <p> <em> Стоя на плечах гигантов. Спасибо Роджеру Йоханссону, Адаму Сильверу, Скотту О’Хара и Кэти Шервин за их статьи по этой теме. </em> </p> <h2><span class="ez-toc-section" id="HTML-3"> HTML | заполнитель Атрибут </span></h2> <p> Улучшить статью </p> <p> Сохранить статью </p> <ul> <li> Последнее обновление: 22 июля 2022 г. </li> </ul> <p> <li> Прочитать </li> <li> Обсудить </li> </p> <p> Улучшить статью </p> <p> Сохранить статью </p> <p> Атрибут-заполнитель <strong> <textarea> </strong> в HTML используется для указания ожидаемого значения, которое будет отображаться перед вводом данных пользователем в элементе textarea.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> </p> <p> <strong> Синтаксис: </strong> </p><pre> <textarea placeholder="text"> </pre><p> <strong> Значение атрибута: </strong> Этот атрибут содержит единственное значение <strong> text </strong>, которое является начальной строкой, отображаемой перед вводом пользователем. </p> <p> <strong> Пример 1: </strong> В этом примере атрибут заполнителя <textarea> используется для отображения описания заполнителя textarea. </p> <h3><span class="ez-toc-section" id="html"> html </span></h3> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <p data-readability-styled="true"> <code> <!DOCTYPE html> </code> </p> <p data-readability-styled="true"> <code> < </code> <code> html </code> <code> > </code> </p> <p>   </p> <p data-readability-styled="true"> <code> < </code> <code> head </code> <code> > </code> </p> <p data-readability-styled="true"> <code>      </code> <code> < </code> <code> title </code> <code> > </code> </p> <p data-readability-styled="true"> <code>          </code> <code> HTML Textarea placeholder Attribute </code> </p> <p data-readability-styled="true"> <code>      </code> <code> </ </code> <code> title </code> <code> > </code> </p> <p data-readability-styled="true"> <code> </ </code> <code> head </code> <code> > </code> </p> <p>   </p> <p data-readability-styled="true"> <code> < </code> <code> body </code> <code> style = "text-align : Центр "> </code> </p> <p data-readability-styled="true"> <code> </code> </p> <p data-readability-styled="true"> <code> </code> <code> <</code> <code> H2 </code> <code> Стиль =" Цвет: зеленый;0327 GeeksforGeeks </code> </p> <p data-readability-styled="true"> <code>      </code> <code> </ </code> <code> h2 </code> <code> > </code> </p> <p data-readability-styled="true"> <code>          </code>   </p> <p data-readability-styled="true"> <code>      </code> <code> < </code> <code> h3 </code> <code> > </code> </p> <p data-readability-styled="true"> <code>          </code> <code> HTML Textarea placeholder Attribute </code> </p> <p data-readability-styled="true"> <code>      </code> <code> < / </code> <code> h3 </code> <code> > </code> </p> <p data-readability-styled="true"> <code>          </code>   </p> <p data-readability-styled="true"> <code>      </code> <code> Описание: < </code> <code> Textarea </code> <code> Заполнитель </code> </p> <p data-readability-styled="true"> <code> </code> <code> = "Напишите некоторое описание здесь .<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> .."> </ </code> <code> Textarea </code> <code>> </code> </p> <p data-readability-styled="true"> <code>110328 <code>> </code> </p> <p data-readability-styled="true"> <code>110328 <code>> </code> </p> <p data-readability-styled="true"> <code>710328 <code>> </code> </p> <p data-readability-styled="true"> <code>710328 <code>> </code> </p> <p data-readability-styled="true"> <code>710328 <code>> </code> </p> <p data-readability-styled="true"> <code>. </code> <code> HTML </code> <code>> </code> </p> </td> </tr> </tbody> </table> <p> <strong> Выход: </strong> </p> <p> </p> <p> <strong> Пример 2: </strong> Этот пример использует <Textarea> Заполнитель. </p> <h3><span class="ez-toc-section" id="html-2"> html </span></h3> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <p data-readability-styled="true"> <code> <!DOCTYPE html> </code> </p> <p data-readability-styled="true"> <code> < </code> <code> html </code> <code> > </code> </p> <p>   </p> <p data-readability-styled="true"> <code> < </code> <code> head </code> <code> > </code> </p> <p data-readability-styled="true"> <code>      </code> <code> < </code> <code> title </code> <code> >HTML Textarea placeholder Attribute</ </code> <code> title </code> <code> > </code> </p> <p>   </p> <p data-readability-styled="true"> <code>      </code> <code> < </code> <code> стиль </code> <code> > <code>0328 </p> <p data-readability-styled="true"> <code>          </code> <code> textarea::-webkit-input-placeholder { </code> </p> <p data-readability-styled="true"> <code>              </code> <code> color: #0bf; </code> </p> <p data-readability-styled="true"> <code>          </code> <code> } </code> </p> <p data-readability-styled="true"> <code>          </code>   </p> <p data-readability-styled="true"> <code>          </code> <code> /* Firefox 18- */ </code> </p> <p data-readability-styled="true"> <code>          </code> <code> textarea:-moz-placeholder { </code> </p> <p data-readability-styled="true"> <code>              </code> <code> color: #0bf; </code> </p> <p data-readability-styled="true"> <code>          </code> <code> } </code> </p> <p data-readability-styled="true"> <code>          </code>   </p> <p data-readability-styled="true"> <code>          </code> <code> /* Firefox 19+ */ </code> </p> <p data-readability-styled="true"> <code>          </code> <code> textarea::-moz-placeholder { </code> </p> <p data-readability-styled="true"> <code>              </code> <code> color: #0bf; </code> </p> <p data-readability-styled="true"> <code>          </code> <code> } </code> </p> <p data-readability-styled="true"> <code>      </code>   </p> <p data-readability-styled="true"> <code>          </code> <code> textarea:-ms-input-placeholder { </code> </p> <p data-readability-styled="true"> <code>              </code> <code> color: #0bf; </code> </p> <p data-readability-styled="true"> <code> </code> <code>} </code> </p> <p data-readability-styled="true"> <code> </code> </p> <p data-readability-styled="true"> <code> </code> <code> Textarea :: Placeholder {</code> </p> <p data-readability-styled="true"> <code> </code> <code> Цвет: зеленый; </code> </p> <p data-readability-styled="true"> <code>          </code> <code> } </code> </p> <p data-readability-styled="true"> <code>      </code> <code> </ </code> <code> style </code> <code> > </code> </p> <p data-readability-styled="true"> <code> </ </code> <code> head </code> <code> > </code> </p> <p>   </p> <p data-readability-styled="true"> <code> < </code> <code> body </code> <code> style = "text- выровнять: по центру">     </code> </p> <p data-readability-styled="true"> <code>      </code> <code> < </code> <code> h2 </code> <code> style = "color: green;"> </code> </p> <p data-readability-styled="true"> <code>          </code> <code> GeeksforGeeks </code> </p> <p data-readability-styled="true"> <code>      </code> <code> </ </code> <code> h2 </code> <code> > </code> </p> <p data-readability-styled="true"> <code>          </code>   </p> <p data-readability-styled="true"> <code> </code> <code> < </code> <code> h3 </code> <code> > </code> </p> <p data-readability-styled="true"> <code>          </code> <code> HTML Textarea placeholder Атрибут </code> </p> 7 <p data-readability-styled="true"> <code>      </h2>28 <code> h3 </code> <code> > </code> </p> <p data-readability-styled="true"> <code>      </code>   </p> <p data-readability-styled="true"> <code>      </code> <code> < </code> <code> textarea </code> <code> placeholder="GeeksforGeeks is the computer" </code> </p> <p data-readability-styled="true"> <code>          </code> <code> + " science portal for geeks.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> "></ </code> <code> textarea </code> <code>> </code> </p> <p data-readability-styled="true"> <code> </code> </p> <p data-readability-styled="true"> <code> </ </code> <code> Body </code> <code>> </code> </p> </p> <p data-readability-styled="true"> <code> </ </code> <code>728 <p data-readability-styled="true"> <p data-readability-styled="true"> <code>.0327> </code> </p> </td> </tr> </tbody> </table> <p> <strong> Выход: </strong> </p> <p> </p> <p> <strong> Поддерживаемые браузеры: </strong>. Брейузер, поддерживаемый <Textarea> Attribute Attribute wreachhleder. </li> <li> Firefox 4 </li> <li> Opera 12.1 </li> <li> Internet Explorer 10 </li> </ul> <br/> <p> Статьи по теме </p> <h2><span class="ez-toc-section" id="CSS_placeholder-show_SamanthaMingcom"> CSS :placeholder-show | SamanthaMing.com </span></h2> <p data-v-534039da=""> Используйте этот псевдокласс для стилизации ввода, который в настоящее время отображает текст-заполнитель — другими словами, пользователь ничего не ввел в текстовое поле 📭 </p> <p data-v-534039da=""> Замечательно применять некоторые динамические стили в зависимости от того, является ли ваш ввод пустым или не 👏 </p> <blockquote data-v-534039da=""/> <ul data-v-534039da=""> <li data-v-534039da=""> Как это работает? <ul data-v-534039da=""> <li data-v-534039da=""> : показанный заполнитель должен иметь заполнитель </li> </ul> </li> <li data-v-534039da=""> : показанный заполнитель против :: заполнитель </li> <li data-v-534039da=""> : показанный заполнитель против : пустой <ul data-v-534039da=""> <li data-v-534039da=""> Как проверить пустоту ввода без заполнителя? </li> </ul> </li> <li data-v-534039da=""> в сочетании с другими селекторами <ul data-v-534039da=""> <li data-v-534039da=""> Обратный: заполнителя с: не </li> <li data-v-534039da=""> Плавающая метка </li> </ul> </li> <li data-v-534039da=""> Поддержка браузера </li> <li data-v-534039da=""> Вход сообщества </li> <li data-v-534039da=""> Ресурсы </li> </li>079 2 <li data-v-534039da="">.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> </h3> <p data-v-534039da=""> <code data-v-534039da=""> :placeholder-show </code> — это псевдокласс CSS, позволяющий применять стили к <code data-v-534039da=""> <input> </code> или <code data-v-534039da=""> <textarea> </code> с замещающим текстом. </p> <blockquote data-v-534039da=""/> <p> Результат: </p> <ul data-v-534039da=""> <li data-v-534039da=""> Розовый, если заполнитель отображается, пользователь ничего не вводил </li> <li data-v-534039da=""> Черный, если заполнитель НЕ отображается, пользователь что-то ввел </li> </ul> <h4 data-v-534039da=""> </h4><code data-v-534039da=""> :placeholder-showed </code> должен иметь заполнитель иметь замещающий текст. </p> <blockquote data-v-534039da=""> <br data-v-534039da=""/> <small data-v-534039da=""> Текст заполнителя не отображается </small> </blockquote> <h3 data-v-534039da=""> </h3><code data-v-534039da=""> :placeholder-show </code> vs <code data-v-534039da=""> ::placeholder </code> </h3> <p data-v-534039da=""> Таким образом, мы можем использовать <code data-v-534039da=""> :placeholder-show </code> для стилизации элемента ввода.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> </p> <blockquote data-v-534039da=""/> <p data-v-534039da=""> ☝️Хммм... заметьте что-то странное 🤔 -- Мы поставили <code data-v-534039da=""> цвет: зеленый </code>, но это не сработало. Ну, это потому, что <code data-v-534039da=""> :placeholder-show </code> будет нацелен только на сам ввод. Но для фактического текста-заполнителя вы должны использовать псевдоэлемент <code data-v-534039da=""> ::placeholder </code> . </p> <blockquote data-v-534039da=""/> <p data-v-534039da=""> ⚠️ НО! Когда я играл с этим, я заметил, что есть некоторые другие свойства, которые, если их применить на уровне <code data-v-534039da=""> :placeholder-show </code>, повлияют на текст заполнителя. </p> <blockquote data-v-534039da=""/> <p data-v-534039da=""> Теперь я действительно не знаю, почему это так 🤷‍♀️ Может быть, потому что эти свойства наследуются заполнителем. В любом случае, если вы знаете настоящую причину, отправьте запрос на вытягивание в разделе «Вклад сообщества». если элемент отображает заполнитель или нет.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> По сути, мы можем использовать его, чтобы проверить, является ли ввод пустым или нет (конечно, предполагая, что все ваши вводы имеют заполнитель). Итак, может быть, ваш следующий вопрос: нельзя ли использовать пустой CSS? Что ж, проверим 👩‍🔬 </p> <blockquote data-v-534039da=""> <br data-v-534039da=""/> <small data-v-534039da=""> <i data-v-534039da="">. потому что мы видим розовую границу. Но на самом деле это не работает 😔 </p> <p data-v-534039da=""> Причина, по которой отображается розовый, потому что <strong data-v-534039da=""> псевдокласс </strong> увеличивает специфичность. Подобно тому, как селекторы классов (например, <code data-v-534039da=""> .form-input </code> ) имеет более высокую специфичность, чем селектор типа (т.е. <code data-v-534039da=""> ввод </code> ). Селекторы с более высокой специфичностью всегда переопределяют стили селекторов с более низкой специфичностью. </p> <p data-v-534039da=""> Вот и приговор! Не используйте <code data-v-534039da=""> :empty </code>, чтобы проверить, пуст ли элемент ввода или нет 🙅‍♀️ </p> <h4 data-v-534039da=""><span class="ez-toc-section" id="i-75"> Как проверить пустоту ввода без заполнителя? </span></h4> <p data-v-534039da=""> Итак, наш единственный способ проверить, является ли ввод пустым или нет, — это использовать <code data-v-534039da=""> :placeholder-show </code> .<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Но что произойдет, если у нашего элемента ввода нет заполнителя. Ну вот хитрый способ! Передать пустую строку, <code data-v-534039da=""> " " </code> . </p> <blockquote data-v-534039da=""> <br data-v-534039da=""/> <small data-v-534039da=""> Текст-заполнитель не отображается </small> </blockquote> <p data-v-534039da=""> <i data-v-534039da=""> Спасибо @jeltehomminga за то, что поделились этим советом! </i> </p> <h3 data-v-534039da=""><span class="ez-toc-section" id="i-76"> В сочетании с другими селекторами </span></h3> <p data-v-534039da=""> Так что здорово, что мы можем ориентироваться на элементы ввода, которые отображают текст-заполнитель. Другими словами, если отображается текст заполнителя, это должно означать, что элемент пуст. Используя эти знания, мы можем комбинировать этот псевдокласс с другими селекторами и делать действительно крутые вещи! Давайте посмотрим 🤩 </p> <h4 data-v-534039da=""><span class="ez-toc-section" id="i-77"> Инверсия </span></h4><code data-v-534039da=""> :placeholder-show </code> с <code data-v-534039da=""> :not </code> </h4> <p data-v-534039da=""> Мы можем сделать что-то обратное, используя псевдокласс <code data-v-534039da=""> :not </code>.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Здесь мы можем настроить таргетинг, когда ввод НЕ пуст. </p> <blockquote data-v-534039da=""/> <p> Результат: </p> <ul data-v-534039da=""> <li data-v-534039da=""> Зеленый, если НЕ пусто, пользователь что-то набрал </li> <li data-v-534039da=""> Черный, если пусто </li> </ul> <h4 data-v-534039da=""><span class="ez-toc-section" id="i-78"> Плавающая метка </span></h4> <p data-v-534039da=""> Одной из проблем использования заполнителя и отсутствия метки является доступность. Потому что, как только вы набираете текст-заполнитель, он исчезает. Это может привести к путанице для пользователя. Действительно хорошее решение — плавающая метка. Первоначально текст заполнителя отображается без метки. И как только пользователь начнет печатать, появится метка. Таким образом, вы все еще можете поддерживать чистоту своей формы, не ставя под угрозу пользовательский интерфейс или доступность. Двойной выигрыш 🥳 </p> <p data-v-534039da=""> И это возможно с помощью чистого CSS. Нам просто нужно объединить <code data-v-534039da="">-заполнитель-показанный </code> с <code data-v-534039da=""> :not </code> и <code data-v-534039da=""> + </code> .<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Вот очень упрощенная версия плавающей метки. </p> <blockquote data-v-534039da=""> ИМЯ </blockquote> <p data-v-534039da=""> И если вы начнете печатать, вы получите следующий результат: </p> <blockquote data-v-534039da=""> ИМЯ </blockquote> <h3 data-v-534039da=""><span class="ez-toc-section" id="i-79"> Поддержка браузера </span></h3> <p data-v-534039da=""> Поддержка <code data-v-534039da=""> :placeholder-show </code> превосходна! Это включает в себя Internet Explorer (да, я так же удивлен, как и вы 😆). Но (конечно есть "но"), для IE нужно будет использовать нестандартное имя <code data-v-534039da=""> :-ms-input-placeholder </code> . </p> <table data-v-534039da=""> <thead data-v-534039da=""> <tr data-v-534039da=""> <th data-v-534039da=""> Browser </th> <th data-v-534039da=""> placeholder-shown </th> </tr> </thead> <tbody data-v-534039da=""> <tr data-v-534039da=""> <td data-v-534039da=""> Chrome </td> <td data-v-534039da=""> ✅ </td> </tr> <tr data-v-534039da=""> <td data-v-534039da=""> Firefox </td> <td data-v-534039da=""> ✅ </td> </tr> <tr data-v-534039da=""> <td data-v-534039da=""> Safari </td> <td data-v-534039da=""> ✅ </td> </tr> <tr data-v-534039da=""> <td data-v-534039da=""> Edge </td> <td data-v-534039da=""> ✅ </td> </tr> <tr data-v-534039da=""> <td data-v-534039da=""> Internet Проводник </td> <td data-v-534039da=""> ✅ ( <code data-v-534039da=""> :-ms-input-placeholder </code> ) </td> </tr> </tbody> </table> <ul data-v-534039da=""> <li data-v-534039da=""> Поддержка браузера: показан заполнитель </li> </ul> <ul data-v-534039da=""> <li data-v-534039da=""> <p data-v-534039da=""> <em data-v-534039da=""> @cilly_boloe: </em> Это очень хорошо работает с соседними метками, которые вы можете перемещать или выделять с помощью «input: placeholder-show + label» вместо того, чтобы добавлять собственный класс с JS для событий фокуса, как я делал 🙃 </p> </li> <li data-v-534039da=""> <p data-v-534039da=""> <em data-v-534039da=""> @xirclebox: </em> Вы можете сделать еще один шаг, добавив к входным данным явную или неявную метку.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Таким образом, пользователи всегда будут знать, для чего предназначено поле. Это отлично подходит для UX и доступности. </p> </li> <li data-v-534039da=""> <p data-v-534039da=""> <em data-v-534039da=""> @robertgroves: </em> Я быстро создал CodePen, чтобы показать, как его можно использовать для включения визуального элемента, указывающего, что ввод данных от пользователя все еще необходим. </p> </li> <li data-v-534039da=""> <p data-v-534039da=""> <em data-v-534039da=""> @jibijohndavid: </em> CSS Only Floating Label: CodePen </p> </li> <li data-v-534039da=""> <p data-v-534039da=""> <em data-v-534039da=""> @codedgar_dev: </em> I use that along :valid and :invalid to validate natively inputs in my framework Puppertino </p> </li> <li data-v-534039da=""> <p data-v-534039da=""> <em data-v-534039da=""> @nachocoloma: </em> Вы можете сделать его обязательным и использовать :invalid, но это будет вызвано любой неудачной проверкой, а не только отсутствующим значением (и, возможно, дело не в пустом обязательном поле).<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Вместо этого лучше использовать пустой заполнитель. </p> </li> </ul> <h3 data-v-534039da=""><span class="ez-toc-section" id="i-80"> Ресурсы </span></h3> <ul data-v-534039da=""> <li data-v-534039da=""> Веб-документы MDN: :placeholder-show </li> <li data-v-534039da=""> Веб-документы MDN: ::placeholder </li> <li data-v-534039da=""> Веб-документы MDN: Специфика </li> <li data-v-534039da=""> Переполнение стека CSS: input:not(:placeholderricks18-show) : :placeholder-show </li> <li data-v-534039da=""> Хитрости CSS: Плавающие метки только в CSS с псевдоклассом :placeholder-show </li> <li data-v-534039da=""> DavidWalsh: placeholder-show </li> <li data-v-534039da=""> caniuse: placeholder-show </li> </ul> <h2><span class="ez-toc-section" id="_-_CSS"> Стилизация текста-заполнителя с помощью CSS </span></h2> <p> Используйте псевдоэлемент <code> ::placeholder </code> для оформления текста-заполнителя в элементе формы <code> <input> </code> или <code> <textarea> </code>. Большинство современных браузеров поддерживают это, но для более старых браузеров потребуются префиксы поставщиков. </p> <p> HTML </p> <ul> <li> Префиксы поставщиков <ul> <li> Псевдоэлементы и псевдоклассы </li> <li> Firefox Placeholder Непрозрачность по умолчанию </li> <li> CSS-обработка недопустимых селекторов </li> </ul> </li> <li> Поддерживаемые стили <li>0182 <li> Вопросы доступности </li> <li> Автоматическое добавление префиксов поставщиков </li> <li> Вклад сообщества </li> <li> Ресурсы </li> </ul> <h3><span class="ez-toc-section" id="i-81"> Префиксы поставщиков </span></h3> <p> Таким образом, синтаксис, который я использовал, поддерживается большинством современных браузеров: </p> <p> использовать префиксы поставщиков.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> </p> <p> Ого! Я знаю, это огромный список. И вы можете заметить довольно много различных вариантов реализации. Итак, давайте разберем эти различия и поймем, что здесь происходит. </p> <h4><span class="ez-toc-section" id="i-82"> Псевдоэлемент против псевдокласса </span></h4> <p> Вы могли заметить, что я использую двойное двоеточие <code> :: </code> . Это называется псевдоэлементом, и он был введен в CSS3. Если бы мы использовали одно двоеточие <code> : </code> , это было бы псевдоклассом. </p> <p> Поскольку псевдоэлемент <code> :: </code> был представлен в CSS3, а не в более ранних версиях CSS, некоторые старые браузеры, такие как Internet Explorer, просто никогда не поддерживали его. В то время как псевдокласс <code> : </code> был введен ранее (в CSS1 и CSS2). Вот почему его поддерживает гораздо больше браузеров, включая Internet Explorer. </p> <p> Таким образом, в нашем префиксе поставщика <code> ::placeholder </code> вы будете использовать смесь псевдокласса и псевдоэлемента. </p> <h4><span class="ez-toc-section" id="Firefox_Placeholder"> Firefox Placeholder Непрозрачность по умолчанию </span></h4> <p> Хорошо, что там с непрозрачностью <code>: 1 </code> для Firefox.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Это потому, что по умолчанию к заполнителям Firefox применяется значение непрозрачности. Итак, чтобы переопределить это, нам нужно установить его. Таким образом, наш текст-заполнитель будет отображаться и не будет выглядеть блеклым, как в настройках Firefox по умолчанию. </p> <h4><span class="ez-toc-section" id="CSS-4"> CSS-обработка недопустимых селекторов </span></h4> <p> Итак, вы также можете подумать, почему мы просто не сгруппировали все префиксы поставщиков вместе следующим образом: </p> <p> Ну, это потому, что в CSS3 было правило, которое гласит: </p> <blockquote> <p> группа селекторов, содержащих недопустимый селектор, является недопустимым. </p> </blockquote> <p> Давайте рассмотрим пример, чтобы понять, что это значит. Вот допустимый селектор CSS </p> <p> Таким образом, в нашем HTML это будет выглядеть так, как ожидалось </p> <p> Но что произойдет, если мы добавим недействительный селектор CSS </p> <p> Так как в группе есть недопустимый селектор CSS. Вся группа будет считаться недействительной, и стиль не будет применяться.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> </p> <p> Поэтому нужны отдельные правила для каждого браузера. В противном случае вся группа будет игнорироваться всеми браузерами. </p> <p> ⭐️ <strong> НО! </strong> похоже, это можно изменить в CSS4. </p> <blockquote> <p> Как правило, если в цепочке или группе селекторов есть недопустимый псевдоэлемент или псевдокласс, весь список селекторов недействителен. Если псевдоэлемент (но не псевдокласс) имеет префикс -webkit-, начиная с Firefox 63, браузеры Blink, Webkit и Gecko предполагают, что он действителен, не делая недействительным список селекторов. </p> </blockquote> <p> Подробнее об этом читайте в статье Криса Койера «Один неверный псевдоселектор равен целому игнорируемому селектору» <code> фон </code> свойства </li> <li> <code> цвет </code> </li> <li> <code> шрифт </code> свойства </li> <li> <code> интервал между буквами </code> </li> <li> <code> высота строки <p> 1 10188 <ul>328 </li> <li> <code> text-decoration </code> </li> <li> <code> text-indent </code> </li> <li> <code> text-transform </code> </li> <li> <code> vertical-align </code> </li> <li> <code> word-spacing </code> </li> </ul> <h3><span class="ez-toc-section" id="Accessibility_Concerns"> Accessibility Concerns </span></h3> <p> Being able to style placeholders is awesome .<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Но мне нужно указать на кое-что действительно важное: текст-заполнитель не заменяет элемент метки, <code> <label> </code> !! Я грешил этим, когда впервые попал в веб-программирование 🙁. Когда ваша форма опирается исключительно на инструкции-заполнители без меток, это очень вредно для доступности. Доступность важна не только для того, чтобы сделать ваш веб-сайт доступным для всех, но и для улучшения взаимодействия с пользователем. И, в конечном итоге, создание лучшего веб-сайта или веб-приложения 💪 </p> <p> Вот действительно потрясающая статья о проблемах использования только заполнителей без каких-либо меток. Ниже приведены 3 верхних пункта: </p> <ol> <li> Поскольку текст-заполнитель исчезает в природе, он может напрягать кратковременную память вашего пользователя </li> <li> Без меток пользователи не могут проверить свою работу перед отправкой формы. </li> <li> Когда появляются сообщения об ошибках, люди не знают, как решить проблему. </li> </ol> <h3><span class="ez-toc-section" id="i-83"> Автоматическое добавление префиксов поставщиков </span></h3> <p> Если вы не хотите иметь дело со всеми префиксами поставщиков, вы можете использовать PostCSS с плагином Autoprefixer.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Этот плагин будет анализировать ваш CSS и добавлять префиксы поставщиков. </p> <ul> <li> <em> @edufurlongo: </em> Also, use <code> opacity:1 </code> because most browser apply an alpha (usually 0.5) to the placeholder </li> </ul> <h3><span class="ez-toc-section" id="Resources"> Resources </span></h3> <ul> <li> MDN Web Docs: placeholder </li> <li> w3schools: placeholder </li> <li> CSS- Хитрости: заполнитель </li> <li> CSS-трюки: один недействительный псевдоселектор равен целому игнорируемому селектору </li> <li> Переполнение стека: изменение цвета заполнителя ввода HTML5 с помощью CSS </li> <li> Заполнители в полях формы вредны </li> </ul> <h2><span class="ez-toc-section" id="_-_-_HTML_CSS_-_SitePoint"> Переопределение цвета текста-заполнителя не работает - HTML и CSS - Форумы SitePoint </span></h2> <p data-readability-styled="true"> toad78 <time itemprop="datePublished" datetime="2018-06-27T20:17:32Z"> 27 июня 2018 г., 20:17 </time> </p> <p data-readability-styled="true"> 1 </p> <p> Глядя на эту страницу, я применил следующий код, который, кажется, не переопределяет цвет текста заполнителя: </p><pre> .<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> wpcf7 input[type="text"]::placeholder, .wpcf7 input[type="text"]::-webkit-input-placeholder, .wpcf7 input[type="text"]:-webkit-input-placeholder, .wpcf7 input[type="text"]:-moz-placeholder, .wpcf7 input[type="text"]::-moz-placeholder, .wpcf7 input[type="text"]:-ms-input-placeholder, .wpcf7 input[type="email"]::заполнитель, .wpcf7 input[type="email"]::-webkit-input-placeholder, .wpcf7 input[type="email"]:-webkit-input-placeholder, .wpcf7 input[type="email"]:-moz-placeholder, .wpcf7 input[type="email"]::-moz-placeholder, .wpcf7 input[type="email"]:-ms-input-placeholder, .wpcf7 textarea::заполнитель, .wpcf7 textarea::-webkit-input-placeholder, .wpcf7 textarea:-webkit-input-placeholder, .wpcf7 textarea:-moz-placeholder, .wpcf7 textarea::-moz-placeholder, .wpcf7 textarea:-ms-input-placeholder {цвет: #333!важно; непрозрачность: 1!важно; } </pre><p data-readability-styled="true"> головка <time itemprop="datePublished" datetime="2018-06-27T22:09:29Z"> 27 июня 2018 г., 22:09 </time> </p> <p data-readability-styled="true"> 2 </p> <p> Привет, toad78, </p> <p> вместо того, чтобы беспокоиться о <em> arty farty </em> цвете <em> «атрибута-заполнителя» </em> , <br/>, вы должны вместо этого сосредоточить свое внимание на соображениях доступности.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> </p> <p> Можем ли мы отказаться от использования заполнителей ввода вместо меток? </p> <p> <em> головка </em> </p> <p> 7 лайков </p> <p data-readability-styled="true"> ПолОБ <time itemprop="datePublished" datetime="2018-06-28T07:10:04Z"> 28 июня 2018 г., 7:10 </time> </p> <p data-readability-styled="true"> 3 </p> <p> Не разделяйте префиксы запятыми, потому что, когда браузер встречает правило, которое он не понимает, он должен остановиться и перейти к следующему блоку правил, полностью игнорируя текущее правило. Он не переходит к следующему элементу, разделенному запятой. </p> <p> Если вы разделите их, это будет работать, как показано ниже. </p> <p> 1264×584 148 КБ </p> <p> Как сказал @coothead, сейчас все согласны с тем, чтобы полностью избегать заполнителя. </p> CSS-трюки — 22 июня 18 <h4><span class="ez-toc-section" id="_Placeholder_CSS-2"> Не используйте атрибут Placeholder | CSS-трюки </span></h4> <p> Эрик Бейли занимает жесткую позицию в отношении . </p> <p> Вот вопрос с вашей формой.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Я заполнил все данные <strong> и собираюсь просмотреть </strong> перед отправкой. </p> <p> </p> <p> Вы видите, что с ним не так? </p> <p> Мне кажется, все в порядке. </p> <p> 5 лайков </p> <p data-readability-styled="true"> жаба78 <time itemprop="datePublished" datetime="2018-06-28T15:21:44Z"> 28 июня 2018 г., 15:21 </time> </p> <p data-readability-styled="true"> 4 </p> <p> "Не используйте атрибут Placeholder" совсем недавно вышел, и это хорошо, что вы упомянули об этом. К сожалению, я не призывал использовать заполнители. Я предпочитаю метки и знаю, что есть способ использовать метки в качестве «заполнителей». Однако клиент хотел быстрого результата. </p> <p> Спасибо, господа! </p> <p data-readability-styled="true"> Миттино <time itemprop="datePublished" datetime="2018-06-28T18:27:39Z"> 28 июня 2018 г., 18:27 </time> </p> <p data-readability-styled="true"> 5 </p> <p> Я думаю, что заполнители могут быть полезны.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Я бы не стал использовать их для замены метки, но я думаю, что они могут помочь, когда для ввода текста требуется определенный формат. </p> <p> Например, вместо метки типа: </p> <p> Дата (введите 4 цифры года, косая черта, 2 цифры месяца, косая черта, 2 цифры дня) […] </p> <p> Дата [например. 2018/06/28] </p> <p> Я не думаю, что на них следует полагаться как на гарантию, но они могут помочь уменьшить беспорядок в пользовательском интерфейсе и помочь пользователям избежать неудачных отправок. </p> <p> 4 лайка </p> <p data-readability-styled="true"> PaulOB <time itemprop="datePublished" datetime="2018-06-28T21:10:26Z"> 28 июня 2018 г., 21:10 </time> </p> <p data-readability-styled="true"> 6 </p> <p data-readability-styled="true"> Миттиниг: </p> <blockquote> <p>, но я думаю, что они могут помочь, когда для ввода текста требуется определенный формат. </p> </blockquote> <p> На мой взгляд, именно в это время не следует использовать заполнители.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> :). </p> <p> Если для ввода требуется определенный формат, то я хочу, чтобы он присутствовал, пока я печатаю, потому что, как только вы начнете печатать и заполнитель исчезнет, ​​я не буду помнить, были ли это тире или косые черты в качестве разделителей или год был 4 цифры или две . Мне нужно было бы удалить текущий ввод и дважды проверить, что нужно, а затем ввести снова. На самом деле я делал это несколько раз по-настоящему, и это настоящая неприятность. </p> <p> Не желая превращать ветку в дискуссию о заполнителе, единственное полезное назначение, которое я могу придумать для заполнителя, — это сказать что-то вроде «введите здесь» (при условии, что у вас есть надлежащая метка). </p> <p> Я всегда думал, что поле подсказки, которое исчезает при наборе текста, никому не нужно <strong> особенно если автозаполнение заполнило все поля за вас </strong> но не правильной информацией. </p> <p> Если форме нужна подсказка, то ей нужна подсказка, которая всегда видна, а для заполнителя это не так.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> При просмотре формы я хочу убедиться, что все поля верны перед публикацией, и я не могу этого сделать, если использовались заполнители, которые показывают требуемый формат. </p> <p> В статье, на которую я ссылался выше, объясняются все эти сценарии, и, принимая во внимание все, что может пойти не так, я должен согласиться с автором. Раньше я думал, что заполнители — это нормально, если у вас есть метка, но теперь я предпочитаю их не использовать. Я вижу небольшой случай, когда они добавляют дополнительную информацию сверх того, что было необходимо для выполнения задачи, но в случаях определенного формата и типа данных, которые требуются, я думаю, что это должно быть в html (не обязательно в метке как таковые, потому что метки должны быть более краткими). </p> <p> 3 лайков </p> <p data-readability-styled="true"> Миттиниг <time itemprop="datePublished" datetime="2018-06-28T21:17:27Z"> 28 июня 2018 г., 21:17 </time> </p> <p data-readability-styled="true"> 7 </p> <p> Верно.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Я предполагаю, что другим способом было бы избегать ввода текста, когда требуется определенный формат. например. отдельный выбор для года, месяца, дня. </p> <p> т.е. если вы не хотите, чтобы пользователи вводили «23 января 2013», «3-10-14» или другие возможные варианты, не давайте им такую ​​возможность. </p> <p> 3 нравится </p> <p data-readability-styled="true"> ПолОБ <time itemprop="datePublished" datetime="2018-06-28T21:30:14Z"> 28 июня 2018 г., 21:30 </time> </p> <p data-readability-styled="true"> 8 </p> <p data-readability-styled="true"> Миттиниг: </p> <blockquote> <p> не давайте им возможности сделать это. </p> </blockquote> <p> Да, я думаю, мы можем облегчить жизнь, если защитим от идиотов некоторые вводимые данные. </p> <p> Я полагаю, что есть тонкая грань между тем, чтобы переборщить и сделать это слишком многословным, поскольку некоторых пользователей может раздражать прыжки через слишком много обручей.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Это немного загадка, и пока я не думаю, что есть идеальный ответ, кроме как попытаться сделать его простым. </p> <p> 4 лайков </p> <p data-readability-styled="true"> жаба78 <time itemprop="datePublished" datetime="2018-07-03T17:46:52Z"> 3 июля 2018 г., 17:46 </time> </p> <p data-readability-styled="true"> 9 </p> <p> Проверьте плавающие метки. </p> <p data-readability-styled="true"> головка <time itemprop="datePublished" datetime="2018-07-03T19:18:34Z"> 3 июля 2018 г., 19:18 </time> </p> <p data-readability-styled="true"> 10 </p> <p data-readability-styled="true"> жаба78: </p> <blockquote> <p> Проверить плавающие метки </p> </blockquote> <p> <em> «Плавающие метки» </em> действительно плохая идея. </p> <p> <strong> Формы не являются источником развлечения. </strong> </p> <p> Плавающая метка не позволит пользователям получать удовольствие от использования форм.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> </div> </div> </div> </article> <nav class="navigation post-navigation" aria-label="Записи"> <h2 class="screen-reader-text">Навигация по записям</h2> <div class="nav-links"><div class="nav-previous"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/czena-ne-ustroila-chto-delat-esli-net-czennika-raznicza-na-czennike-i-na-kasse-kto-prav-kak-vernut-tovar-kak-obmenyat-tovar-maj-iyun-2022-goda-23-maya-2022.html" rel="prev">Цена не устроила: Что делать, если нет ценника, разница на ценнике и на кассе, кто прав, как вернуть товар, как обменять товар май-июнь 2022 года — 23 мая 2022</a></div><div class="nav-next"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/sistema-kss-kss-sistema-kadry-pervaya-spravochnaya-sistema-dlya-kadrovikov.html" rel="next">Система ксс: КСС «Система Кадры» — Первая Справочная Система для Кадровиков</a></div></div> </nav><div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/textarea-placeholder-ne-rabotaet-placeholder-ne-otobrazhaetsya-v-input.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--90abhccf7b.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required>

Имя *

Email *

Сайт