Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
Создать
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

HTML Справочник

HTML Теги по алфавиту HTML Теги по категориям HTML Поддержка браузера HTML Атрибуты тегов HTML Глобальные атрибуты HTML События атрибутов HTML Название цвета HTML Canvas HTML Аудио/видео HTML Наборы символов HTML Типы документов HTML URL Кодировка HTML Код языка HTML Код страны HTTP Сообщения ошибок HTTP Методы GET/POST HTML Конвертер PX в EM HTML Комбинация клавиш

HTML Теги

Тег <!--Комментарий--> Тег <!DOCTYPE> Тег <a> Тег <abbr> Тег <acronym> Тег <address> Тег <applet> Тег <area> Тег <article> Тег <aside> Тег <audio> Тег <b> Тег <base> Тег <basefont> Тег <bdi> Тег <bdo> Тег <big> Тег <blockquote> Тег <body> Тег <br> Тег <button> Тег <canvas> Тег <caption> Тег <center> Тег <cite> Тег <code> Тег <col> Тег <colgroup> Тег <data> Тег <datalist> Тег <dd> Тег <del> Тег <details> Тег <dfn> Тег <dialog> Тег <dir> Тег <div> Тег <dl> Тег <dt> Тег <em> Тег <embed> Тег <fieldset> Тег <figcaption> Тег <figure> Тег <font> Тег <footer> Тег <form> Тег <frame> Тег <frameset> Тег <h1> - <h6> Тег <head> Тег <header> Тег <hr> Тег <html> Тег <i> Тег <iframe> Тег <img> Тег <input> Тег <ins> Тег <kbd> Тег <label> Тег <legend> Тег <li> Тег <link> Тег <main> Тег <map> Тег <mark> Тег <meta> Тег <meter> Тег <nav> Тег <noframes> Тег <noscript> Тег <object> Тег <ol> Тег <optgroup> Тег <option> Тег <output> Тег <p> Тег <param> Тег <picture> Тег <pre> Тег <progress> Тег <q> Тег <rp> Тег <rt> Тег <ruby> Тег <s> Тег <samp> Тег <script> Тег <section> Тег <select> Тег <small> Тег <source> Тег <span> Тег <strike> Тег <strong> Тег <style> Тег <sub> Тег <summary> Тег <sup> Тег <svg> Тег <table> Тег <tbody> Тег <td> Тег <template> Тег <textarea> Тег <tfoot> Тег <th> Тег <thead> Тег <time> Тег <title> Тег <tr> Тег <track> Тег <tt> Тег <u> Тег <ul> Тег <var> Тег <video> Тег <wbr>


HTML Тег <input> атрибут type


❮ HTML Тег <input>


Пример

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

<form action="/action_page.php">
 <label for="username">Имя пользователя: </label>
  <input type="text" id="username" name="username"><br>
 <input type="submit" value="Submit">
</form>
Попробуйте сами »


Определение: Тег <input> атрибут type

Тег <input> в HTML имеет атрибут type определяет тип отображаемого элемента <input>.

Если атрибут type не определен, то по умолчанию используется тип "text".


Поддержка: Тег <input> атрибут type

Атрибут
type Да Да Да Да Да

Синтаксис: Тег <input> атрибут type

<input type="value">

Значения: Тег <input> атрибут type

Значение Описание

button

Определяет кликабельную кнопку (в основном используется с JavaScript для активации скрипта)

checkbox

Определяет флажок

color

Определяет выбор цвета

date

Определяет элемент управления датой (год, месяц, день (без времени))

datetime-local

Определяет контроль даты и времени (год, месяц, день, время (без часового пояса)

email

Определяет поле для адреса электронной почты

file

Определяет поле выбора файла и кнопку "Обзора" (для загрузки файлов)

hidden

Определяет скрытое поле ввода

image

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

month

Определяет контроль месяца и года (без часового пояса)

number

Определяет поле для ввода номера

password

Определяет поле пароля

radio

Определяет переключатель

range

Определяет элемент управления диапазоном (например, ползунок)

reset

Определяет кнопку сброса

search

Определяет текстовое поле для ввода строки поиска

submit

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

tel

Определяет поле для ввода телефонного номера

text

По умолчанию. Определяет однострочное текстовое поле

time

Определяет элемент управления для ввода времени (без часового пояса)

url

Определяет поле для ввода URL

week

Определяет контроль недели и года (без часового пояса)

Примеры: Тег <input> атрибут type

Тип ввода: button

Кнопка, которая активирует JavaScript при нажатии на нее:

<input type="button" value="Кликни меня" onclick="msg()">
Попробуйте сами »

Тип ввода: checkbox

Флажки позволяют пользователю выбрать один или несколько вариантов из ограниченного числа вариантов:

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> У меня есть велосипед</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> У меня есть машина</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> У меня есть лодка</label><br>
Попробуйте сами »

Тип ввода: color

Выбрать цвет из палитры цветов:

<label for="favcolor">Выберите свой любимый цвет:</label>
<input type="color" id="favcolor" name="favcolor">
Попробуйте сами »

Тип ввода: date

Определить дату контроля:

<label for="birthday">День рождение:</label>
<input type="date" id="birthday" name="birthday">
Попробуйте сами »

Тип ввода: datetime-local

Определить контроль даты и времени (без часового пояса):

<label for="birthdaytime">День рождения (дата и время):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
Попробуйте сами »

Тип ввода: email

Определить поле для адреса электронной почты (будет автоматически проверяться при отправке):

<label for="email">Введите свой адрес электронной почты:</label>
<input type="email" id="email" name="email">
Попробуйте сами »

Тип ввода: file

Определить поле выбора файла и кнопку "Обзор..." (для загрузки файлов):

<label for="myfile">Выбрать файл:</label>
<input type="file" id="myfile" name="myfile">
Попробуйте сами »

Тип ввода: hidden

Определить скрытое поле (невидимое пользователю).

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

<input type="hidden" id="custId" name="custId" value="3487">
Попробуйте сами »

Тип ввода: image

Определить изображение как кнопку отправки:

<input type="image" src="img_submit.gif" alt="Отправить">
Попробуйте сами »

Тип ввода: month

Определить контроль месяца и года (без часового пояса):

<label for="bdaymonth">День рождения (месяц и год):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
Попробуйте сами »

Тип ввода: number

Определить поле для ввода номера (вы также можете установить ограничения на то, какие номера принимаются):

<label for="quantity">Количество (от 1 до 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
Попробуйте сами »

Для указания ограничений используйте следующие атрибуты:

  • max - указывает максимально допустимое значение

  • min - указывает минимальное допустимое значение

  • step - указывает допустимые интервалы номеров

  • value - указывает значение по умолчанию

Тип ввода: password

Определить поле пароля (символы маскируются):

<label for="pwd">Пароль:</label>
<input type="password" id="pwd" name="pwd">
Попробуйте сами »

Тип ввода: radio

Переключатели позволяют пользователю выбрать только один из ограниченного числа вариантов:

<input type="radio" id="male" name="gender" value="male">
<label for="male">Мужской</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Женский</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">другое</label>
Попробуйте сами »

Тип ввода: range

Определить элемент управления для ввода числа, точное значение которого не имеет значения (например, ползунок). Диапазон по умолчанию от 0 до 100. Однако вы можете установить ограничения на то, какие числа принимаются с атрибутами min, max и step:

<label for="vol">Громкость (от 0 до 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
Попробуйте сами »

Для указания ограничений используйте следующие атрибуты:

  • max - указывает максимально допустимое значение

  • min - указывает минимальное допустимое значение

  • step - указывает допустимые интервалы номеров

  • value - указывает значение по умолчанию

Тип ввода: reset

Определить кнопку сброса (сброс всех значений формы к значениям по умолчанию):

<input type="reset">
Попробуйте сами »

Совет: Используйте кнопку сброса осторожно! Это может раздражать пользователей, которые случайно активируют кнопку сброса.

Тип ввода: search

Определить поле поиска (например, поиск по сайту или поиск в Google):

<label for="gsearch">Поиск Google:</label>
<input type="search" id="gsearch" name="gsearch">
Попробуйте сами »

Тип ввода: submit

Определить кнопку отправки:

<input type="submit">
Попробуйте сами »

Тип ввода: tel

Определить поле для ввода телефонного номера:

<label for="phone">Введите свой номер телефона:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
Попробуйте сами »

Тип ввода: text

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

<label for="fname">Имя:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Фамилия:</label>
<input type="text" id="lname" name="lname"><br>
Попробуйте сами »

Тип ввода: time

Определите элемент управления для ввода времени (без часового пояса):

<label for="appt">Выберите время:</label>
<input type="time" id="appt" name="appt">
Попробуйте сами »

Тип ввода: url

Определить поле для ввода URL:

<label for="homepage">Добавьте свою домашнюю страницу:</label>
<input type="url" id="homepage" name="homepage">
Попробуйте сами »

Совет: Safari на iPhone распознает тип ввода url и изменяет экранную клавиатуру в соответствии с ним (добавит .com опцию).

Тип ввода: week

Определите контроль недели и года (без часового пояса):

<label for="week">Выберите неделю:</label>
<input type="week" id="week" name="week">
Попробуйте сами »

❮ HTML Тег <input>