flexbe banner 468x60flexbe banner 728x90flexbe banner 930x180jivo banner 468x60jivo banner 728x90jivo banner 930x180kwork banner 468x60kwork banner 728x90kwork banner 930x180

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

Элемент <input> может варьироваться в зависимости от указанного атрибута type. От этого зависит как он будет выглядеть и как использоваться. Чаще всего его используют при создании полей ввода информации.

Тип:Inline
Контент:Нет. Это пустой элемент
Открывающий тег:Обязательный
Закрывающий тег:Запрещен
Версия:HTML 2, 3.2, 4, 4.01, 5

Синтаксис

Базовый синтаксис тега <input> выглядит следующим образом:

HTML: <input>; XHTML: <input />

Примеры написания кода тега <input>:

<form action="action.php" method="post">
    <label for="first-name">Имя:</label>
    <input type="text" name="first-name" id="first-name">
    <input type="submit" value="Отправить">
    <input type="reset" name="Сброс">
</form>
Используйте элемент HTML <label>, чтобы определить заголовки для элементов <input>. Это сделает форму более понятной для пользователя.

Специальные атрибуты тега

В следующей таблице приведены атрибуты, которые относятся к тегу <input>:

АтрибутЗначениеОписание
typebutton
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
Определяет тип элемента управления для создания. См. руководство по HTML Forms, HTML5 New Input Types, чтобы узнать больше об элементах управления вводом.
acceptfile-extension
content-type

audio/*
video/*
image/*
Определяет типы файлов, которые принимает сервер (только для type="file").
alignleft
right
top
middle
bottom
Определяет выравнивание входного изображения (для type="image").
alttextОпределяет альтернативный текст для использования, когда изображение недоступно (для type="image").
autocompleteon
off
Указывает, включена ли функция автозаполнения браузера для элемента <input>.
autofocusautofocusЭтот логический атрибут указывает, что элемент ввода должен автоматически получать фокус при загрузке документа.
checkedcheckedЭтот логический атрибут указывает, что элемент <input> выбран по умолчанию (для type="radio" или type="checkbox").
disableddisabledЭтот логический атрибут отключает элемент <input> для пользовательского ввода или взаимодействия.
formform-idОпределяет элемент <form>, с которой связан элемент <input>.
formactionURLОпределяет URL-адрес программы, которая обрабатывает информацию, представленную полем <input> (для type="submit" и type="image").
formenctypeapplication/x-www-form-urlencoded
multipart/form-data
text/plain
Указывает, как данные формы должны быть закодированы при отправке данных формы на сервер (для type="submit" и type="image").
formmethodget
post
Определяет метод HTTP, который браузер будет использовать для отправки данных формы (для type="submit" и type="image").
formnovalidateformnovalidateЭтот логический атрибут указывает, что элемент управления формы не должен проверяться при его отправке (для type="submit" и type="image").
formtarget_blank
_self
_parent
_top
Указывает цель для отображения ответа, полученного после отправки формы (для type="submit" и type="image")
heightpixelsОпределяет высоту изображения, отображаемого в виде кнопки (только для type="image").
listdatalist-idОтносится к списку предопределенных опций, предлагаемых пользователю. Значение должно быть id тега <datalist> на той же странице.
maxnumber
date-time
Определяет максимальное значение для элемента <input>, которое не должно быть меньше допустимого минимального значения min.
maxlengthnumberОпределяет максимальное количество символов, которое пользователь может ввести в поле <input>.
minnumber
date-time
Определяет минимальное значение для элемента <input>, которое не должно быть больше допустимого максимумального значения max.
minlengthnumberУказывает минимальное количество символов, обязательное для ввода пользователем в поле <input>.
multiplemultipleЭтот логический атрибут указывает, может ли пользователь ввести более одного значения.
nametextПрисваивает имя элементу <input>.
patternregexpОпределяет регулярное выражение, по которому проверяется значение элемента в поле <input>.
placeholdertextПредоставляет пользователю подсказку о том, что можно ввести в элемент <input>. Текст заполнителя не должен содержать разрывов строк.
readonlyreadonlyЭтот логический атрибут указывает, что пользователь не может изменить значение элемента <input>.
requiredrequiredЭтот логический атрибут указывает, что пользователь должен заполнить <input> перед отправкой формы.
sizenumberУстанавливает начальную ширину, в символах, элемента <input>. Если не указан, по умолчанию используется значение 20.
srcURLОпределяет расположение изображения для использования в качестве кнопки отправки (для type="image").
stepnumber
date-time
Работает с атрибутами min и max для ограничения приращений, с помощью которых можно установить числовое значение или значение даты-времени.
valuetextОпределяет начальное значение элемента <input>.
widthpixelsОпределяет ширину изображения, отображаемого в виде кнопки (только для type="image").

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

Как и все другие HTML-теги, тег <input> поддерживает все глобальные атрибуты в HTML5.

Атрибуты для событий

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

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

Тег <input> поддерживается во всех основных браузерах.

flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600jivo banner 480x320jivo banner 728x90jivo banner 120x600skillbox banner 480x320skillbox banner 728x90skillbox banner 120x600

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

HTML-тег <header>

Определяет заголовок документа или раздела

HTML-тег <base>

Определяет базовый URL для всех связанных объектов на странице

HTML-тег <menu>

Определяет список (или меню) сообщений, которые может выполнять пользователь