| Следующая версия | Предыдущая версия |
| html:tag:input [2022/05/16 18:04] – создано so_v_a | html:tag:input [2026/09/09 08:51] (текущий) – so_v_a |
|---|
| ^ Значения ^ type ^ | <!DOCTYPE markdown> |
| | <input type="text" autofocus maxlength="10"/> | текстовое поле | | |
| | # HTML тег <input> |
| | |
| | Тег **<input>** используется в пределах элемента **<form>**, определяя поля для ввода информации пользователем. Тип поля (текст, радиокнопка, флажок, поле для ввода пароля и т.д.) определяется значением атрибута **type**. Для связывания текста с определенным элементом используется тег **<label>**, который устанавливает для него текстовую метку. |
| | ## Синтаксис |
| | |
| | Тег **<input>** одиночный, закрывающий тег не требуется. (В XHTML закрывающий **<input/>** тег обязателен). |
| | Тег не содержит текстовой контент, только атрибуты. |
| | |
| | Пример |
| | ``` |
| | <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> |
| | ``` |
| | |
| | ## Значения атрибута type при различных типах полей ввода |
| | |
| | | Значения | Тип поля | |
| | |:---|:---| |
| | |<input type="text" autofocus maxlength="10"/> | текстовое поле | |
| | <input type="password"/> | при вводе символы отмечаются звёздочками | | | <input type="password"/> | при вводе символы отмечаются звёздочками | |
| | <input type="email"/> | показывает ошибку, если введён не email | | | <input type="email"/> | показывает ошибку, если введён не email | |
| | <input type="tel" pattern="\(\d\d\d\) ?\d\d\d-\d\d-\d\d" placeholder="(###) ###-##-##"/> | номер телефона в определённом формате | | | <input type="tel" pattern="\(\d\d\d\) ?\d\d\d-\d\d-\d\d" placeholder="(###) ###-##-##"/> | номер телефона в определённом формате | |
| | <input type="URL"/> | URL | | | <input type="URL"/> | URL | |
| | <input type="search" results="5" autosave="some_unique_value"/> | форма поиска. Для отмены стандартных стилей в Safari и Chrome применяется свойство: -webkit-appearance: none; | | | <input type="search" results="5" autosave="some_unique_value"/> | Форма поиска. Для отмены стандартных стилей в Safari и Chrome применяется свойство: -webkit-appearance: none; | |
| | <input type="color"/> | для выбора цвета | | | <input type="color"/> | для выбора цвета | |
| | <input type="number" min="0" max="100" step="5"/> | для выбора цифр, например, количества единиц товара. Рядом отображаются стрелочки-переключатели. Узнать больше об input type="number". | | | <input type="number" min="0" max="100" step="5"/> | для выбора цифр, например, количества единиц товара. Рядом отображаются стрелочки-переключатели. Узнать больше об input type="number". | |
| | <input type="checkbox"/> <input type="checkbox"/> | позволяет выбрать несколько вариантов | | | <input type="checkbox"/> <input type="checkbox"/> | позволяет выбрать несколько вариантов | |
| | <input type="radio" checked="checked" name="raz"/> <input type="radio" name="raz"/> | выбор одного из вариантов | | | <input type="radio" checked="checked" name="raz"/> <input type="radio" name="raz"/> | выбор одного из вариантов | |
| | <input type="button" value="кнопка"/> | | <input type="button" value="кнопка"/> | кнопка | |
| <input type="submit" value="кнопка"/> | кнопка для отправки данных на сервер | | | <input type="submit" value="кнопка"/> | кнопка для отправки данных на сервер | |
| | <input type="image" src="http://1.bp.blogspot.com/_hljKDuw-cxQ/SDEJPIeJG2I/AAAAAAAAGaM/N_Lu4sxLH_4/s00/lpDemoBuscador.gif"/> | рисунок для отправки данных на сервер | | | <input type="image" src="http://1.bp.blogspot.com/_hljKDuw-cxQ/SDEJPIeJG2I/AAAAAAAAGaM/N_Lu4sxLH_4/s00/lpDemoBuscador.gif"/> | рисунок для отправки данных на сервер | |
| | <input type="reset" value="сброс"/> | кнопка для возврата к исходному состоянию | | | <input type="reset" value="сброс"/> | кнопка для возврата к исходному состоянию | |
| | <input type="hidden" value="скрытое поле"/> | скрытое поле | | | <input type="hidden" value="скрытое поле"/> | скрытое поле | |
