Пример
Простая форма HTML с двумя полями ввода и одной кнопкой отправки:<form action="/tryit/html/htmlform_submit.php"> Имя: <input type="text" name="fname" value="Mickey" /><br /> Фамилия:<input type="text" name="lname" value="Mouse" /><br /> <input type="submit" value="Отправить" /> </form>
Поддержка браузеров
тег
<input> поддерживается во всех ведущих браузерахОпределение и использование
Тег <input> используется для ввода информации пользователем.
Поля ввода могут быть представленны различными способами, в зависимости от типа атрибута. Полями ввода могут быть текстовое поле, флажки, поле пароля, радио кнопка, кнопка, и другое.
Разница между HTML 4.01 и HTML5
В HTML 4.01 атрибут "align" является устаревшим, и не поддерживается в HTML5, используйте CSS для выравнивания элементов ввода.
Тег <input> в HTML5 имеет много новых атрибутов.
Атрибут type в HTML5 имеет много новых значений.
Устаревшие элементы могут стать устаревшими в будущем, но браузеры продолжают поддерживать устаревшие элементы для обеспечения обратной совместимости.
Советы и примечания
Примечание: Элемент input является пустым, он включает только атрибуты.
Совет: Используйте элемент label для определения этикеток для элементов ввода.
Атрибуты
Новое : Новое в HTML5.
| Атрибут | Значение | Описание |
|---|---|---|
| accept | список типов mime | Указывает типы файлов, которые могут быть отправленны через загрузку файлов (только для type="file") |
| alt | текст | Определяет альтернативный текст для изображения ввода (только для type="image") |
| autocompleteНовое | on off | Определяет, должно ли в поле ввода быть включено автозаполнение |
| autofocusНовое | autofocus | Указывает, что поле ввода должно получить фокус при загрузке страницы (не для type="hidden") |
| checked | checked | Определяет, что элемент ввода будет отмечен, когда страница загружена (для type="checkbox" или type="radio") |
| disabled | disabled | Определяет, что элемент ввода недоступен, когда страница загруженна (не для type="hidden") |
| formНовое | имя формы | Задает одну или несколько форм к которым поле ввода принадлежит |
| formactionНовое | URL | Переопределяет атрибут формы action. Должен быть действительным URL, который определяет, куда отправлять данные при отправке формы (для type="submit" и type="image") |
| formenctypeНовое | application/x-www-form-urlencoded multipart/form-data text/plain | Переопределяет атрибут формы enctype. Указывает, как данные формы должны быть закодированы перед отправкой их на сервер (для type="submit" и type="image") |
| formmethodНовое | get post | Переопределяет атрибут формы method. Определяет метод HTTP для отправки данных на URL действия (для type="submit" и type="image") |
| formnovalidateНовое | formnovalidate | Переопределяет атрибут формы novalidate. Если указан, поле ввода не должно быть проверено во время отправки |
| formtargetНовое | _blank _self _parent _top имя фрейма | Переопределяет атрибут формы target. Указывает целевое окно, используемое при отправке формы (для type="submit" и type="image") |
| heightНовое | пиксели % | Определяет высоту ввода (для type="image") |
| listНовое | datalist-id | Относится к списку данных, содержащему предопределенные варианты поля ввода |
| maxНовое | число дата | Указывает максимальное значение поля ввода. Используйте вместе с атрибутом "min" для создания диапазона допустимых значений |
| maxlength | число | Указывает максимальное количество символов в текстовом поле |
| minНовое | число дата | Указывает минимальное значение поля ввода. Используйте вместе с атрибутом "max" для создания диапазона допустимых значений |
| multipleНовое | multiple | Если представлен, пользователю разрешается ввести более одного значения |
| name | имя поля | Определяет имя для элемента ввода. Атрибут name используется для сбора значений полей во время отправки |
| patternНовое | шаблон ввода | Указывает шаблон или формат значений входного поля. Пример: pattern="[0-9]" означает, что входное значение должно быть числом от 0 до 9 |
| placeholderНовое | text | Указывает подсказку, которая поможет пользователям заполнить поле ввода |
| readonly | readonly | Указывает, что значение этого поля не может быть изменено |
| requiredНовое | required | Указывает, что значение входного поля обязательно для заполнения перед отправкой форсы |
| size | количество символов | Определяет, сколько символов должно быть видно в поле ввода |
| src | URL | Определяет URL изображения для показа (для type="image") |
| stepНовое | число | Определяет легальные интервалы чисел в поле ввода |
| type | button checkbox color date datetime datetime-local file hidden image month number password radio range reset search submit tel text time url week | Задает тип элемента ввода |
| value | значение | Для кнопок:Указывает текст на кнопке. Для изображения кнопки: Указывает символический результат поля, который передается сценарию. Для флажков и переключателей: Указывает результат входного элемента при нажатии. Результат отправляется к URL действия формы. Для скрытых полей, пароля, и текстовых полей: Задает значение элемента по умолчанию. Примечание: Не может быть использован с type="file"Примечание: Этот атрибут обязателен с type="checkbox" и type="radio" |
| widthНовое | пиксели % | Указывает ширину ввода (для type="image") |
Глобальные атрибуты
Тег <input> поддерживает Глобальные атрибуты в HTML5.
Атрибуты событий
Тег <input> поддерживает Атрибуты событий в HTML5.
Была ли эта информация полезной?
