Javascript type input: : The Input (Form Input) element — HTML: HyperText Markup Language

Leave a Comment / Разное / By /

Тип ввода HTML Атрибут

❮ Тег HTML

Пример

HTML-форма с двумя полями ввода; одно текстовое поле и одна кнопка отправки:



 


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

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Атрибут type определяет тип элемент для отображения.

Если атрибут типа не указан, по умолчанию используется тип «текст».

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

Атрибут
тип Да Да Да Да Да

Синтаксис

Значения атрибутов

Значение Описание
кнопка Определяет нажимаемую кнопку (в основном используется с JavaScript для активации скрипта)
флажок Определяет флажок
цвет Определяет палитру цветов
дата Определяет элемент управления датой (год, месяц, день (без времени))
дата-время местное Определяет элемент управления датой и временем (год, месяц, день, время (без часового пояса)
электронная почта Определяет поле для адреса электронной почты
файл Определяет поле выбора файла и кнопку «Обзор» (для загрузки файлов)
скрытый Определяет скрытое поле ввода
изображение Определяет изображение как кнопку отправки
месяц		 Определяет контроль месяца и года (без часового пояса)
номер Определяет поле для ввода числа
пароль Определяет поле пароля
радио Определяет переключатель
диапазон Определяет элемент управления диапазоном (например, ползунок)
сброс Определяет кнопку сброса
поиск Определяет текстовое поле для ввода строки поиска
отправить Определяет кнопку отправки
тел. Определяет поле для ввода телефонного номера
текст По умолчанию. Определяет однострочное текстовое поле
время Определяет элемент управления для ввода времени (без часового пояса)
адрес Определяет поле для ввода URL
неделя Определяет контроль недели и года (без часового пояса)

Другие примеры

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

Кнопка, активирующая JavaScript при нажатии:

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

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

Флажки позволяют пользователю выбрать один или несколько вариантов из ограниченного числа вариантов:









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

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

Выберите цвет из палитры цветов:


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

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

Определение элемента управления датой:


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

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

Определение даты и времени (без часового пояса):


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

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

Определите поле для адреса электронной почты (будет автоматически подтверждено при отправке):


<тип ввода = "электронная почта" name="email">

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

Тип ввода: файл

Определите поле выбора файла и кнопку «Обзор. ..» (для загрузки файлов):


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

Тип ввода: скрыто

Определить скрытое поле (невидимое для пользователя).

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

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

Тип ввода: изображение

Определить изображение как кнопку отправки:

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

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

Определите контроль месяца и года (без часового пояса):


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

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

Определите поле для ввода числа (Вы также можете установить ограничения на то, какие числа принимаются):


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

Используйте следующие атрибуты для указания ограничений:

  • max — указывает максимально допустимое значение
  • мин — указывает минимально допустимое значение
    • Шаг
  • — указывает допустимые интервалы чисел
    • Значение
  • — указывает значение по умолчанию
    • .

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

Определите поле пароля (символы маскируются):


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

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

Радиокнопки позволяют пользователю выбрать только один из ограниченного числа вариантов:


<метка for="html">HTML





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

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

Определите элемент управления для ввода числа, точное значение которого не важно (например, ползунок). Диапазон по умолчанию — от 0 до 100. Однако вы можете установить ограничения на то, что числа принимаются с атрибутами min, max и step:


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

Используйте следующие атрибуты для указания ограничений:

  • max — указывает максимально допустимое значение
  • мин — указывает минимально допустимое значение
    • Шаг
  • — указывает допустимые интервалы чисел
    • Значение
  • — указывает значение по умолчанию
    • .

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

Определите кнопку сброса (сбрасывает все значения формы к значениям по умолчанию):

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

Совет: Используйте кнопку сброса осторожно! Это может раздражать пользователей, которые случайно нажимают кнопку сброса.

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

Определение поля поиска (например, поиск по сайту или поиск Google):


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

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

Определите кнопку отправки:

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

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

Определите поле для ввода телефона номер:


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

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

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





<тип ввода = "текст" name="lname">

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

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

Определите элемент управления для ввода времени (без часового пояса):


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

Тип ввода: URL

Определить поле для ввода URL:


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

Совет: Safari на iPhone распознает тип ввода URL и изменяет экранную клавиатуру в соответствии с ним (добавляет параметр . com).

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

Определить контроль недели и года (без часового пояса):


<тип ввода="неделя" name="week">

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

❮ Тег HTML


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

53 HTML Reference


CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

5 Top3 Examples Примеры HTML

Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS.

javascript — типы ввода в интерфейсе Typescript

спросил

Изменено 1 год, 1 месяц назад

Просмотрено 28 тысяч раз

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

В настоящее время у меня есть это:

 type InputBaseProps = {
  дети?: ReactChild;
  имя_класса?: строка;
  идентификатор: строка;
  метка?: строка;
  имя?: строка;
  onBlur: (событие: ChangeEvent) => недействительным;
  onChange: (событие: ChangeEvent) => недействительно;
  заполнитель?: строка;
  стиль?: CSSProperties;
  тип: ????;
  значение?: строка;
};

Я хочу разрешить только допустимые типы HTML , как и весь список, определенный здесь https://www.w3schools.com/tags/att_input_type.asp

Есть ли простой способ сделать это?

  • javascript
  • html
  • машинописный текст
 импорт {HTMLInputTypeAttribute} из "реагировать";
введите InputBaseProps = {
    тип?: HTMLInputTypeAttribute
}

HTMLInputTypeAttribute разрешается в ff:

 type HTMLInputTypeAttribute = "number" | "поиск" | "кнопка" | "время" | "изображение" | "текст" | "флажок" | "цвет" | "дата" | "дата-время-местный" | "электронная почта" | "файл" | "скрытый" | "месяц" | "пароль" | "радио" | "диапазон" | . .. еще 5 ... | (нить & {})

IntelliSense работает нормально.

0

Да просто ставишь | между всеми типами, которые вы хотите. Например, это будет так:

«кнопка» | «флажок» | «цвет» | «дата» | «дата-время-местный» | «электронная почта» | «файл» | «скрытый» | «изображение» | «месяц» | «число» | «пароль» | «радио» | «диапазон» | «сброс» | «поиск» | «отправить» | «тел» | «текст» | «время» | «адрес» | «week»

Все они были взяты со страницы w3schools, которую вы указали

Пожалуйста, примите это, если это соответствует вашим потребностям

5

Вот как вы должны это делать:

 interface Props extends React.InputHTMLAttributes {
  //...добавьте сюда свои пользовательские типы
}

Создать экспортируемое перечисление … 

 экспортировать перечисление InputType {
    кнопка = "кнопка",
    флажок = "флажок",
    цвет = "цвет",
    дата = "дата",
    datetimelocal = "дата-время-местный",
    электронная почта = "электронная почта",
    файл = "файл",
    скрытый = "скрытый",
    изображение = "изображение",
    месяц = ​​"месяц",
    число = "число",
    пароль = "пароль",
    радио = "радио",
    диапазон = "диапазон",
   сброс = "сброс",
    поиск = "поиск",
    отправить = "отправить",
    тел = "тел",
    текст = "текст",
    время = "время",
    адрес = "адрес",
    неделя = "неделя"
};

Тогда вы можете сделать .

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

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