Input field: : The Input (Form Input) element — HTML: HyperText Markup Language

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

Тег ввода HTML

❮ Назад Полный справочник HTML Далее ❯


Пример

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



 



 



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

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

Тег указывает поле ввода, в которое пользователь может вводить данные .

Элемент является самым важный элемент формы.

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

Существуют следующие типы ввода:

  • <тип ввода = "кнопка">
  • <тип ввода="дата">
  • <тип ввода = "файл">
  • <тип ввода="скрытый">
  • <тип ввода="месяц">
  • <тип ввода="число">
  • <тип ввода="пароль">
  • <тип ввода="диапазон">
  • <тип ввода="сброс">
  • (значение по умолчанию)
  • <тип ввода="время">
  • <тип ввода="неделя">

Посмотрите на атрибут type, чтобы увидеть примеры для каждого типа ввода!

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

Совет: Всегда используйте тег

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

Элемент
<ввод> Да Да Да Да Да

Атрибуты

Отправить
TEL
TEX

URL
неделя.
Атрибут Значение Описание
принять file_extension
audio/*
video/*
image/*
media_type 		Указывает фильтр для типов файлов, которые пользователь может выбрать из файла. диалоговое окно ввода (только для type=»file»)
альтернативный текст Указывает альтернативный текст для изображений (только для type=»image»)
автозаполнение на
на		 Указывает, должно ли быть включено автозаполнение для элемента
автофокус автофокус Указывает, что элемент должен автоматически получать фокус при загрузке страницы
проверено проверено Указывает, что элемент должен быть предварительно выбран при загрузке страницы (для type=»checkbox» или type=»radio»)
имя каталога имя ввода .
дир		 Указывает, что будет отправлено направление текста
инвалид отключен Указывает, что элемент должен быть отключен
форма form_id Задает форму, к которой принадлежит элемент
формация URL-адрес Указывает URL-адрес файла, который будет обрабатывать элемент управления вводом при отправке формы (для type=»submit» и type=»image»)
тип формы application/x-www-form-urlencoded
multipart/form-data
text/plain		 Указывает, как данные формы должны быть закодированы при отправке на сервер (для type=»submit» и type=»image»)
метод формы получить
пост		 Определяет метод HTTP для отправки данных на URL-адрес действия (для type=»submit» и type=»image»)
формировать формановация Определяет, что элементы формы не должны проверяться при отправке
целевая форма _blank
_self
_parent
_top
имя кадра 		Указывает, где отображать ответ, полученный после отправки формы (для type=»submit» и type=»image»)
высота пикселей Задает высоту элемента (только для type=»image»)
список datalist_id Относится к элементу , который содержит предопределенные параметры для элемента
макс. номер
дата 		Задает максимальное значение для элемента
максимальная длина номер Указывает максимально допустимое количество символов в элементе
мин номер
дата 		Указывает минимальное значение для элемента
минимальная длина номер Задает минимальное количество символов, необходимое в элементе
несколько несколько Указывает, что пользователь может ввести более одного значения в элемент
имя текст Указывает имя элемента
узор регулярное выражение Указывает регулярное выражение, по которому проверяется значение элемента
заполнитель текст Задает короткую подсказку, описывающую ожидаемое значение элемента
только чтение только для чтения Указывает, что поле ввода доступно только для чтения
требуется требуется Указывает, что поле ввода должно быть заполнено перед отправкой формы
размер номер Указывает ширину в символах элемента
источник URL-адрес Указывает URL-адрес изображения для использования в качестве кнопки отправки (только для тип = «изображение»)
шаг номер
любой		 Задает интервал между допустимыми числами в поле ввода
тип кнопка
Флажок
Color
Дата
DateTime-Local
Электронная почта
Файл
Hidden
Изображение
месяц
Номер
Пароль
Радио
Диапазон
Reset
Поиск
Отправить
TEL
Текст

URL
неделя		 Задает тип элемента для отображения
значение текст Задает значение элемента
 
ширина пикселей Задает ширину элемента (только для type=»image»)

Глобальные атрибуты

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

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

Связанные страницы

Учебник HTML:

  • HTML-формы
  • HTML-элементы формы
  • Типы ввода HTML
  • Атрибуты ввода HTML
  • Форма ввода HTML* Атрибуты

Ссылка HTML DOM:

  • Объект кнопки ввода
  • Объект флажка ввода
  • Объект ввода цвета
  • Объект ввода даты
  • Объект ввода даты и времени
  • Входной объект DatetimeLocal
  • Объект ввода электронной почты
  • Входной объект FileUpload
  • Вход Поиск предметов
  • Объект входного изображения
  • Ввод объекта месяца
  • Объект ввода номера
  • Объект ввода пароля
  • Объект диапазона ввода
  • Входной радиообъект
  • Объект сброса ввода
  • Входной объект поиска
  • Ввод объекта отправки
  • Объект ввода текста
  • Объект времени ввода
  • Объект ввода URL
  • Объект недели ввода

Настройки CSS по умолчанию

Нет.

❮ Предыдущий Полный справочник HTML Далее ❯


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

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

Основные ссылки
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

1 Top2 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Как сделать Примеры
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Шаблон ввода HTML Атрибут

❮ HTML-тег

Пример

HTML-форма с полем ввода, которое может содержать только три буквы (без цифр или специальных символов):


 
    pattern=»[А-За-Я]{3}» title=»Трехбуквенный код страны»>


 

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

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

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

Атрибут шаблона задает регулярное выражение, которое значение элемента проверяется на соответствие при подаче формы.

Примечание: Атрибут шаблона работает со следующими типами ввода: текст, дата, поиск, URL, телефон, электронная почта и пароль.

Совет: Используйте глобальный атрибут title для описания шаблона, чтобы помочь пользователю.

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

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую атрибут.

Атрибут
шаблон 5,0 10,0 4,0 10,1 9,6

Синтаксис

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

Значение Описание
регулярное выражение Указывает регулярное выражение, по которому проверяется значение элемента

Дополнительные примеры

Пример

Элемент с type=»password», который должен содержать 8 или более символов:

php»>
 
    pattern=».{8,}» title=»Восемь или более символов»>


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

Пример

Элемент с type=»password», который должен содержать 8 или более символов, состоящих как минимум из одной цифры и одной прописной и строчная буква:


 
  pattern=»(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}»
  title =»Должен содержать как минимум одну цифру, одну прописную и строчную буквы и не менее 8 символов»>
 

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

Пример

Элемент с type=»email», который должен быть в следующем порядок: символ @ символ . домен (символы за которым следует знак @, за которым следуют другие символы, а затем «. »

После «.» знак, добавьте не менее 2 букв от a до z:


 
    pattern=»[a-z0-9._%+-]+@[a-z0-9. -]+\.[a-z]{2,}$»>
 

9’\x22]+» title=»Invalid input»>
 

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

Пример

Элемент с type=»url» который должен начинаться с http:// или https://, за которым следует хотя бы один символ:


 
    pattern=»https?://.+» title=»Включить http://»>


Попробуйте самостоятельно »

❮ HTML Tag


Новый

Мы только что запустили
W3Schools Videos

.

КОД ИГРЫ

Играть в игру

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

Основные ссылки
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

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

FORUM | О

W3Schools оптимизирован для обучения и обучения.

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

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