Поле ввода html: Тег HTML поле для ввода, кнопка

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

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

Атрибут type указывает тип отображаемого элемента .

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

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

Синтаксис

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

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

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

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

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

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

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


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


У меня есть лодка

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

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

Выберите ваш любимый цвет:

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

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

Birthday:

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

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

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

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

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

Введите адрес электронной почты:

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

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

Выберите файл:

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

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

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

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

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

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

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

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

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

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

<метка для = "количество"> Количество (от 1 до 5):
<тип ввода = "число" имя = "количество" min = "1" max = "5">

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

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

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

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

Пароль:

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

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

Male


Female


<метка для = "другое"> Другие

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

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

Volume (от 0 до 50):

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

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

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

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

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

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

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

Поиск в Google:

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

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

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

Введите свой номер телефона:

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

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

Имя:


Фамилия:

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

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

Выберите время:

Тип ввода: URL

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

Добавьте свою домашнюю страницу:

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

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

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

Выберите неделю:

- Веб-технология для разработчиков

элементов типа текст создают основные однострочные текстовые поля.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.

Значение

Атрибут value - это DOMString , который содержит текущее значение текста, введенного в текстовое поле.Вы можете получить это, используя свойство value в JavaScript.

 let theText = myTextInput.value;
 

Если для входных данных нет ограничений проверки (см. Подробности в разделе Проверка), значение может быть пустой строкой ("").

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

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

список

Значения атрибута списка - это идентификатор элемента , расположенного в том же документе. предоставляет список предопределенных значений, чтобы предложить пользователю для этого ввода. Любые значения в списке, которые не совместимы с , тип , не включены в предлагаемые параметры. Предоставленные значения являются предложениями, а не требованиями: пользователи могут выбирать из этого предварительно определенного списка или предоставлять другое значение.

maxlength

Максимальное количество символов (в единицах кода UTF-16), которое пользователь может ввести при вводе текста .Это должно быть целочисленное значение 0 или выше. Если максимальная длина не указана или указано недопустимое значение, ввод текста не имеет максимальной длины. Это значение также должно быть больше или равно значению minlength .

Входные данные не пройдут проверку ограничения, если длина текстового значения поля больше maxlength кодовых единиц UTF-16. Проверка ограничений применяется только тогда, когда значение изменяется пользователем.

minlength

Минимальное количество символов (в единицах кода UTF-16), которое пользователь может ввести при вводе текста . Это должно быть неотрицательное целочисленное значение, меньшее или равное значению, указанному maxlength . Если минимальная длина не указана или указано недопустимое значение, ввод текста не имеет минимальной длины.

Входные данные не пройдут проверку ограничения, если длина текста, введенного в поле, меньше минут длины кодовых единиц UTF-16.Проверка ограничений применяется только тогда, когда значение изменяется пользователем.

шаблон

Атрибут шаблона , если он указан, является регулярным выражением, которому значение входа должно соответствовать , чтобы значение прошло проверку ограничения. Это должно быть допустимое регулярное выражение JavaScript, используемое типом RegExp и задокументированное в нашем руководстве по регулярным выражениям; флаг 'u' указывается при компиляции регулярного выражения, чтобы шаблон обрабатывался как последовательность кодовых точек Unicode, а не как ASCII.Вокруг текста шаблона нельзя указывать косую черту.

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

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

См. Определение шаблона для получения дополнительной информации и примера.

заполнитель

Атрибут-заполнитель - это строка, которая дает пользователю краткую подсказку о том, какая информация ожидается в поле. Это должно быть слово или короткая фраза, которая демонстрирует ожидаемый тип данных, а не пояснительное сообщение. Текст не должен содержать , включая возврат каретки или перевод строки.

Если содержимое элемента управления имеет одну направленность (LTR или RTL), но необходимо представить заполнитель в противоположной направленности, можно использовать символы форматирования двунаправленного алгоритма Unicode для переопределения направленности в заполнителе; см. Переопределение BiDi с использованием управляющих символов Unicode в Двунаправленном текстовом алгоритме Unicode для этих символов.

только для чтения

