Type input select: : The HTML Select element — HTML: HyperText Markup Language

Содержание

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.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

Возвращает или задает коллекцию дополнительных атрибутов, которые будут применены к созданному элементу.

(Унаследовано от InputBase<TValue>)
ChildContent

Возвращает или задает дочернее содержимое для отрисовки внутри элемента select.

CssClass

Возвращает строку класса CSS, объединяющую атрибут класса и строку, указывающую состояние редактируемого поля (сочетание «изменено», «допустимо» и «недопустимо»). Производные компоненты обычно должны использовать это значение для атрибута класса основного HTML-элемента.

(Унаследовано от InputBase<TValue>)
CurrentValue

Возвращает или задает текущее значение входных данных.

(Унаследовано от InputBase<TValue>)
CurrentValueAsString

Возвращает или задает текущее значение входных данных, представленное в виде строки.

(Унаследовано от InputBase<TValue>)
DisplayName

Возвращает или задает отображаемое имя для этого поля.

Это значение используется при создании сообщений об ошибках, если входное значение не удалось правильно проанализировать.

(Унаследовано от InputBase<TValue>)
EditContext

Возвращает связанный EditContextобъект . Это свойство неинициализировано, если входные данные не имеют родительского EditFormэлемента.

(Унаследовано от InputBase<TValue>)
Element

Возвращает или задает выборкуElementReference.

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

FieldIdentifier

FieldIdentifier Возвращает привязанное значение.

(Унаследовано от InputBase<TValue>)
Value

Возвращает или задает значение входных данных. Это следует использовать с двусторонней привязкой.

(Унаследовано от InputBase<TValue>)
ValueChanged

Возвращает или задает обратный вызов, который обновляет связанное значение.

(Унаследовано от InputBase<TValue>)
ValueExpression

Возвращает или задает выражение, определяющее связанное значение.

(Унаследовано от InputBase<TValue>)

Методы

BuildRenderTree(RenderTreeBuilder)

Отрисовывает компонент в предоставленном объекте RenderTreeBuilder.

Dispose(Boolean) (Унаследовано от InputBase<TValue>)
FormatValueAsString(T)

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

