InputSelect Класс (Microsoft.AspNetCore.Components.Forms) | Microsoft Learn
Twitter LinkedIn Facebook Адрес электронной почты
- Ссылка
Определение
- Пространство имен:
- Microsoft.AspNetCore.Components.Forms
- Сборки:
- Microsoft.AspNetCore.Components.dll, Microsoft.AspNetCore.Components.Web.dll
- Пакеты:
- Microsoft.AspNetCore.Components v3.0.3, Microsoft.AspNetCore.Components.Web v3.0.3
- Пакет:
- Microsoft.AspNetCore.Components.Web v3.1.18
- Пакет:
- Microsoft.AspNetCore.Components.Web v5.0.9
- Пакет:
- Microsoft.AspNetCore.Components.Web v6.0.6
- Пакет:
- Microsoft.AspNetCore.Components.Web v7.0.0-preview.5.22303.8
Важно!
Некоторые сведения относятся к предварительной версии продукта, в которую до выпуска могут быть внесены существенные изменения. Майкрософт не предоставляет никаких гарантий, явных или подразумеваемых, относительно приведенных здесь сведений.
Компонент выбора раскрывающегося списка.
generic <typename TValue> public ref class InputSelect : Microsoft::AspNetCore::Components::Forms::InputBase<TValue>
public class InputSelect<TValue> : Microsoft.AspNetCore.Components.Forms.InputBase<TValue>
type InputSelect<'Value> = class
inherit InputBase<'Value>Public Class InputSelect(Of TValue) Inherits InputBase(Of TValue)
Параметры типа
- Наследование
Object
ComponentBase
InputBase<TValue>
InputSelect<TValue>
Конструкторы
| InputSelect<TValue>() | Создает экземпляр InputSelect<TValue>. |
Свойства
| AdditionalAttributes | Возвращает или задает коллекцию дополнительных атрибутов, которые будут применены к созданному элементу. |
| ChildContent | Возвращает или задает дочернее содержимое для отрисовки внутри элемента select. |
| CssClass | Возвращает строку класса CSS, объединяющую атрибут |
| CurrentValue | Возвращает или задает текущее значение входных данных. (Унаследовано от InputBase<TValue>) |
| CurrentValueAsString | Возвращает или задает текущее значение входных данных, представленное в виде строки. (Унаследовано от InputBase<TValue>) |
| DisplayName | Возвращает или задает отображаемое имя для этого поля. Это значение используется при создании сообщений об ошибках, если входное значение не удалось правильно проанализировать. (Унаследовано от InputBase<TValue>) |
| EditContext | Возвращает связанный EditContextобъект . Это свойство неинициализировано, если входные данные не имеют родительского EditFormэлемента. (Унаследовано от InputBase<TValue>) |
| Element | Возвращает или задает Может быть |
| FieldIdentifier | FieldIdentifier Возвращает привязанное значение. (Унаследовано от InputBase<TValue>) |
| Value | Возвращает или задает значение входных данных. |
| ValueChanged | Возвращает или задает обратный вызов, который обновляет связанное значение. (Унаследовано от InputBase<TValue>) |
| ValueExpression | Возвращает или задает выражение, определяющее связанное значение. (Унаследовано от InputBase<TValue>) |
Это следует использовать с двусторонней привязкой.Методы
| BuildRenderTree(RenderTreeBuilder) | Отрисовывает компонент в предоставленном объекте RenderTreeBuilder. |
| Dispose(Boolean) | (Унаследовано от InputBase<TValue>) |
| FormatValueAsString(T) | Форматирует значение в виде строки. Производные классы могут переопределить это, чтобы определить форматирование, используемое для CurrentValueAsString. |
| FormatValueAsString(TValue) | System.Object.FormatValueAsString(`0) |
| InvokeAsync(Action) | Выполняет предоставленный рабочий элемент в контексте синхронизации связанного отрисовщика. (Унаследовано от ComponentBase) |
| InvokeAsync(Func<Task>) | Выполняет предоставленный рабочий элемент в контексте синхронизации связанного отрисовщика. (Унаследовано от ComponentBase) |
| OnAfterRender(Boolean) | Метод вызывается после каждого отрисовки компонента. (Унаследовано от ComponentBase) |
| OnAfterRenderAsync(Boolean) | Метод вызывается после каждого отрисовки компонента. Обратите внимание, что компонент не выполняет автоматическую отрисовку после завершения возвращаемого Taskзначения, так как это приведет к бесконечному циклу отрисовки. |
| OnInitialized() | Метод вызывается, когда компонент готов к запуску, получив свои начальные параметры от родительского элемента в дереве отрисовки. (Унаследовано от ComponentBase) |
| OnInitializedAsync() | Метод вызывается, когда компонент готов к запуску, получив свои начальные параметры от родительского элемента в дереве отрисовки. Переопределите этот метод, если вы будете выполнять асинхронную операцию и хотите, чтобы компонент обновлялся после завершения этой операции. (Унаследовано от ComponentBase) |
| OnParametersSet() | Метод вызывается, когда компонент получил параметры от родительского элемента в дереве отрисовки, а входящие значения были назначены свойствам. |
| OnParametersSetAsync() | Метод вызывается, когда компонент получил параметры от родительского элемента в дереве отрисовки, а входящие значения были назначены свойствам. |
| SetParametersAsync(ParameterView) | Задает параметры, предоставляемые родительским элементом компонента в дереве отрисовки. (Унаследовано от InputBase<TValue>) |
| ShouldRender() | Возвращает флаг, указывающий, должен ли компонент отображаться. (Унаследовано от ComponentBase) |
| StateHasChanged() | Уведомляет компонент о том, что его состояние изменилось. Если применимо, это приведет к повторной отрисовки компонента. (Унаследовано от ComponentBase) |
| TryParseValueFromString(String, T, String) | Анализирует строку для создания экземпляра |
Явные реализации интерфейса
| IComponent.Attach(RenderHandle) | (Унаследовано от ComponentBase) |
| IDisposable.Dispose() | (Унаследовано от InputBase<TValue>) |
| IHandleAfterRender.OnAfterRenderAsync() | (Унаследовано от ComponentBase) |
| IHandleEvent.HandleEventAsync(EventCallbackWorkItem, Object) | (Унаследовано от ComponentBase) |
Применяется к
Как сделать подсказки для полей ввода HTML — атрибут placeholder для input, select, textarea
28.07.18 ИТ / HTML 7023
При добавлении полей ввода на страницы сайта для них необходимо указывать вспомогательный текст – подсказки, которые объясняют предназначение полей.
Раньше такие подсказки обычно делались просто путем добавления строки текста выше над полем, но можно было встретить самописные решения, которые выполняли роль нового атрибута placeholder.
Как все началось? Часто на практике приходилось для компактности вводить подсказки прямо в полях вводах, а не добавлять лишнюю строку с подсказкой. Но специального атрибута для выполнения этой функции не было – можно было лишь просто добавить текст внутри поля при помощи значения value. Когда пользователь кликнет на поле — при помощи JavaScript происходило удаление текста и если пользователь ничего не оставил в поле, то при удалении фокуса — подсказка возвращалась на свое место опять же при помощи JavaScript. Также необходимо было изменять цвет текста на более светлый при помощи CSS-свойств, чтобы он выглядел как подсказка, а не обычный текст. То есть, данное решение требовало дополнительного написания кода.
Видя такое положение дел, разработчики HTML начали работу над этим – для тега input type=»text» со временем был разработан и добавлен специальный атрибут – placeholder.
Он позволяет быстро прописать нужную подсказку для текста, которая будет показана пользователю. Цвет текста в подсказке сразу выделяется серым цветом.
На настоящее время поддержка атрибута placeholder есть во всех современных браузерах. Браузеры, не поддерживающие данный атрибут, просто игнорируют его. Существуют специальные разработки – полифилы, которые при помощи JavaScript реализуют работу атрибута placeholder. Поэтому можно просто писать данный атрибут, а в крайних случаях для остальных браузеров использовать полифилы.
<input type="text" placeholder="Введите текст">
Но как быть с другими типами полей input? Например, type=»checkbox» и type=»radio». Для этих типов полей можно использовать тег label, он задает подсказку для помещаемого в него поля. Например, можно написать так:
<label> <span>Отметьте нужное:</span> <input type="checkbox"> </label>
Для select нет атрибута placeholder, но можно сделать подсказку внутри поля простым способом – ею будет первый option из этого select.
Можно визуально выделить его, например, добавить вначале и в конце дефис.
<select> <option value="- Выберите значение -">- Выберите значение -</option> <option value="Значение 1"> Значение 1</option> <option value=" Значение 2"> Значение 2</option> <option value=" Значение 3"> Значение 3</option> </select>
Остается разобраться с textarea. У тега textarea атрибут placeholder отсутствует, но можно добавить подсказку прямо в поле, просто разместив его между тегами textarea.
<textarea>Введите текст</textarea>
Краткий итог, как сделать подсказки для полей ввода HTML:
- для input type=»text» следует использовать атрибут placeholder;
- для остальных типов input можно использовать тег label;
- для select используется подсказка в виде первого option;
- для textarea подсказка размещается внутри данного тега.
Мы рассмотрели, каким образом можно сделать подсказки для различных полей ввода HTML, даже если они не поддерживают атрибут placeholder.
Select Input — Inputs ⚡️ FormKit — Vue Forms, Supercharged
Выбор ввода использует собственный ввод выбора HTML. Выбор входных данных может быть выборкой с одним значением или выборкой с несколькими значениями с использованием атрибута , умноженного на . Есть 4 способа предоставить параметры для выбора ввода:
- Массив строк
- Пара объектов «значение/метка»
- Массив объектов с
меткойизначениемсвойств (аналогично флажку и радиовходам) - Использование тегов
непосредственно внутри слотапо умолчанию.
Списки выбора чаще всего используются для выбора одного элемента из списка параметров.
Массив строк
Самый простой способ указать параметры — это массив строк. Предоставленные строки будут использоваться как для метки, так и для значения параметра.
Пример загрузки в реальном времени
Значение / объект метки
Вы также можете указать параметры , где ключи — это значения, а значения каждого свойства — это метки.
Пример загрузки в реальном времени
Массив объектов
Наиболее гибкий способ определения параметров — предоставление массива объектов. Объекты должны включать свойства value и label , но могут также включать свойство help , а также объект attrs дополнительных атрибутов, применяемых к каждому тегу ввода select.
Загрузка в реальном времени Пример
Атрибуты опции
Чтобы передать дополнительные атрибуты каждому элементу , ваш объект также может содержать свойство attrs .
[
{
лейбл: 'Мой лейбл',
значение: 'a-значение',
атрибуты: {
отключено: правда
}
}
]
Слот по умолчанию
Иногда может потребоваться вручную вывести содержимое списка выбора для создания специализированных структур. Это можно сделать с помощью по умолчанию для явного вывода ваших опций.
Пример загрузки в реальном времени
предупреждение
При использовании слота по умолчанию для вывода параметров вы не должны использовать реквизиты заполнителя или options .
Multiple
Вход select также поддерживает атрибут Multiple , который допускает множественный выбор. При использовании с FormKit этот параметр создает массив значений.
Пример загрузки в реальном времени
Альтернативы
Выбор входных данных с атрибутом , умноженный на , может быть сложным для некоторых пользователей, поскольку они требуют удержания нажатой клавиши управления или команд для выполнения множественного выбора. В зависимости от вашей аудитории вы можете вместо этого рассмотреть возможность использования флажка с параметрами .
Несколько со слотом по умолчанию
При использовании слота по умолчанию в сочетании с атрибутом , умноженным на , вы должны явно назначить выбранный атрибут для каждой опции.
Реквизиты и атрибуты
| Опора | Тип | По умолчанию | Описание |
|---|---|---|---|
| параметры | Массив/объект | [] | Объект пар значение/метка или массив строк, или массив объектов, который должен содержать свойство метки и значения. |
| заполнитель | Строка | Нет | При определении FormKit вводит невыбираемый скрытый тег option в качестве первого значения списка, которое служит заполнителем. |
| select-icon | String | ’’ | Задает значок для помещения в раздел selectIcon . По умолчанию используется значок вниз . |
| Показать универсальный реквизит | |||
| конфигурация | Объект | {} | Параметры конфигурации для предоставления узлу входа и любому дочернему узлу этого входа. |
| задержка | Число | 20 | Количество миллисекунд для устранения дребезга входного значения перед отправкой хука фиксации . |
| ошибки | Массив | [] | Массив строк для отображения в виде сообщений об ошибках в этом поле. |
| помощь | String | » | Текст для текста справки, связанного с вводом. |
| id | Строка | input_{n} | Уникальный идентификатор ввода. Предоставление идентификатора также позволяет получить глобальный доступ к входному узлу. |
| игнорировать | логическое значение | false | Предотвращает включение ввода в какой-либо родительский элемент (группу, список, форму и т. д.). Полезно при использовании входных данных для пользовательского интерфейса вместо фактических значений. |
| index | Number | undefined | Позволяет вставить ввод по заданному индексу, если родителем является список. Если значение ввода не определено, оно наследует значение из этой позиции индекса. Если у него есть значение, он вставляет его в значения списков по заданному индексу. |
| label | String | » | Текст для элемента label , связанного с вводом. |
| имя | Строка | input_{n} | Имя ввода, указанное в объекте данных. Это должно быть уникальным в пределах группы полей. |
| родитель | FormKitNode | контекстный | По умолчанию родителем является группа-оболочка, список или форма, но этот реквизит допускает явное назначение родительского узла. |
| prefix-icon | String | » | Указывает значок, который нужно поместить в prefixIcon 9раздел 0005. |
| сохранить | логическое значение | false | Сохраняет значение ввода в родительской группе, списке или форме при размонтировании ввода. |
| save-errors | boolean | false | По умолчанию ошибки, установленные на входах с помощью setErrors , автоматически сбрасываются при вводе, установка этого свойства в true поддерживает ошибку до тех пор, пока она не будет очищена явным образом. |
| секции-схема | Object | {} | Объект ключей разделов и частичных значений схемы, где каждый частичный элемент схемы применяется к соответствующему разделу. |
| suffix-icon | String | '' | Задает значок для помещения в раздел suffixIcon . |
| type | String | text | Тип ввода для визуализации из библиотеки. |
| проверка | Строка, Массив | [] | Правила проверки, применяемые к вводу. |
| validation-visibility | String | blur | Определяет, когда отображать не прошедшие проверку правила ввода. Допустимые значения: blur , dirty и live . |
| метка проверки | Строка | {label prop} | Определяет, какую метку использовать в сообщениях об ошибках проверки, по умолчанию используется label prop, если доступно, в противном случае используется name prop. |
| правила проверки | Объект | {} | Дополнительные пользовательские правила проверки, которые должны быть доступны для проверки. |
| value | Any | undefined | Начальное значение ввода и/или его потомков. Не реактивный. Можно заполнить целые группы (формы) и списки. |
Разделы
Вы можете настроить таргетинг на определенный раздел ввода, используя «ключ» этого раздела, что позволит вам изменить этот раздел.
классы, HTML (через :sections-schema ) или контент (через слоты). Подробнее о разделах
здесь.
Размер смузи
Средний
Выберите размер смузи.
Вы должны сделать выбор.
| Раздел-ключ | Описание |
|---|---|
| опция | Отвечает за визуализацию каждой опции. Контекст включает свойство option с визуализируемым параметром. Этот объект включает свойства label и value . |
| selectIcon | Элемент для вывода значка для открытия списка выбора. Обычно стрелка вниз. |
| Показать универсальный ключи раздела | |
| внешний | Самый внешний оберточный элемент. |
| обертка | Обертка вокруг этикетки и ввода. |
| метка | Метка входа. |
| префикс | По умолчанию не имеет вывода, но разрешает содержимое непосредственно перед элементом ввода. |
| prefixIcon | Элемент для вывода значка перед секцией префикса. |
| внутренний | Оболочка вокруг фактического элемента ввода. |
| суффикс | По умолчанию не имеет вывода, но разрешает содержимое непосредственно после элемента ввода. |
| suffixIcon | Элемент для вывода значка после раздела суффикса. |
| ввод | Сам элемент ввода. |
| help | Элемент, содержащий текст справки. |
| сообщений | Оболочка для всех сообщений. |
| сообщение | Элемент (или несколько элементов), содержащий сообщение — чаще всего сообщения проверки и ошибки. |
Типы ввода HTML
« Предыдущая
Следующая глава »
Типы ввода
В этой главе описываются типы ввода элемента .
Тип ввода: текст
определяет однострочное поле ввода для ввод текста :
Пример
<форма>
Имя:
Фамилия:
Попробуйте сами »
Вот как приведенный выше HTML-код будет отображаться в браузере:
Имя:
Фамилия:
Тип ввода: пароль
определяет поле пароля :
Пример
<форма>
Имя пользователя:
Пароль пользователя:
Попробуйте сами »
Вот как приведенный выше HTML-код будет отображаться в браузере:
Имя пользователя:
Пароль пользователя:
Символы в поле пароля маскируются (показаны звездочками или кружками). |
Тип ввода: submit
определяет кнопку для отправки ввод формы в обработчик формы .
Обработчик формы обычно представляет собой серверную страницу со сценарием для обработки входные данные.
Обработчик формы указан в атрибуте действия формы:
Пример
php"> Имя:
Фамилия:
Попробуйте сами »
Тип ввода: радио
определяет переключатель .
Радиокнопки позволяют пользователю выберите ТОЛЬКО ОДИН из ограниченного числа вариантов:
Пример
Попробуйте сами »
Вот как приведенный выше HTML-код будет отображаться в браузере:
Мужской
Женский
Другой
Тип ввода: флажок
определяет флажок .
Флажки позволяют пользователю выбирать НОЛЬ или БОЛЬШЕ вариантов из ограниченного числа вариантов.
Пример
Попробуйте сами »
Ограничения ввода
Вот список некоторых общих ограничений ввода (некоторые новые в HTML5):
| Атрибут | Описание |
|---|---|
| инвалид | Указывает, что поле ввода должно быть отключено |
| макс. | Указывает максимальное значение для поля ввода |
| максимальная длина | Указывает максимальное количество символов для поля ввода |
| мин | Указывает минимальное значение для поля ввода |
| узор | Задает регулярное выражение для проверки входного значения на соответствие | .
| только чтение | Указывает, что поле ввода доступно только для чтения (не может быть изменено) |
| требуется | Указывает, что поле ввода является обязательным (должно быть заполнено) |
| размер | Определяет ширину (в символах) поля ввода |
| шаг | Указывает допустимые интервалы чисел для поля ввода |
| значение | Указывает значение по умолчанию для поля ввода |
Вы узнаете больше об ограничениях ввода в следующей главе.
Пример
<форма>
Количество:
Попробуйте сами »
Тип ввода: дата
используется для полей ввода, которые должны содержать дату.
В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.
Пример
<форма>
День рождения:
Попробуйте сами »
Вы можете добавить ограничения на ввод:
Пример
Попробуйте сами »
Тип ввода: цвет
используется для полей ввода, которые должны содержать цвет.
В зависимости от поддержки браузера в поле ввода может отображаться палитра цветов.
Пример
<форма>
Выберите свой любимый цвет:
Попробуйте сами »
Тип ввода: диапазон
используется для полей ввода, которые должны содержать значение в диапазоне.
В зависимости от поддержки браузера поле ввода может отображаться в виде ползунка контроль.
Пример
<форма>
Попробуйте сами »
Вы можете использовать следующие атрибуты для указания ограничений: min, max, step, стоимость.
Тип ввода: месяц
позволяет пользователю выбрать месяц и год.
В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.
Пример
<форма>
День рождения (месяц и год):
Попробуйте сами »
Тип ввода: неделя
Параметр позволяет пользователю выбрать неделю и год.
В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.
Пример
<форма>
Выберите неделю:
Попробуйте сами »
Тип ввода: время
позволяет пользователю выбрать время (без часового пояса).
В зависимости от поддержки браузера в поле ввода может отображаться средство выбора времени.
Пример
<форма>
Выберите время:
Попробуйте сами »
Тип ввода: datetime
позволяет пользователю выбрать дату и время (с часовым поясом).
Пример
<форма>
День рождения (дата и время):
Попробуйте сами »
Тип ввода datetime удален из стандарта HTML. Использовать локальную дату и время
вместо. |
Тип ввода: datetime-local
позволяет пользователю выбрать дату и время (без часового пояса).
В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.
Пример
<форма>
День рождения (дата и время):
Попробуйте сами »
Тип ввода: электронная почта
используется для полей ввода, которые должны содержать адрес электронной почты.
В зависимости от поддержки браузера адрес электронной почты может автоматически проверяться при отправке.
Некоторые смартфоны распознают тип электронной почты и добавляют «.com» к клавиатуре, чтобы соответствовать вводу электронной почты.
Пример
<форма>
Электронная почта:
Попробуйте сами »
Тип ввода: поиск
используется для полей поиска (поле поиска ведет себя как обычное текстовое поле).