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 -->
vue -->Передача состояния контекста вспомогательным технологиям и дальтоникам
Использование этих контекстных состояний для обозначения состояния элемента управления формы обеспечивает только визуальную цветовую индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана, или пользователям с дальтонизмом.
Убедитесь, что также имеется альтернативная индикация состояния. Например, вы можете включить подсказку о состоянии в самом тексте <label> элемента управления формой или предоставив дополнительный текстовый блок справки.
Атрибут
aria-invalidКогда <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 -->
toLowerCase()
}
}
}
</script>
<!-- b-form-textarea-formatter.vue -->Примечание: При неленивом форматировании, если курсор не находится в конце входного значения, он может переместиться в конец после ввода символа. Вы можете использовать предоставленный объект события и event.target для доступа к собственным методам выбора и свойствам ввода, чтобы контролировать, где находится точка вставки. Это оставлено читателю в качестве упражнения.
Обычный текст только для чтения
Если вы хотите, чтобы элементы <b-form-textarea readonly> в вашей форме были стилизованы как простой текст, установите свойство 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 -->
\nОн доступен только для чтения и не похож на ввод."
}
}
}
</script>
<!-- b-form-textarea-plaintext.vue -->Модификаторы
v-modelVue официально не поддерживает модификаторы .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 -->
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(...)).
Свойства ввода
| Свойство | Примечания |
|---|---|
. | Чтение/Запись |
.selectionEnd | Чтение/Запись |
.selectionDirection | Чтение/Запись |
.validity | Только чтение |
.validationMessage | Только чтение |
.willValidate | Только чтение |
selectionStartМетоды ввода
| Метод | Примечания |
|---|---|
.focus() | Фокус на вводе |
.blur() | Убрать фокус с ввода |
.select() | Выбирает весь текст в поле ввода |
.setSelectionRange() | |
.setRangeText() | |
. | |
.checkValidity() | |
.reportValidity() |
setCustomValidity()Обратитесь к https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement для получения дополнительной информации об этих методах и свойствах. Поддержка будет зависеть от типа ввода.
Справочник по компонентам
<b-form-textarea>Смотреть источник
<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` на элементе управления |
debouncev2.1.0+ | Number или String | 0 | Если установлено количество миллисекунд больше нуля, пользовательский ввод будет подавлен. Не действует, если задано свойство ‘lazy’ |
disabled | Boolean | false | Если установлено значение `true`, отключает функциональность компонента и переводит его в отключенное состояние. |
form | String | Идентификатор формы, к которой принадлежит элемент управления формой. Устанавливает атрибут `form` в элементе управления | |
formatter | Function | Ссылка на функцию форматирования текстового поля | |
id | String | Используется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости. | |
lazyv2.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 |
valuev-model | Number или String | '' | Текущее значение textarea. Результат всегда будет строкой, за исключением случаев, когда используется свойство ‘number’ |
wrap | String | 'soft' | Значение, которое нужно разместить в атрибуте ‘wrap’ текстового поля. Управляет возвратом разрыва строки |
v-modelСвойство | Событие |
|---|---|
value | update |
События
Событие | Аргументы | Описание |
|---|---|---|
blur |
| Генерируется после того, как текстовое поле теряет фокус |
change |
| Событие ввода, вызванное взаимодействием с пользователем. Генерируется после любого форматирования (не включая свойства ‘trim’ или ‘number’) и после обновления v-model |
input |
| Событие изменения, вызванное взаимодействием с пользователем. Генерируется после любого форматирования (не включая свойства ‘trim’ или ‘number’) и после обновления v-model |
update |
| Выпущено для обновления v-model |
Импорт отдельных компонентов
Вы можете импортировать отдельные компоненты в свой проект с помощью следующих именованных экспортов:
Компонент | Именованный экспорт | Путь импорта |
|---|---|---|
<b-form-textarea> | BFormTextarea | bootstrap-vue |
Пример:
import { BFormTextarea } from 'bootstrap-vue'
Vue. component('b-form-textarea', BFormTextarea)
component('b-form-textarea', BFormTextarea)Импортировать как плагин Vue.js
Этот плагин включает в себя все перечисленные выше отдельные компоненты. Плагины также включают псевдонимы любых компонентов.
Именованный экспорт | Путь импорта |
|---|---|
FormTextareaPlugin | bootstrap-vue |
Пример:
import { FormTextareaPlugin } from 'bootstrap-vue'
Vue.use(FormTextareaPlugin)Псевдокласс :placeholder-shown | CSS | WebReference
- Содержание
- Синтаксис
- Пример
- Спецификация
- Браузеры
Определяет стиль элемента <input> или <textarea>, который в данный момент отображает текст подсказки, заданной атрибутом placeholder.
Такая подсказка обычно исчезает при наборе текста.
Синтаксис
input:placeholder { ... }
textarea:placeholder-shown { ... }
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>:placeholder-shown</title> <style> input { border: 1px solid green; /* Зелёная рамка */ } input:placeholder-shown { border-color: red; /* Красная рамка */ } </style> </head> <body> <form action=»/example/handler.php»> <input type=»text» name=»login» placeholder=»Логин»> <input type=»password» name=»pass» placeholder=»Пароль»> </form> </body> </html>В данном примере пустое поле отображается с красной рамкой, при вводе текста рамка меняет цвет на зелёный.
Спецификация
| Спецификация | Статус |
|---|---|
| Selectors Level 4 | Рабочий проект |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| 47 | 34 | 9 | 51 |
| 60 | 9.2 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Псевдоклассы
См. также
- Атрибут placeholder
- Подсказка в поле формы
- Подсказывающий текст
- Псевдоэлемент ::placeholder
Практика
- Подсказка
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 31.05.2018
Редакторы: Влад Мержевич
Стилизуем placeholder при помощи CSS. Синтаксис, трюки, поддерживаемые стили в html5
Атрибут placeholder применяется для призыва к действию внутри пустых элементов input и textarea. В этой статье мы рассмотрим возможности стилизации текста placeholder-a, а также некоторые трюки, которые позволят сделать его более удобным и функциональным.
Итак, начнем с примера для тех, кто не знает, что такое placeholder.
html
<input type="text" placeholder="Оставьте сообщение здесь">
input placeholder demo
Стиль placeholder-a можно изменить с помощью такого набора css правил:
css
::-webkit-input-placeholder {color:#c0392b;}
::-moz-placeholder {color:#c0392b;}/* Firefox 19+ */
:-moz-placeholder {color:#c0392b;}/* Firefox 18- */
:-ms-input-placeholder {color:#c0392b;}
Выглядит страшновато, не правда ли? Дело в том, что этого до сих пор нет в стандартах.
Каждый браузер по-своему реализовал поддержку стилизации placeholder-а.
В IE и старых firefox (до 18-го) placeholder считается псевдоклассом, а в новых firefox, webkit и blink – псевдоэлементом.
Смотрим, что получилось:
input placeholder demo
Нужно сказать, что поддерживаются не все возможные css свойства. Большинство современных браузеров позволяют изменить:
- font (и сопутствующие свойства)
- background (и сопутствующие свойства)
- color
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- text-indent
- text-overflow
- opacity
А если placeholder не вмещается?
Иногда поля для ввода текста сокращаются по ширине из-за особенностей лейаута, в частности на мобильных девайсах. В этом случае длинный текст placeholder-а будет некрасиво обрезан. Чтобы предотвратить это, вы можете использовать text-overflow: ellipsis.
Такой синтаксис будет работать во всех новых браузерах.
css
input[placeholder] {text-overflow:ellipsis;}
input::-moz-placeholder {text-overflow:ellipsis;}
input:-moz-placeholder {text-overflow:ellipsis;}
input:-ms-input-placeholder {text-overflow:ellipsis;}
input placeholder demo
Как скрыть placeholder при фокусе?
Скрывание placeholder-а происходит по-разному.
- в некоторых браузерах при получении фокуса инпутом
- в других браузерах при наличии хотя бы одного введенного символа
Мне больше нравится первый вариант. Для того, чтобы задать такое поведение во всех браузерах, поддерживающих placeholder, определим следующие css правила:
css
:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder {color: transparent}
:focus:-moz-placeholder {color: transparent}
:focus:-ms-input-placeholder {color: transparent}
input placeholder demo
Скрываем placeholder красиво
Можно также добавить transition для появления и скрытия placeholder-a:
input placeholder demo
Вот сss:
css
/* плавное изменение прозрачности placeholder-а при фокусе */ .
input1::-webkit-input-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.input1::-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.input1:-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.input1:-ms-input-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.input1:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
.input1:focus::-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}
.input1:focus:-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}
.input1:focus:-ms-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
/* сдвиг placeholder-а вправо при фокусе*/
.input2::-webkit-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
.input2::-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
.input2:-moz-placeholder {text-indent: 0px; transition: text-indent 0.
3s ease;}
.input2:-ms-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
.input2:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
.input2:focus::-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
.input2:focus:-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
.input2:focus:-ms-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
/* сдвиг placeholder-а вниз при фокусе*/
.input3::-webkit-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;}
.input3::-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;}
.input3:-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;}
.input3:-ms-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;}
.input3:focus::-webkit-input-placeholder {line-height: 100px; transition: line-height 0.
5s ease;}
.input3:focus::-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
.input3:focus:-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
.input3:focus:-ms-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
Надеюсь, вам это пригодится. Пишите замечания и предложения в комментариях.
Posted on Февраль 27, 2014
by Nedudi Дудин Дмитрий
29 Comments ↓
530,583 views
Оформление placeholder css. Внешний вид названия полей или как изменить placeholder. Скрываем placeholder красиво
placeholder=»текст-подсказка» >
Стремясь уменьшить форму и сократить визуальный шум, дизайнеры тег заменяют на атрибут placeholder , тем самым увеличивая нагрузку на кратковременную память. Людям с нарушенным зрением подсказку трудно прочитать.
Лучше разместить непосредственно над полем ввода. Пустое поле легче распознаётся как элемент, требующий заполнения.
Плохо
Хорошо
Стилизация: изменить цвет placeholder CSS
Поменять стиль поля ввода с placeholder CSS
Плохо
Эффект placeholder для
Атрибут placeholder работает только для и , даже если у других тегов указан атрибут contenteditable .
Древний метод на память, изменяющий value JavaScript
Привет, сегодня использованием placeholder у input уже никого не удивишь. Placeholder — это такой временный текст с примером внутри input, который исчезает при вводе текста. CSS стиль для placeholder, мы и постараемся сегодня прописать.
Задача: сделать свой css стиль для placeholder
Допустим у нас есть стильный сайт, в котором в input используется placeholder. Нам нужно сделать так, чтобы серый муторный стиль текста placeholder’a выглядел в общем стиле сайта. Как же этого достичь? Сразу скажу, что это работает пока не во всех браузерах.
Конкретно в IE версии 9 и ниже не работает вообще, в 10 и далее пока работает с большими трудностями. Другое дело Firefox и webkit-браузеры.
Решение: css стиль для placeholder
Итак, задачу мы поставили, как же будем её решать?
Сначала сделаем полигон для тестирования:
Готово, теперь посмотрим, что можно сделать со стилем: у webkit и mozilla есть собственные модификаторы, которые позволяют назначать особенный стиль для placeholder: ::-webkit-input-placeholder и:-moz-placeholder. Посмотрим как их использовать:
Опишем стиль самого input и текст в нем (синий цвет для контраста в примере):
Input{ width: 250px; color: blue; font-weight: normal; font-style: normal; }
Теперь пропишем специальный стиль для текста placeholder в этом input для Webkit браузеров (Chrome, Safari, Opera):
Input::-webkit-input-placeholder{ color: red; font-style: italic; font-weight: bold; }
Сделаем текст плейсхолдера красным жирным курсивом. Обратите внимание, в отличие от других псевдо-классов CSS, которые отделяются одинарным двоеточием, стиль для placeholder в webkit отделяется двойным двоеточием.
Теперь пропишем точно такой же стиль для Mozilla Firefox браузеров:
Input:-moz-placeholder{ color: red; font-style: italic; font-weight: bold; }
Готово. CSS стиль для placeholder, естественно вы можете прописать любой, какой больше подходит для вашего дизайна. Рабочее демо можно посмотреть на
Псевдоэлемент, с помощью которого задаётся стилевое оформление подсказывающего текста, созданного атрибутом placeholder . Допускается использовать свойства для изменения вида текста, например, задать шрифт и цвет.
Синтаксис
Селектор ::placeholder { … }
Обозначения
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| Группирует значения. | [ crop || cross ] | |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | {1,4} |
| # | Повторять один или больше раз через запятую. | # |
Пример
placeholderРезультат примера показан на рис. 1.
Рис. 1. Использование::placeholder
Примечание
Internet Explorer использует псевдокласс :-ms-input-placeholder .
Microsoft Edge использует псевдоэлемент ::-ms-input-placeholder .
Chrome, до версии 57, Opera до версии 44, Safari до версии 10.1 и Android используют псевдоэлемент ::-webkit-input-placeholder .
Firefox с версии 4 и до 19 использует псевдокласс :-moz-placeholder
.
Firefox до версии 51 использует псевдоэлемент ::-moz-placeholder .
Браузеры
Браузеры
В таблице браузеров применяются следующие обозначения.
Многие из вас нередко сталкивались с формами, где в качестве подсказок есть подписи. Они пропадают при на наборе текста. Так вот — это атрибут placeholder, который есть у элементов, которые созданы для ввода текста (input). С помощью него можно задать текст, который будет отображаться как подсказка до начала ввода в данное поле. К сожалению, не все браузеры одинаково корректно работают с данным атрибутом. Устаревшие версии и вовсе данный текст не отображают.
Теперь рассмотрим как сделать так, чтобы решить нижеописанные проблемы:
1. Как изменить стили для плейсхолдера;
2. Как скрыть текст плейсхолдера не при вводе, а уже при нажатии на поле;
3. Что делать с браузерами, где в принципе не отображается placeholder.
Во всех примерах будем работать с полем input.
Как изменить цвет текста-подсказки в placeholder в input?
Давно уже не новость, что каждый браузер не только по-разному отображает placeholder, но и требует особых свойств для изменения стилей.
И это я уже не говорю о соответствующих префиксах в написании. Давайте рассмотрим их.
По умолчанию во многих браузерах цвет подсказки — серый. В данном примере сделаем его чёрным.
Свойство opacity, отвечающее за прозрачность, необходимо вводить для тех браузеров, где поддерживается прозрачность для данного элемента. В противном случае цвет будет серым, как и по умолчанию.
И да, можно использовать для указания этих свойств классы. Смотрим ниже:
Input-phone::-webkit-input-placeholder { color:red; }
.input-text::-webkit-input-placeholder { color:green; }
/* и так далее… */
Убираем placeholder при нажатии на поле
По умолчанию в браузерах текст из атрибута placeholder пропадает только после начала ввода, но есть и такие, кто хочет, чтобы этот текст не отвлекал уже на стадии нажатия на поле ввода. Чаще всего делают именно так. Для это нужна написать стили для фокуса, где цвет текста-подсказки станет полностью прозрачным, то есть его перестанет быть видно.
:focus::-webkit-input-placeholder {opacity:0;}/* webkit */
:focus::-moz-placeholder {opacity:0;}/* Firefox 19+ */
:focus:-moz-placeholder {opacity:0;}/* Firefox 18- */
:focus:-ms-input-placeholder {opacity:0;}/* IE */
Можно даже настроить плавное изменение прозрачности или изменение цвета сss-анимацией. Но с кроссбраузерностью таких решений могут возникнуть проблемы.
А что делать с бразуерами, которые не поддерживают атрибут placeholder в input?
Ну точно не теряться) Да, действительно, такие браузеры есть. Например, IE8. И да, есть люди-адепты, которые будут им пользоваться всегда. Если нужна составить решение для всех посетителей, то наберитесь ещё немного терпения.
Для решения этой проблемы скачайте популярный для этого jquery плагин — jquery.placeholder. Ссылок давать не буду, так как сегодня-завтра они изменятся. Но, если что, можете скачать рабочий пример с плагином в — скачать исходники.
Подключаем его.
Не стоит забывать, что нужен ещё и в принципе jquery подключить.
Placeholder — псевдокласс или псевдоэлемент, который отвечает за вывод названия поля. По своей сути это тот тег (назовем его так для простоты) в который вы вписываете слово, а пользователь видит его внутри. Некое подобие подсказки или названия для каждого поля формы.
Каждый браузер обрабатывает этот тег по своему, и стили его оформления оставляют желать лучшего. Чтобы изменить стили по умолчанию, достаточно добавить пару строк кода в файл стилей. Сложного ничего нет.
Правда необходимо учитывать, что не все мы сможем поменять.
Среди всего многообразия стилей, в данном случае нам доступны следующие вещи:
- font-weight — установка жирности текста
- font-size — выбор размера текста
- font-family — выбор шрифта
- background — фон и фоновое изображение
- color — цвет текста
- word-spacing — установка интервала между словами
- letter-spacing — установка интервала между буквами
- text-decoration — выбор украшения слов. Подчеркнутый, зачеркнутый и тд
- vertical-align — установка вертикального выравнивания
- text-transform — выбор изменения текста. Все заглавными или строчными буквами и тд
- line-height — интервал между строками
- text-indent — устанавливает отступ по левому краю у первой строки параграфа
- text-overflow — выбор отображения текста, который не умещается в блоке (скрыть или обрезать и добавить многоточие)
- opacity — выбор прозрачности элемента
Подчеркнутый, зачеркнутый и тдТеперь, когда мы разобрались в доступных стилях, можно приступить к оформлению, для этого добавим следующие стили:
::-webkit-input-placeholder { color: #2cb04d; }
::-moz-placeholder { color: #2cb04d; }/* Firefox 19+ */
:-moz-placeholder { color: #2cb04d; } /*Firefox 18- */
:-ms-input-placeholder { color: #2cb04d; }
После добавления этих строк, изменится цвет названий внутри полей формы и в каждом браузере он будет одинаковый. Тут же можно дописать дополнительные стили.
К примеру вот такой стиль
::-webkit-input-placeholder {color: #2cb04d; font-size: 1.
5em; font-weight: 600;}
::-moz-placeholder {color:#2cb04d; font-size:1.5em; font-weight:600;} /*Firefox 19+*/
:-moz-placeholder {color:#2cb04d; font-size:1.5em; font-weight:600;} /*Firefox 18-*/
:-ms-input-placeholder {color: #2cb04d; font-size: 1.5em; font-weight: 600;}
Добавит цвет, большой размер и среднюю жирность текста. Если добавить дополнительное свойство —
text-overflow:ellipsis то текст будет обрезаться по размеру поля, в конце будет добавлено многоточие.
Есть еще одно интересное свойство, благодаря появлению анимации в css (стилях) можно настроить красивое скрытие при установке курсора в поле. Раньше это делалось черз js (скрипты)
Input::-webkit-input-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.input::-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.input:-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.input:-ms-input-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.input:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.
3s ease;}
.input:focus::-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}
.input:focus:-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}
.input:focus:-ms-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
Добавление таких стилей позволит сделать плавное исчезновение placeholder-a при установки курсора в поле
.input — это класс элемента формы. Для того чтобы стили сработали, код поля формы должен выглядить так:
Или можно использовать класс элемента. Таким образом можно задавать разные стили для каждой формы.
.contacts-form form input::-webkit-input-placeholder {color: #2cb04d; font-size: 1.5em; font-weight: 600;}
.contacts-form form input::-moz-placeholder {color: #2cb04d; font-size: 1.5em; font-weight: 600;}/*Firefox 19+*/
.contacts-form form input:-moz-placeholder {color: #2cb04d; font-size: 1.5em; font-weight: 600;}/*Firefox 18-*/
.contacts-form form input:-ms-input-placeholder {color: #2cb04d; font-size: 1.
5em; font-weight: 600;}
Вот такими нехитрыми способами можно сделать действительно красивое оформление формы.
Формы и их составляющие (form, input) в HTML
Для создания интерактивного сайта необходим способ передачи данных от пользователя. Самый простой способ передать данные на сайт — это использовать форму (тег <form>).
Материал в этой статье только описывает теги, которые могут содержаться в <form>. Но для программирования функционала необходимо знание языка, к примеру, PHP. Пожалуйста, посмотрите курс PHP, если хотите полноценно понять способ передачи данных на сайт.
Одним из простейших примеров формы может быть форма авторизации:
<form action="/index.php" method="POST"> Пожалуйста, введите мэйл и пароль:<br> <input type="text" name="email" value="" placeholder="Ваш мэйл" required><br> <input type="password" name="password" value="" placeholder="Ваш пароль"><br> <input type="submit" value="Войти на сайт"> </form>
Если создать html файл и вставить в него код из примера выше, то в браузере такой файл отобразится как html страница со следующим содержанием:
— в этой форме есть два поля для ввода и одна кнопка.
Все эти элементы строятся самим браузером.
Браузер использует свой стандартный стиль для полей ввода и кнопок, если не задан особый стиль. У каждого браузера стили для элементов форм отличаются. Поэтому чтобы сделать единый дизайн формы для вех браузеров, необходимо переопределить стандартные стили. Читайте об этом в курсе по CSS.
Рассмотрим построчно теги из примера.
<form> … </form> — этот тег формы. Внутри него могут находиться различные элементы: текстовые поля, поля для ввода пароля и т.п. Во время отправки формы все поля внутри формы передадут свои значения на страницу, адрес которой указан в атрибуте action=»…». Способ передачи данных указывается в атрибуте method=»…». Подробнее о передаче данных из формы на сайт можно прочитать в разделе по программированию, к примеру, на языке PHP. В этой статье рассмотрим только виды полей для вода информации.
<input> — этот тег может отображать различные элемены в зависимости от значения атрибута type=».
..». На третьей строке он используется как поле для ввода текста type=»text». А на четвёртой стройке он используется для ввода пароляtype=»password». Отличие типов «text» от «password» в том, что в поле для ввода пароля все символы скрываются, заменяясь на звёздочки или точки.
В конце стретьей строки есть атрибут required. В переводе означает «обязательный». Если попытаться отправить форму (в нашем случае нажать на кнопку «Войти на сайт») без заполнения этого поля, то форма не отправится и выдаст предупреждение: На пятой строке <input> используется с атрибутом type=»submit». В результате чего браузер рисует кликабельную кнопку, которая запускает процесс отправки содержимого формы.
В атрибуте value=»…» задаётся значение, которое принимает элемент формы. К примеру, если в поле с атрибутом type=»text» задать value=»Это текст в форме», то после загрузки html страницы в этом текстовом поле будет стоять текст «Это текст в форме».
В случае с полем type=»submit» значение в атрибуте value=»…» устанавливает надпись на кнопку отправки формы.
В примере все текстовые поля имеют атрибут value=»» (value равно пустоте, между двойными кавычками «» ничего нет). Поэтому на заднем фоне поля для ввода отображается текст-заглушка, которая сразу прячется, как только начинается ввод в поле. Текст этой заглушки можно задать через атрибут placeholder=»…».
Далее разберём подробнее какие ещё типы полей могут быть в формах. Рассмотрим самые востребованные.
input type=»radio»
Поле для ввода с атрибутом type=»radio» помогает сделать переключатель вариантов. К примеру, если пользователь должен выбрать только один вариант из списка, то код формы будет таким:
<form action="/index.php" method="POST">
Выберите сыр:<br>
<input name="cheese" type="radio" value="v1">Чеддер<br>
<input name="cheese" type="radio" value="v2" checked>Блю<br>
<input name="cheese" type="radio" value="v3">Камбоцола<br>
<input name="cheese" type="radio" value="v4">Морбье<br>
<input name="cheese" type="radio" value="v5">Смоленский<br>
<input name="cheese" type="radio" value="v6">Чечил<br>
</form>
На экране негобраузера форма будет выглядеть так:
Обратите внимание, что все поля имеют атрибут name=»cheese» с одинаковым значением.
Это необходимо, потому что на одной странице могут находится несколько форм с радиокнопками. Но переключатель будет работать только внутри группы радиокнопок с одинаковым значением атрибута name. А значение value=»…» должно быть разным. именно value у выбранного пункта будет передано во время отправки формы.
В примере выше можно заметить, что на втором варианте ответа стоит атрибут checked. Он указывает на то, что во время загрузки страницы второй пункт будет отмечен как выбранный.
input type=»checkbox»
Если есть необходимость выбрать несколько пунктов из предложенных, то необходимо использовать type=»checkbox»:
<form action="/index.php" method="POST">
Выберите сыр:<br>
<input name="cheese" type="checkbox" value="v1">Чеддер<br>
<input name="cheese" type="checkbox" value="v2" checked>Блю<br>
<input name="cheese" type="checkbox" value="v3">Камбоцола<br>
<input name="cheese" type="checkbox" value="v4" checked>Морбье<br>
<input name="cheese" type="checkbox" value="v5" checked>Смоленский<br>
<input name="cheese" type="checkbox" value="v6">Чечил<br>
</form>
Браузер отрисует такие элементы как поля, в которых можно поставить галочку.
Как и в случае с type=»radio» можно задать checked для тех пунктов, которые должны быть отмечены по умолчанию после загрузки страницы.
input type=»file»
Одним из самых востребованных типов вода полей является поле для выбора файла type=»file». HTML формы с кнопкой загрузки файла выглядит так:
<form action="/index.php" method="POST">
Загрузите фото сыра:<br><br>
<input type="file"><br><br>
<input type="submit" value="Загрузить">
</form>
В браузере форма из этого примера будет выглядеть так: При клике на кнопку выбора файла откроется окно, где пользователь сможет указать файл для загрузки. Кнопка «Загрузить» (она же <input type=»submit»>) начинает процесс отправки формы вместе с выбранным файлом.
<textarea>
Если необходимо получить от пользователя очень длинный текст, то записывать его через текстовое поле <input type=»text»> будет проблематично, потому что это поле вмещает только одну строку.
К счастью, есть более удобное многострочное поле с возможностью изменения его размера. Такое поле создаётся с помощью тега <textarea>. Этот тег парный — он имеет открывающую и закрывающую часть. HTML код формы с этим полем выглядит так:
<form action="/index.php" method="POST">
Напишите стих про мышей:<br><br>
<textarea></textarea>
</form>
Браузер отобрасит поле для ввода текста в несколько строк с возможностью изменения размера за правый-нижний угол: В отличии от других input полей, у textarea нет атрибута value. Значение textarea находится непосредственно между тегами <textarea>…</textarea>. И если необходимо задать текст, который будет в этом поле после загрузки страницы, то нужно писать его именно между открывающимся и закрывающимся тегом <textarea>…</textarea>
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 (рус. )
)Не используйте атрибут Placeholder — Smashing Magazine
- 14 минут чтения UX, Браузеры, Доступность
- Поделиться в Twitter, LinkedIn
Об авторе
Эрик — дизайнер из Бостона, который помогает создавать простые решения, отвечающие практическим, физическим, когнитивным и эмоциональным потребностям человека. Больше о Эрик ↬
Атрибут-заполнитель содержит удивительное количество проблем, которые мешают ему выполнить то, что он обещает. Давайте проясним, почему вам нужно прекратить его использовать.Представленный как часть спецификации HTML5 атрибут placeholder «представляет собой краткую подсказку (слово или короткую фразу), предназначенную для помощи пользователю при вводе данных, когда элемент управления не имеет значения. Подсказкой может быть образец значения или краткое описание ожидаемого формата».
Этот, казалось бы, простой атрибут содержит удивительное количество проблем, которые мешают ему выполнить то, что он обещает.
Надеюсь, я смогу убедить вас прекратить его использовать.
Технически правильно
Входы — это ворота, через которые должна пройти почти вся электронная коммерция. Независимо от того, что вы думаете о месте эмпатии в дизайне, бесполезные входные данные оставляют деньги на столе.
Наличие атрибута-заполнителя не будет помечено программным обеспечением автоматической проверки доступности. Однако это не обязательно означает, что его можно использовать. В конечном счете, доступность касается людей, а не стандартов, поэтому важно думать о вашем интерфейсе не только с помощью контрольного списка.
Назовите это исправлением, инклюзивным дизайном, универсальным доступом и так далее. Суть всех этих философий сводится к созданию вещей, которые люди — все люди — могут использовать. С этой точки зрения заполнитель просто не выдерживает критики.
Проблемы
Перевод
Браузеры с функциями автоматического перевода, такими как Chrome, пропускают атрибуты при инициировании запроса на перевод текущей страницы.
Для многих атрибутов это желательное поведение, поскольку обновленное значение может нарушить базовую логику или структуру страницы.
Одним из атрибутов, пропущенных браузерами, является заполнитель . Из-за этого содержимое заполнителя не будет переведено и останется исходным языком.
Больше после прыжка! Продолжить чтение ниже ↓
Если человек запрашивает перевод страницы, ожидается, что все видимое содержимое страницы будет обновлено. Заполнители часто используются для предоставления важных инструкций по форматированию ввода или вместо более подходящего метка элемент (подробнее об этом чуть позже). Если это содержимое не будет обновлено вместе с остальной частью переведенной страницы, существует высокая вероятность того, что человек, незнакомый с языком, не сможет успешно понять ввод и управлять им.
Это должно быть достаточной причиной, чтобы не использовать атрибут.
Раз уж мы заговорили о переводе, стоит также отметить, что местоположение — это не то же самое, что языковые предпочтения.
Многие люди настраивают свои устройства на использование языка, который не является официальным языком страны, указанной в IP-адресе их браузера (не говоря уже о VPN), и мы должны уважать это. Убедитесь, что ваш контент семантически описан — ваши соседи будут вам благодарны!
Интероперабельность
Интероперабельность — это практика, позволяющая различным системам обмениваться информацией и понимать ее. Это фундаментальная часть как Интернета, так и вспомогательных технологий.
Семантическое описание содержимого делает его интероперабельным. Интероперабельный вход создается путем программного связывания с ним элемента label . Метки описывают назначение поля ввода, предоставляя человеку, заполняющему форму, подсказку, с которой он может действовать. Один из способов связать 9Метка 0025 с входом заключается в использовании атрибута для со значением, которое соответствует идентификатору входа .
Без этого сопряжения для / id вспомогательные технологии не смогут определить, для чего предназначен ввод. Программная ассоциация предоставляет крючок API, который может использовать такое программное обеспечение, как программы чтения с экрана или распознавание голоса. Без него люди, которые полагаются на это специализированное программное обеспечение, не смогут читать или управлять входными данными.
Причина, по которой я упоминаю об этом, заключается в том, что заполнитель часто используется вместо элемента label . Хотя я лично сбит с толку этой практикой, похоже, она набрала популярность в дизайнерском сообществе. Мое лучшее предположение о его популярности — геометрически точный эффект сетки, который он создает при размещении рядом с другими полями ввода без меток, действует как дизайнерская кошачья мята.
Эффект плавающей метки, близкий родственник этого явления, также часто использует атрибут заполнителя вместо метки .
Стоит отметить, что если метка программно связана с вводом, щелчок или касание текста метки переместит фокус на ввод. Этот небольшой трюк обеспечивает дополнительную область для взаимодействия с входными данными, что может быть полезно для людей с проблемами контроля моторики. Заполнители, действующие как метки, а также плавающие метки, не могут этого сделать.
Когниция
По данным переписи населения США 2016 года, около 15 миллионов человек сообщают о когнитивных проблемах, и это только с учетом тех, кто решил сообщить о себе. Экстраполируя это, мы можем предположить, что проблемы когнитивной доступности затрагивают значительную часть населения мира.
О самоотчетах стоит упомянуть, поскольку человек может не знать или не чувствовать себя комфортно, говоря, что у него есть состояние когнитивной доступности.
К сожалению, раскрытие такого рода информации по-прежнему вызывает клеймо позора, поскольку оно часто влияет на такие вещи, как перспективы трудоустройства и жилья.
Познание может быть подавлено ситуативно, то есть это вполне может случиться с вами. На него могут повлиять такие вещи, как многозадачность, недосыпание, стресс, злоупотребление психоактивными веществами и депрессия. Я могу быть немного измученным здесь, но это очень похоже на условия, которые вы найдете на большинстве офисных работ.
Повторный вызов
Зонтик когнитивных проблем охватывает такие состояния, как кратковременная потеря памяти, черепно-мозговая травма и синдром дефицита внимания с гиперактивностью. Все они могут повлиять на способность человека вспоминать информацию.
Когда человек вводит информацию во вход, ее заполнитель исчезает. Единственный способ восстановить его — удалить введенную информацию. Это создает ощущение, что направляющий язык удаляется, как только человек, пытающийся заполнить ввод, взаимодействует с ним.
Не хорошо!
Когда ваша способность вспоминать информацию ограничена, следование этим исчезающим правилам раздражает. Ввод данных со сложными требованиями, например создание нового пароля, не вызывает раздражения и становится труднопреодолимым барьером.
Подождите, какая минимальная длина? Сколько чисел они хотят снова? (Большой предварительный просмотр)В то время как более технологически искушенные люди, возможно, научились хитрым трюкам, таким как вырезание введенной информации, просмотр содержимого заполнителя, чтобы освежить свою память, а затем повторная вставка его обратно для редактирования, люди, которые менее технически грамотны, могут не понять почему содержимое справки исчезает или как его вернуть.
Цифровая грамотность
Учитывая, что все больше и больше населения мира подключается к сети, на нас, как на ответственных дизайнеров и разработчиков, ложится ответственность за то, чтобы эти люди чувствовали себя желанными.
Ваш маленький уголок Интернета (или интрасети!) вполне может стать одним из их первых онлайн-впечатлений — при условии, что конечный пользователь «просто узнает» о простом высокомерии.
Для читателей из США нежное напоминание о том, что новое может не означать иностранное. Доступ растет для пожилых американцев. Хотя со временем цифровая грамотность станет более распространенным явлением среди пожилых людей, проблемы доступности также будут расти.
Для тех, кто никогда раньше с этим не сталкивался, текст-заполнитель может выглядеть как введенный контент, из-за чего они пропускают ввод. Если это обязательное поле, отправка формы создаст разочарование, когда они могут не понять, в чем ошибка или как ее исправить. Если это не обязательное поле, ваша форма по-прежнему подвергается ненужному риску не собрать потенциально ценную вторичную информацию.
Утилита
Содержимое справки-заполнителя ограничено только строкой статического текста, и этого не всегда может быть достаточно для передачи сообщения.
К нему может потребоваться применить дополнительные стили или содержать описательную разметку, атрибуты, изображения и иконографию.
Это особенно удобно в зрелых системах проектирования. Дополнительные параметры стиля, созданные путем перемещения строки текста из элемента ввода, означают, что он может использовать маркеры дизайна системы и все преимущества, связанные с их использованием.
Длина текста-заполнителя также ограничена шириной входных данных, в которых он содержится. В нашем адаптивном, ориентированном на мобильные устройства мире существует очень большая вероятность того, что важная информация может быть усечена:
Думаю, я никогда не узнаю, где этот код есть. (Большой предварительный просмотр)Vision
Color Contrast
Стили основных браузеров по умолчанию для содержимого-заполнителя используют светло-серый цвет, чтобы визуально сообщить, что это предложение. Многие пользовательские дизайны ввода следуют этому соглашению, беря цвет содержимого ввода и осветляя его.
К сожалению, этот метод может привести к проблемам с цветовым контрастом. Цветовой контраст — это соотношение, определяемое путем сравнения значений яркости текста и цвета фона; в данном случае это цвет текста-заполнителя на фоне ввода.
См. коэффициент контрастности заполнителя браузера Pen Default от Эрика Бейли (@ericwbailey) на CodePen.
См. коэффициент контрастности заполнителя браузера Pen Default от Эрика Бейли (@ericwbailey) на CodePen.Если коэффициент контрастности содержимого заполнителя слишком низок для восприятия, это означает, что информация, необходимая для успешного заполнения формы, может быть не видна людям с плохим зрением. Для наиболее распространенных размеров входного шрифта соотношение составляет 4,5:1.
Как и все проблемы с доступностью, плохое зрение может быть постоянным или временным, биологическим или экологическим или их сочетанием.
К биологическим нарушениям относятся такие состояния, как дальнозоркость, дальтонизм, расширенные зрачки и катаракта. Условия окружающей среды включают в себя такие обстоятельства, как яркий свет полуденного солнца, настройка низкой яркости для экономии заряда батареи, экраны конфиденциальности, жир и макияж, оставшиеся на экране после вашего последнего телефонного звонка, и т. д.
Это соотношение не является каким-то личным эстетическим предпочтением, которое я пытаюсь произвольно навязать другим. Это часть набора тщательно разработанных правил, которые помогают гарантировать, что цифровыми технологиями сможет пользоваться как можно больше людей, независимо от их способностей или обстоятельств. Сознательное игнорирование этих правил означает соучастие в практике исключения.
И вот в чем загвоздка: при попытке сделать атрибуты-заполнители инклюзивными, обновленный более контрастный цвет содержимого заполнителя может стать достаточно темным, чтобы его могли интерпретировать как введенные данные даже более грамотными в цифровом плане людьми.
Это отбрасывает проблему обратно в область познавательных проблем.
Режим высокой контрастности
Операционная система Windows содержит функцию, называемую режимом высокой контрастности. При активации он назначает новые цвета элементам интерфейса из специальной высококонтрастной палитры, использующей ограниченное количество цветовых вариантов. Вот пример того, как это может выглядеть:
Windows 10 настроена на использование темы High Contrast Mode 1 под управлением Internet Explorer 11. (Большой предварительный просмотр) делая его похожим на предварительно заполненную информацию. Как обсуждалось ранее, это может помешать людям понять, что входные данные могут нуждаться в введенной в них информации. Вам может быть интересно, можно ли обновить стиль в режиме высокой контрастности, чтобы сделать заполнитель более понятным.
Хотя в медиа-запросе можно выбрать режим высокой контрастности, я умоляю вас не делать этого. Разработчик внешнего интерфейса Китти Жиродель сказала об этом лучше всего:
«Режим высокой контрастности больше не касается дизайна, а строгого удобства использования. Вы должны стремиться к максимальной читабельности, а не к цветовой эстетике».
Люди, которые полагаются на режим высокой контрастности, используют его из-за его предсказуемости. Чрезмерное изменение способа представления контента может помешать единственному способу надежного использования компьютера. В случае осветления цвета содержимого-заполнителя, чтобы оно выглядело как обработка без режима высокой контрастности, вы рискуете сделать его невозможным для восприятия.
Решение
Напомним, атрибут-заполнитель:
- Не может быть переведен автоматически;
- Часто используется вместо этикетки, блокируя вспомогательные технологии;
- Может скрывать важную информацию при вводе контента;
- Может быть слишком светлым для разборчивости;
- Имеет ограниченные возможности оформления;
- Может выглядеть как предварительно заполненная информация и может быть пропущена.
Эш. Это не здорово. Итак, что мы можем с этим поделать?
Дизайн
Переместите содержимое заполнителя выше ввода, но ниже метки:
Большой предварительный просмотрЭтот подход:
- Сообщает визуальную и структурную иерархию:
- Для чего предназначен этот ввод,
- Вещи, которые вам нужно знать для успешного использования ввода и
- сам ввод.
- Можно перевести.
- Не будет выглядеть как предварительно заполненная информация.
- Можно увидеть в условиях плохой видимости.
- Не исчезнет при вводе содержимого в поле ввода.
- Может включать семантическую разметку и стилизоваться с помощью CSS.
Кроме того, содержимое справки будет отображаться при активации ввода на устройстве с программной клавиатурой. При размещении под входом содержимое может быть скрыто, когда экранная клавиатура появляется в нижней части области просмотра устройства:
Содержимое скрыто экранной клавиатурой.
Клавиатуры сторонних производителей с большей высотой могут иметь больший риск блокировки важного содержимого. (большой превью)Разработка
Вот как перевести наш разработанный пример в код:
<метка для="идентификатор-сотрудника"> Ваш идентификационный номер сотрудника <р > Можно найти в профиле вашего сотрудника в интранете. Пример: a1234567-89. <ввод aria-describedby="подсказка-id-сотрудника" имя = "идентификационный номер" тип = "текст" />
Небольшой отход от традиционных доступных для пары атрибутов / id : элемент label программно связан с входом через его id объявление «employee-id». Элемент p , помещенный между меткой и входными элементами , действует как замена атрибута заполнителя .
«Итак, — спросите вы. «Почему бы нам просто не поместить весь этот замещающий контент в элемент label ? Кажется, работы будет намного меньше!» Ответ заключается в том, что удобство для разработчиков не должно иметь приоритет над пользовательским опытом.
Используя aria-described by , чтобы программно связать ввод с элементом p , мы создаем приоритет информации для программ чтения с экрана, который имеет паритет с тем, что испытал бы человек, просматривающий без программы чтения с экрана. aria-describedby гарантирует, что содержимое p будет описано последним, после содержимого метки и типа ввода, с которым оно связано.
Другими словами, это то, какой контент запрашивает ввод, какой это тип ввода, а затем дополнительная помощь, если она вам нужна — именно то, что кто-то испытает, если посмотрит на ввод формы.
Пользовательский опыт распространяется на всех пользователей, включая тех, кто перемещается с помощью программ чтения с экрана. Содержимое справки является автономным, и в нем легко перемещаться, если человеку, использующему программу чтения с экрана, потребуется повторно сослаться на него. Поскольку это автономный узел, его также можно отключить (обычно с помощью клавиши Control), не рискуя заглушить другую важную информацию.
Включение содержимого справки в метку делает ее излишне подробной. этикетка должны быть осмысленными, но также краткими. Добавление слишком большого количества информации к метке может привести к эффекту, противоположному желаемому, что сделает ее слишком длинной для запоминания или просто слишком раздражающей, чтобы слушать ее полностью. На самом деле в Руководстве по обеспечению доступности веб-контента есть правила, специально касающиеся этого: критерии успеха 2.4.6 и 3.3.2.
Пример
Вот решение, реализованное в реальном коде:
См. перо Не используйте атрибут-заполнитель Эрика Бейли (@ericwbailey) на CodePen.
А вот видео, демонстрирующее, как с этим справляются популярные программы чтения с экрана:
youtube.com/embed/MHGJna9GcTM?rel=0″ frameborder=»0″ webkitallowfullscreen=»» mozallowfullscreen=»» allowfullscreen=»»/> Лучшее решение
«Чем меньше интерфейс требует от пользователей, тем он доступнее».— Элис Боксхолл
Последняя мысль: нужна ли вам эта дополнительная информация-заполнитель?
В хороших интерфейсных решениях используются специальные входные атрибуты и методы проверки, чтобы не перекладывать дополнительную работу на человека, который просто хочет использовать ваш сайт или приложение с минимальными осложнениями.
Хороший копирайтинг создает ярлыки, которые четко и кратко описывают цель входных данных. Сделайте здесь достаточно хорошую работу, и этикетка устранит двусмысленность, особенно если вы заранее протестируете ее.
Хороший пользовательский опыт — это создание интеллектуальных потоков, которые опережают потребности, желания и желания людей, используя существующую информацию для устранения как можно большего количества ненужных вопросов.
Прислушиваться к людям, которые используют ваш веб-сайт или веб-приложение, означает критически относиться к тому, что вы считаете само собой разумеющимся, когда просматриваете Интернет. Не делая предположений об обстоятельствах других людей, включая технологии, которые они используют, вы можете внести свой вклад в предотвращение исключения.
Потратьте некоторое время, чтобы просмотреть свой дизайн и код и посмотреть, что не выдерживает критики. Для начала неплохо было бы проверить, используете ли вы атрибут placeholder.
Стоя на плечах гигантов. Спасибо Роджеру Йоханссону, Адаму Сильверу, Скотту О’Хара и Кэти Шервин за их статьи по этой теме.
Стилизация текста-заполнителя 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: