| Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версия |
| html:tag:input [2022/05/16 18:30] – so_v_a | html:tag:input [2026/09/09 08:51] (текущий) – so_v_a |
|---|
| ^ Значения ^ Тип поля ^ | <!DOCTYPE markdown> |
| | |
| | # 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="text" autofocus maxlength="10"/> | текстовое поле | |
| | <input type="password"/> | при вводе символы отмечаются звёздочками | | | <input type="password"/> | при вводе символы отмечаются звёздочками | |
| | <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". | |