(Унаследовано от InputBase<TValue>)
FormatValueAsString(TValue) System.Object.FormatValueAsString(`0)
InvokeAsync(Action)

Выполняет предоставленный рабочий элемент в контексте синхронизации связанного отрисовщика.

(Унаследовано от ComponentBase)
InvokeAsync(Func<Task>)

Выполняет предоставленный рабочий элемент в контексте синхронизации связанного отрисовщика.

(Унаследовано от ComponentBase)
OnAfterRender(Boolean)

Метод вызывается после каждого отрисовки компонента.

(Унаследовано от ComponentBase)
OnAfterRenderAsync(Boolean)

Метод вызывается после каждого отрисовки компонента. Обратите внимание, что компонент не выполняет автоматическую отрисовку после завершения возвращаемого Taskзначения, так как это приведет к бесконечному циклу отрисовки.

(Унаследовано от ComponentBase)
OnInitialized()

Метод вызывается, когда компонент готов к запуску, получив свои начальные параметры от родительского элемента в дереве отрисовки.

(Унаследовано от ComponentBase)
OnInitializedAsync()

Метод вызывается, когда компонент готов к запуску, получив свои начальные параметры от родительского элемента в дереве отрисовки.

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

(Унаследовано от ComponentBase)
OnParametersSet()

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

(Унаследовано от ComponentBase)
OnParametersSetAsync()

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

(Унаследовано от ComponentBase)
SetParametersAsync(ParameterView)

Задает параметры, предоставляемые родительским элементом компонента в дереве отрисовки.

(Унаследовано от InputBase<TValue>)
ShouldRender()

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

(Унаследовано от ComponentBase)
StateHasChanged()

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

(Унаследовано от ComponentBase)
TryParseValueFromString(String, T, String)

Анализирует строку для создания экземпляра T. Производные классы могут переопределить это, чтобы изменить CurrentValueAsString способ интерпретации входящих значений.

Явные реализации интерфейса

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

        определяет кнопку для отправки ввод формы в обработчик формы .

        Обработчик формы обычно представляет собой серверную страницу со сценарием для обработки входные данные.

        Обработчик формы указан в атрибуте действия формы:

        Пример


          Имя:

         

          Фамилия:

         


         

        Попробуйте сами »

        Вот как приведенный выше HTML-код будет отображаться в браузере:

        Имя:

        Фамилия:


        Если вы опустите атрибут value кнопки отправки, кнопка получит текст по умолчанию:

        Пример


          Имя:

         

          Фамилия:

         


         

        Попробуйте сами »


        Тип ввода: радио

        определяет переключатель .

        Радиокнопки позволяют пользователю выберите ТОЛЬКО ОДИН из ограниченного числа вариантов:

        Пример


          Мужской

          Женский

          <ввод тип = "радио" имя = "пол" значение = "другое"> Другое

        Попробуйте сами »

        Вот как приведенный выше HTML-код будет отображаться в браузере:

        Мужской
        Женский
        Другой


        Тип ввода: флажок

        определяет флажок .

        Флажки позволяют пользователю выбирать НОЛЬ или БОЛЬШЕ вариантов из ограниченного числа вариантов.

        Пример


          У меня есть велосипед

        У меня есть машина

        Попробуйте сами »

        Вот как приведенный выше HTML-код будет отображаться в браузере:

        У меня есть велосипед
        У меня есть машина


        Тип ввода: кнопка

        определяет кнопку :

        Пример

        Попробуйте сами »

        Вот как приведенный выше HTML-код будет отображаться в браузере:



        Типы ввода HTML5

        HTML5 добавлено несколько новых типы ввода:

        • цвет
        • Дата
        • дата-время
        • дата-время-местный
        • электронная почта
        • месяц
        • номер
        • диапазон
        • поиск
        • тел
        • время
        • адрес
        • неделя

        Типы ввода, не поддерживаемые старыми веб-браузерами, будут вести себя как текст.


        Тип ввода: число

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

        Вы можете установить ограничения на номера.

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

        Пример

        <форма>
        Количество (от 1 до 5):
         

        Попробуйте сами »


        Ограничения ввода

        Вот список некоторых общих ограничений ввода (некоторые новые в HTML5):

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

        Вы узнаете больше об ограничениях ввода в следующей главе.

        Пример

        <форма>
          Количество:

        Попробуйте сами »


        Тип ввода: дата

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

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

        Пример

        <форма>
        День рождения:
         

        Попробуйте сами »

        Вы можете добавить ограничения на ввод:

        Пример


          Введите дату до 1980-01-01:
         

          Введите дату после 01.01.2000:
         

        Попробуйте сами »


        Тип ввода: цвет

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

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

        Пример

        <форма>
        Выберите свой любимый цвет:
         

        Попробуйте сами »


        Тип ввода: диапазон

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

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

        Пример

        <форма>

        Попробуйте сами »

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


        Тип ввода: месяц

        позволяет пользователю выбрать месяц и год.

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

        Пример

        <форма>
        День рождения (месяц и год):
         

        Попробуйте сами »


        Тип ввода: неделя

        Параметр позволяет пользователю выбрать неделю и год.

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

        Пример

        <форма>
        Выберите неделю:
         

        Попробуйте сами »


        Тип ввода: время

        позволяет пользователю выбрать время (без часового пояса).

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

        Пример

        <форма>
        Выберите время:
         

        Попробуйте сами »


        Тип ввода: datetime

        позволяет пользователю выбрать дату и время (с часовым поясом).

        Пример

        <форма>
        День рождения (дата и время):
         

        Попробуйте сами »

        Тип ввода datetime удален из стандарта HTML. Использовать локальную дату и время вместо.

        Тип ввода: datetime-local

        позволяет пользователю выбрать дату и время (без часового пояса).

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

        Пример

        <форма>
        День рождения (дата и время):
         

        Попробуйте сами »


        Тип ввода: электронная почта

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

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

        Некоторые смартфоны распознают тип электронной почты и добавляют «.com» к клавиатуре, чтобы соответствовать вводу электронной почты.

        Пример

        <форма>
        Электронная почта:
         

        Попробуйте сами »


        Тип ввода: поиск

        используется для полей поиска (поле поиска ведет себя как обычное текстовое поле).

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *