Field html: Тег | htmlbook.ru

Leave a Comment / Html / By /

HTML тег

❮ Назад Вперед ❯

Тег <input> используется в пределах элемента <form>, определяя поля для ввода информации пользователем. Тип поля (текст, радиокнопка, флажок, поле для ввода пароля и т.д.) определяется значением атрибута type. Для связывания текста с определенным элементом используется тег <label>, который устанавливает для него текстовую метку.

Тег <input> одиночный, закрывающий тег не требуется. (В XHTML закрывающий <input/> тег обязателен). Тег не содержит текстовой контент, только атрибуты.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <form action="getform.php" method="get">
      Имя: <input type="text" name="first_name" />
      Фамилия: <input type="text" name="last_name" />
      E-Mail: <input type="email" name="user_email" />
      <input type="submit" value="Отправить" />
    </form>
  </body>
</html>

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

Результат

Основным атрибутом, определяющим тип поля ввода, является type. Если атрибут отсутствует, то значением по умолчанию является “text”.

Тег <input> также поддерживает глобальные атрибуты и атрибуты событий.

Как добавить стиль к тегу <input> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <input>:

  • CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
  • CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
  • CSS свойство font-size задает размер щрифта.
  • CSS свойство font-weight устанавливает насыщенность шрифта.
  • CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
  • CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега <input>:

  • CSS свойство color определяет цвет контента и оформления текста.
  • CSS свойство background-color устанавливает фоновый цвет элемента.

Стили форматирования текста для тега <input>:

  • CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
  • CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
  • CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
  • CSS свойство word-break указывает перенос строки.

Другие свойства для тега <input>:

  • CSS свойство text-shadow добавляет тень к тексту.
  • CSS свойство text-align-last выравнивает последнюю строку текста.
  • CSS свойство line-height устанавливает межстрочный интервал.
  • CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
  • CSS свойство word-spacing устанавливает расстояние между словами в тексте.

Тег input — поле ввода

Тег input создает различные элементы HTML формы: обычное поле ввода, поле для ввода пароля, флажок checkbox (чекбокс), радио кнопочки (radio), кнопку.

Тег input должен лежать внутри тега form. Это не обязательно, необходимо для отправки данных на сервер и последующей их обработки через PHP.

Не требует закрывающего тега.

Атрибуты

АтрибутОписание
typeЗадает тип поля ввода. Варианты см. ниже.
value Значение по умолчанию в поле ввода. В случае с кнопкой задает ее текст. Подробнее см. атрибут value.
placeholder Подсказка в поле ввода, подробнее см. атрибут placeholder.
name
 Имя поля ввода. Нужно для того, чтобы достать данные поля ввода в PHP. Для корректной работы формы имена полей ввода не должны совпадать друг с другом (в одной форме). Если они совпадают — в PHP придут данные того поля ввода, которое ниже в HTML коде.
disabled Блокирует элемент формы (не только input, а практически любой), подробнее см. атрибут disabled.

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

ЗначениеОписание
text Создает обычное текстовое поле ввода.
password Создает текстовое поле ввода для пароля. Попробуйте вбить в него текст — он отобразится звездочками.
checkbox Создает флажок чекбокс. Подробнее см. checkbox
.
radio Создает радио переключатель. Подробнее см. radio.
hidden Создает скрытый инпут, который не будет виден на экране, но будет отправлять содержащиеся в атрибуте value данные на сервер.
button Создает кнопку. Нажатие на эту кнопку не будет отправлять форму на сервер. Она может быть использована внутри ссылки или через JavaScript. По умолчанию кнопка не имеет текста (пример кнопки без текста: ), он задается с помощью value. См. также тег button, который также делает кнопку.
submit Создает кнопку, которая будет отправлять данные на сервер. Текст кнопки зависит от браузера, его можно сменить с помощью value
. См. также тег button, который также делает кнопку.
reset Создает кнопку, которая очищает заполненную форму. Текст кнопки зависит от браузера, его можно сменить с помощью value.
file Создает кнопку выбора файла. Дизайн этой кнопки запрещено менять через CSS (однако есть хитрые способы). Если вам требуется такое поле в форме, то тег form должен иметь атрибут enctype в значении multipart/form-data.

Новые в HTML5 значения атрибута type

Данные значения атрибута новые, появились только в HTML5, поэтому в некоторых браузерах они могут не работать или работать по-разному в разных браузерах.

В случае, если браузер не может понять содержимое атрибута type (например, если оно не поддерживается или ошибочно введено), он будет считать элемент обычным текстовым инпутом, как будто в в type стоит значение

text.

Посмотрите приведенные ниже примеры в разных браузерах. Попробуйте вводить в инпуты текст и нажать на кнопку отправки. Если текст некорректный или поле пустое — браузер выдаст ошибку. К примеру, если в поле с типом email вбить некорректный email — браузер не даст отправить форму и выдаст сообщение об ошибке (текст ошибки и ее внешний вид на html css менять нельзя). Если поле пустое — браузер тоже выдаст ошибку, это достигается с помощью атрибута required:

ЗначениеОписание
email
number
url
tel
search
color
date
month
week
datetime
datetime-local
range

Смотрите также

  • тег textarea,
    который создает многострочное поле ввода
  • атрибут pattern,
    который осуществляет валидацию полей

Форма ввода HTML* Атрибуты

❮ Предыдущая Далее ❯

В этой главе описываются различные атрибуты формы * для элемента HTML .

Атрибут формы

Ввод атрибут формы определяет форму элемент принадлежит.

Значение этого атрибута должно быть равно атрибуту id формы

элемент, которому он принадлежит.

Пример

Поле ввода, расположенное за пределами HTML-формы (но все же являющееся ее частью):


 
 





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

Атрибут formaction

Атрибут input formaction указывает URL-адрес файл, который будет обрабатывать ввод при отправке формы.

Примечание: Этот атрибут переопределяет атрибут . атрибут action элемента

.

Атрибут

formaction работает с следующие типы ввода: отправить и изображение.

Пример

HTML-форма с двумя кнопками отправки с разными действиями:


 
 



 


 

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

Атрибут formenctype

Атрибут input formenctype указывает, как данные формы должны быть закодированы при отправке (только для форм с method=»post»).

Примечание: Этот атрибут переопределяет атрибут enctype элемента

.

Атрибут formenctype работает с следующие типы ввода: отправить и изображение.

Пример

Форма с двумя кнопками отправки. Первый отправляет данные формы с кодировкой по умолчанию, второй отправляет данные формы, закодированные как «multipart/form-data»:


 
 



    value=»Отправить как Multipart/form-data»>

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

Атрибут formmethod

Вход 9Атрибут 0006 formmethod определяет метод HTTP для отправки данных формы на URL-адрес действия.

Примечание: Этот атрибут переопределяет атрибут метода элемента

.

Атрибут formmethod работает с следующие типы ввода: отправить и изображение.

Данные формы могут быть отправлены как переменные URL (method=»get») или как сообщение HTTP транзакция (метод=»сообщение»).

Примечания к методу «получить»:

  • Этот метод добавляет данные формы к URL-адресу в парах имя/значение
  • Этот метод полезен для отправки форм, когда пользователь хочет добавить закладку результат
  • Существует ограничение на объем данных, которые вы можете поместить в URL-адрес (зависит от браузеры), поэтому вы не можете быть уверены, что все данные формы будут правильно передано
  • Никогда не используйте метод get для передачи конфиденциальной информации! (пароль или другая конфиденциальная информация будет видна в адресной строке браузера)

Примечания к методу «post»:

  • Этот метод отправляет данные формы как почтовую транзакцию HTTP
  • Отправка формы с помощью метода «post» не может быть добавлена ​​в закладки
  • Метод «post» более надежен и безопасен, чем «get», а «post» не имеют ограничений по размеру

Пример

Форма с двумя кнопками отправки. Первый отправляет данные формы с метод = «получить». Второй отправляет данные формы с помощью метода = «post»:


 
 



 


 
 

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

Атрибут formtarget

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

Примечание: Этот атрибут переопределяет целевой атрибут элемента .

Атрибут formtarget работает с следующие типы ввода: отправить и изображение.

Пример

Форма с двумя кнопками отправки и разными целевыми окнами:


 
 



 


 

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

Атрибут formnovalidate

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

Примечание: Этот атрибут переопределяет атрибут novalidate формы

элемент.

Атрибут formnovalidate работает с следующие типы ввода: отправить.

Пример

Форма с двумя кнопками отправки (с проверкой и без):

php»>
 
 



    value=»Отправить без проверки»>

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

Атрибут novalidate

Атрибут novalidate является атрибутом

.

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

Пример

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


 
 


 

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

HTML-форма и элементы ввода

Тег Описание
<форма> Определяет форму HTML для пользовательского ввода
<ввод> Определяет элемент управления вводом

Полный список всех доступных тегов HTML см. в нашем справочнике по тегам HTML.

❮ Предыдущий Далее ❯


Тег ввода HTML

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


Пример

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



 



 



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

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

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

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

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

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

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

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

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

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

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

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

Атрибуты

Атрибут Значение Описание
принять 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-адрес изображения для использования в качестве кнопки отправки (только для тип = «изображение»)
шаг номер
любой		 Указывает интервал между допустимыми числами в поле ввода
тип кнопка
флажок
цвет
дата
datetime-local
адрес электронной почты
файл
скрытый
изображение
месяц
номер
пароль
радио
диапазон
сброс
поиск
отправить
тел
текст
время
URL
неделя		 Задает тип элемента для отображения
значение текст Задает значение элемента
 
ширина пикселей Задает ширину элемента (только для type=»image»)

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

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

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

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

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

HTML учебник:

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

Ссылка HTML DOM:

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

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

Нет.

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


ВЫБОР ЦВЕТА

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

Лучшие ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.

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

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