Логический атрибут, который, если присутствует, означает, что это поле не может быть отредактировано пользователем. Его значение , однако, все еще может быть изменено с помощью кода JavaScript, напрямую устанавливающего свойство HTMLInputElement.value .

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

размер

Атрибут size - это числовое значение, указывающее, сколько символов должно быть в ширине поля ввода.Значение должно быть числом больше нуля, а значение по умолчанию равно 20. Поскольку ширина символов различается, это может быть или не быть точным, и на него нельзя полагаться; результирующий ввод может быть уже или шире, чем указанное количество символов, в зависимости от символов и шрифта (используются настройки font ).

Это означает, что , а не , устанавливает ограничение на количество символов, которое пользователь может ввести в поле. Это только указывает приблизительно, сколько можно увидеть за один раз.Чтобы установить верхний предел длины входных данных, используйте атрибут maxlength .

проверка орфографии

проверка орфографии - это глобальный атрибут, который используется для указания, следует ли включить проверку орфографии для элемента. Его можно использовать с любым редактируемым содержимым, но здесь мы рассмотрим особенности, связанные с использованием проверки орфографии на элементов. Допустимые значения для проверки орфографии :

ложь

Отключить проверку орфографии для этого элемента.

правда

Включить проверку орфографии для этого элемента.

"" (пустая строка) или без значения

Следуйте стандартному поведению элемента для проверки правописания. Это может быть основано на параметре проверки орфографии родителей или других факторах.

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

Значение, возвращаемое чтением Проверка орфографии , может не отражать фактическое состояние проверки орфографии в элементе управления, если настройки пользовательского агента переопределяют настройку.

Нестандартные атрибуты

Следующие нестандартные атрибуты также доступны в некоторых браузерах. Как правило, вы должны избегать их использования, если это не помогло.

автозамена

Расширение Safari, автозамена , атрибут - это строка, которая указывает, активировать или нет автоматическое исправление, когда пользователь редактирует это поле. Допустимые значения:

по

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

от

Отключить автоматическое исправление и подстановку текста.

mozactionhint

Расширение Mozilla, поддерживаемое Firefox для Android, которое дает подсказку о том, какие действия будут предприняты, если пользователь нажимает клавиши Enter или Return при редактировании поля. Эта информация используется для определения того, какую метку использовать на клавиатуре Ввод на виртуальной клавиатуре.

Допустимые значения: - , - , - , - поиск и - отправка . С помощью этой подсказки браузер решает, какую метку поставить на клавишу ввода.

Использование текстового ввода

элементов типа text создают базовые однострочные вводы. Вы должны использовать их везде, где вы хотите, чтобы пользователь вводил однострочное значение, и нет более конкретного типа ввода, доступного для сбора этого значения (например, если это дата, URL, электронная почта или поисковый запрос, вы у меня есть лучшие варианты доступны).

Базовый пример

 <форма>
  

     Выберите имя пользователя: 
    
  
  

    Кнопка <> Отправить 
  
 

Это выглядит так:

После отправки пара данных имя / значение, отправляемая на сервер, будет uname = Chris (если перед отправкой в ​​качестве входного значения был введен «Chris»). Не забудьте включить атрибут name в элемент , иначе значение текстового поля не будет включено в отправленные данные.

Настройка заполнителей

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

 <форма>
  

     Выберите имя пользователя: 
    
  
  

    Кнопка <> Отправить 
  
 

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

Заполнитель обычно отображается более светлым цветом, чем цвет переднего плана элемента, и автоматически исчезает, когда пользователь начинает вводить текст в поле (или всякий раз, когда поле имеет значение, установленное программно, путем установки его атрибута value .

Физический размер элемента ввода

Физический размер поля ввода можно контролировать с помощью атрибута размера . С его помощью вы можете указать количество символов, которое текстовый ввод может отображать одновременно. Это влияет на ширину элемента, позволяя указать ширину в виде символов, а не пикселей. Например, в этом примере ввод имеет ширину 30 символов:

 <форма>
  

     Выберите имя пользователя: 
    
  
  

    Кнопка <> Отправить 
  
 

Валидация

элементов типа text к ним не применена автоматическая проверка (поскольку базовый ввод текста должен быть способен принимать любую произвольную строку), но есть некоторые доступные варианты проверки на стороне клиента, которые мы ' обсудим ниже.

Примечание : проверка формы HTML - это , а не вместо серверных сценариев, которые гарантируют, что введенные данные находятся в правильном формате. Для кого-то слишком легко вносить изменения в HTML, которые позволяют ему обойти проверку или полностью ее удалить. Кроме того, кто-то может просто полностью обойти ваш HTML и отправить данные непосредственно на ваш сервер. Если ваш код на стороне сервера не может проверить полученные данные, может произойти авария, если в вашу базу данных будут введены неправильно отформатированные данные (или данные слишком большого размера, неправильного типа и т. Д.).

Записка по стайлингу

Существуют полезные псевдоклассы, доступные для стилизации элементов формы, чтобы помочь пользователю увидеть, когда их значения действительны или недействительны. Это : действительный и : недействительный . В этом разделе мы будем использовать следующий CSS, который будет ставить галочку (тик) рядом со входами, содержащими допустимые значения, и крестиком (X) рядом со входами, содержащими недопустимые значения.

 div {
  нижнее поле: 10 пикселей;
  положение: относительное;
}

input + span {
  отступ справа: 30 пикселей;
}

ввод: неверный + диапазон: после {
  положение: абсолютное; содержание: «✖»;
  отступ слева: 5 пикселей;
}

вход: действительный + диапазон: после {
  положение: абсолютное;
  содержание: «✓»;
  отступ слева: 5 пикселей;
} 

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

Требуется ввод

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

 <форма>
  

     Выберите имя пользователя: 
    
     
  
  

    Кнопка <> Отправить 
  
 

 div {margin-bottom: 10px; положение: относительное; } input + span {padding-right: 30px; } ввод: неверный + диапазон: после {позиция: абсолютная; содержание: «✖»; отступ слева: 5 пикселей; } input: valid + span: after {position: absolute; содержание: «✓»; отступ слева: 5 пикселей; } 

Это выглядит так:

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

Длина входного значения

Можно указать минимальную длину (в символах) для введенного значения с помощью атрибута minlength ; аналогично, используйте maxlength , чтобы установить максимальную длину введенного значения в символах.

В приведенном ниже примере требуется, чтобы введенное значение было длиной 4–8 символов.

 <форма>
  

     Выберите имя пользователя: 
    
     
  
  

    Кнопка <> Отправить 
  
 

 div {margin-bottom: 10px; положение: относительное; } input + span {padding-right: 30px; } ввод: неверный + диапазон: после {позиция: абсолютная; содержание: «✖»; отступ слева: 5 пикселей; } input: valid + span: after {position: absolute; содержание: «✓»; отступ слева: 5 пикселей; } 

Это выглядит так:

Если вы попытаетесь отправить форму длиной менее 4 символов, вам будет выдано соответствующее сообщение об ошибке (которое отличается в разных браузерах).Если вы попытаетесь ввести более 8 символов, браузер не позволит вам.

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

Указание шаблона

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

В приведенном ниже примере значение ограничено 4-8 символами и требует, чтобы оно содержало только строчные буквы.

 <форма>
  

     Выберите имя пользователя: 
    
     
    
 Имена пользователей должны быть в нижнем регистре и иметь длину 4-8 символов. 
  
  

    Кнопка <> Отправить 
  
 

 div {
  нижнее поле: 10 пикселей;
  положение: относительное;
}

п {
  размер шрифта: 80%;
  цвет: # 999;
}

input + span {
  отступ справа: 30 пикселей;
}

ввод: неверный + диапазон: после {
  положение: абсолютное;
  содержание: «✖»;
  отступ слева: 5 пикселей;
}

вход: действительный + диапазон: после {
  положение: абсолютное;
  содержание: «✓»;
  отступ слева: 5 пикселей;
} 

Это выглядит так:

Примеры

Хорошие примеры текстового ввода, использованного в контексте, вы можете увидеть в нашей первой HTML-форме и в разделе Как структурировать статьи в HTML-форме.

Технические характеристики

Совместимость браузера