Элемент <input>

Большинство элементов добавляется в форму с помощью элемента <input>. Назначение и внешний вид элемента <input> меняются в зависимости от значения атрибута type.

Значение атрибута type: text

Когда атрибуту tуре присваивается значение text, это значит, что будет создано однострочное поле ввода текста:

<input type="text">

Пример HTML:

Попробуй сам
<form action="action_form.php" method="POST">
  Имя пользователя:<br> 
  <input type="text" name="firstname"><br>   
  <input type="submit">  
</form>

Значение атрибута type: password

Чтобы создать поле для ввода пароля, необходимо задать значение password атрибуту type (password (англ.) — пароль):

<input type="password">

Пример HTML:

Попробуй сам
<form action="" method="POST">
  Имя пользователя:<br> 
  <input type="text" name="username" value="Ваше имя"><br>   
  Пароль:<br> 
  <input type="password" name="password"><br>
  <input type="submit">  
</form>

Значение атрибута type: radio

Элемент <input> типа radio создает переключатели, которые используют принцип логического «ИЛИ», позволяя выбрать только одно из нескольких значений: если вы выбираете одно положение, то все остальные становятся неактивными. Основной синтаксис элемента-переключателя:

<input type="radio" name="name" value="значение">

Пример: Использование переключателей

Сколько Вам лет?

  1. младше 18
  2. от 18 до 24
  3. от 25 до 35
  4. более 35

Значение атрибута type: checkbox

Элемент <input> типа checkbox создает флажки, которые напоминают переключатели тем, что дают пользователю возможность выбирать из предложенных вами вариантов. Главным отличием от переключателей является то, что посетитель может выбрать сразу несколько вариантов, а сами флажки обозначаются квадратиками, а не кружочками:

<input type="checkbox" name="name" value="значение">

Пример: Использование флажков

Какие музыкальные жанры Вы любите?

  1. Джаз
  2. Блюз
  3. Рок
  4. Шансон
  5. Кантри

Значение атрибута type: submit

Элемент <input> типа submit создает кнопку, при нажатии которой происходит отправка браузером серверному сценарию на обработку данных, введенных пользователем в форму:

<input type="submit" name="name" value="значение">

Пример: Использование submit и reset

Подпишись на рассылку новостей:

Значение атрибута type: button

Элемент <input> типа button создает произвольную кнопку. Для таких кнопок действие по умолчанию не определено, а браузеры пользователей должны использовать в качестве надписи на кнопке значение атрибута value. С атрибутами событий каждой такой кнопки (щелчок мышью на кнопке или дрyrое событие) могyт быть связаны прогpаммы обработки этих событий, которые могyт выполнять определенные действия. Эти проrpаммы обычно называют сценариями, и выполняются они непосредственно браузером пользователя, без передачи данных на Web-cepBep.

<input type="button" name="name" value="имя_кнопки">

Пример: Использование произвольной кнопки

HTML5 Новые значения type

В HTML5 появились новые типы полей форм, позволяющие более точно описать вводимые пользователем данные. Более старые версии браузеров, не поддерживающие HTML5, будут визуализировать такие элементы формы просто как однострочные поля ввода текста.

Значение атрибута type: date

Для запроса ввода даты вы можете использовать элемент <input> со значением date атрибута type. Таким образом, в браузерах, поддерживающих элементы формы спецификации HTML5, будет выведено поле для ввода даты.

<input type="date">
Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: Выбор даты

Значение атрибута type: week

При использовании типа поля ввода week соответствующий инструмент-указатель позволит пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате, например, Неделя 25, 2017.

<input type="week" name="week">
Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: Выбор недели

Значение атрибута type: month

Для запроса ввода определенного месяца года вы можете использовать элемент <input> со значением month атрибута type. Интерфейс позволит пользователю выбрать один месяц, после чего обеспечит ввод данных в виде года и месяца.

<input type="month" name="month">
Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: Выбор месяца

Значение атрибута type: time

Поле ввода, относящееся к типу time, допускает ввод значений в 24-часовом формате, например 17:30. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени.

<input type="time" name="time">
Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: Выбор времени

Значение атрибута type: datetime

<input type="datetime"> создает элемент ввода сочетания даты и времени, который содержит информацию о часовом поясе. При вводе данных в поле типа datetime генерируются значения даты и времени разделенные буквой T, а в конце строки помечается часовой пояс буквой Z в случае с UTC (Universal Coordinated Time — универсальное координированное время). Учитывая, что UTC является практически эквивалентом GMT (Greenwich Mean Time — среднее время по Гринвичу), стандартное московское время на 3 часа опережает GMT (UTC + 3:00).

<input type="datetime" name="datetime">
Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: Сочетание даты и времени

Сочетание даты и времени:

Значение атрибута type: datetime-local

Тип ввода данных datetime-local работает точно так же, как и datetime, однако не включает информацию о часовом поясе. Значение представляет собой дату и время в формате ISO без учета часового пояса (ГГГГ-ММ-ДДТчч:мм:сс).

<input type="datetime-local" name="datetime-local">
Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: Сочетание даты и времени без учета часового пояса

Сочетание даты и времени:

Значение атрибута type: number

Элемент <input> типа number создает поле, в которое пользователь может вводить только числовое значение. Для типа ввода number браузер предоставляет виджет счетчика, который представляет собой поле, справа от которого находятся две кнопки со стрелками — для увеличения и уменьшения числового значения. В поле счетчика по умолчанию разрешен прямой ввод с клавиатуры. Для указания минимальных и максимальных допустимых значений ввода предназначены атрибуты min и max, а также можно установить шаг приращения с помощью атрибута step.
Синтаксис создания поля для ввода чисел следующий:

<input type="number" name="num" min="1" max="12" value="1" step="1">
Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: Ввод чисел (number)

Ввод чисел (number):

Поставьте Вашу оценку от 1 до 12:

Значение атрибута type: range

Поле ввода типа range элемента <input> позволит создать такой элемент интерфейса, как ползунковый регулятор. Ползунок предназначен только для выбора числовых значений в некоем диапазоне, при этом для пользователя не все браузеры отображают текущее числовое значение. Основной синтаксис создания ползунка:

<input type="range" min="0" max="100" step="1" value="50">

Нижняя и верхняя границы диапазона min и max ограничивают значения, которые могут храниться в поле формы. Диапазон по умолчанию — от 0 до 100. Атрибут step позволяет разработчикам указывать шаг изменения чисел (по умолчанию 1). Текущее значение задается в атрибуте value. По умолчанию value = (max + min)/2. Вышеперечисленные атрибуты не являются обязательными и, если их опустить, то в таком случае они принимают значения по умолчанию.

Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: Создание ползунка (range)

Значение атрибута type: color

Поле ввода type="color" генерирует палитры цветов обеспечивая пользователям возможность выбирать значения цветов в шестнадцатеричном формате RGB (#RRGGBB). Синтаксис создания поля для задания цвета:

<input type="color" value="цвет" name="имя">

Атрибут value предназначен для задания исходного цвета (#RRGGBB) и не является обязательным. Атрибут name применяется для идентификации получаемого значения.

Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: Выбор цвета

Значение атрибута type: email

Поле типа email представляет из себя однострочное текстовое поле и предназначено для ввода либо отдельного адреса, либо списка адресов электронной почты. Браузеры, поддерживающие язык HTML5, проверят, соответствует ли введенный посетителем адрес электронной почты принятому стандарту для данного типа адресов. Синтаксис создания поля следующий:

<input type="email">

Элемент <input type="email"> может включать атрибуты свойственные типу text, а также добавлен атрибут multiple, который позволяет вводить сразу список из допустимых электронных адресов, разделенных запятыми.

Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: Адрес электронной почты

Вход на почту

Введите email:

Введите пароль:

Значение атрибута type: url

Элемент <input> типа url адаптирован для ввода URL-адресов, например адреса какой-либо страницы во всемирной паутине. Строка <input type="url"> заставляет браузер проверять, правильно ли пользователь ввел URL-адрес. При использовании поля ввода type="url" на устройствах с сенсорными экранами, внешний вид встроенной виртуальной клавиатуры будет оптимизирован для отображения символов, наиболее часто встречающихся в URL-дpecax.
Атрибуты для элемента <input> типа url совпадают с текстовым полем (<input type="text">). Некоторые браузеры добавляют специфическую информацию в предупреждающие сообщения, выводимые на экран, при попытке отправить форму с некорректными значениями URL-адреса. Далее приведен пример кода, включающего атрибут placeholder (с англ. — заполнитель), значение которого в виде подсказки будет по умолчанию отображаться, пока поле ввода URL-адреса не получит фокус:

Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: URL-адрес

Значение атрибута type: search

Поле ввода type="search" работает таким же образом, как и стандартное текстовое поле ввода, разница между типами ввода данных search и text чисто стилистическая. Некоторые браузеры немного по-разному выполняют визуализацию на основе одного и того же кода.
Синтаксис поля ввода поискового запроса:

Используемые атрибуты совпадают с текстовым полем text:

Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: Поле для поиска

Значение атрибута type: tel

Элемент <input> типа tel применяется для того, чтобы сообщить браузеру, что в соответствующем поле формы пользователь должен ввести телефонный номер. Несмотря на то, что телефонный номер представляет из себя числовой формат вводимых данных, в браузерах поле типа tel ведет себя как обычное текстовое поле ввода. Однако, применение типа поля ввода tel приводит к появлению на экранах мобильных устройств специальной клавиатуры, предназначенной для облегчения ввода информации. Синтаксис поля ввода номера телефона:

Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: Телефонный номер

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

Значение Описание
button Создает кнопку с произвольным действием, действие по умолчанию не определено:
checkbox Создает флажки, которые напоминают переключатели тем, что дают пользователю возможность выбирать из предложенных вариантов:
Я знаю HTML
color Генерирует палитры цветов обеспечивая пользователям возможность выбирать значения цветов в шестнадцатеричном формате RGB:
date Позволяет вводить дату в формате дд.мм.гггг.:
День рождения:
datetime-local Позволяет вводить дату и время, разделенные прописной английской буквой Т по шаблону дд.мм.гггг чч:мм:
Дата встречи — день и время:
email Браузеры, поддерживающие язык HTML5, проверят, соответствует ли введенный посетителем адрес электронной почты принятому стандарту для данного типа адресов:
E-mail:
file Позволяет загружать файлы с компьютера пользователя:
Выберите файл:
hidden Создает скрытый элемент, не отображаемый пользователю. Информация, хранящаяся в скрытом поле, всегда пересылается на сервер и не может быть изменена ни пользователем, ни браузером.
image Создает элемент в виде графического изображения, действующий аналогично кнопке Submit:
month Позволяет пользователю вводить год и номер месяца по шаблону гггг-мм:
number Создает поле, в которое пользователь может вводить только числовое значение. Для типа ввода number браузер предоставляет виджет счетчика, который представляет собой поле, справа от которого находятся две кнопки со стрелками — для увеличения и уменьшения числового значения. Для указания минимальных и максимальных допустимых значений ввода предназначены атрибуты min и max, а также можно установить шаг приращения с помощью атрибута step:
Укажите число (от 1 до 10):
password Текстовое поле для ввода пароля, в котором все вводимые символы заменяются звездочкой либо другим, установленным браузером значком:
Введите пароль:
radio Создает элемент-переключатель в виде небольшого кружка (иногда их называют радио-кнопками):
Радио-кнопки:
range Создает такой элемент интерфейса, как ползунковый регулятор. Ползунок предназначен только для выбора числовых значений в некоем диапазоне, при этом для пользователя не все браузеры отображают текущее числовое значение:
reset Создает кнопку, которая очищает поля формы от введенных пользователем данных:
search Создает поле поиска, по умолчанию поле ввода имеет прямоугольную форму:
Поиск:
submit Создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее на сервер обработчику:
text Создает однострочное поле ввода текста:
time Допускает ввод значений в 24-часовом формате, например 17:30. Браузеры отображают его как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускают ввод только значений времени:
Выберите время:
url Заставляет браузер проверять, правильно ли пользователь ввел URL-адрес. Некоторые браузеры добавляют специфическую информацию в предупреждающие сообщения, выводимые на экран, при попытке отправить форму с некорректными значениями URL-адреса:
Главная страница:
week Позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг:
Выберите неделю:

Задачи


  • Ввод чисел

    Создайте поле ввода, которое может содержать только числовые значения. К созданному полю ввода добавьте атрибут name со значением "guests". Установите ограничение на ввод чисел от 1 до 6.

    Задача HTML:

    Реши сам »
    Количество rocтей (от 1 до 6):
    HTML-код: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <form action="action_form.php" method="POST"> <p>Количество rocтей (от 1 до 6):</p> ... </form> <input type="submit"> </body>
    </html>
  • Радио-кнопки

    Создайте четыре радио-кнопки и разместите их внутри элемента <form>.
    Добавьте для каждой кнопки атрибут name со значением "musik".
    Добавить для каждой кнопки атрибут value со значениями соответственно: "juze", "pop", "rock" и "shanson".
    Укажите для кнопок текст, который соответствует их значениям как показано в задании.

    Задача HTML:

    Реши сам »
    Выберите музыкальный жанр: Джаз Поп Рок Шансон
    HTML-код:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <form action="action_form.php" method="POST"> <p>Выберите музыкальный жанр:</p> ... <input type="submit"> </form> </body>
    </html>
  • Выбор цвета

    В задании представлена форма предоставляющая пользователю возможность выбора цвета для настройки внешнего вида веб-страницы. Дополните HTML-код, чтобы в результате получилась такая же форма. Присвойте имя полю выбора фона name="bg", а полю выбора шрифта соответственно name="fg".

    Задача HTML:

    Реши сам »
    Цвет фона
    Цвет шрифта
    HTML-код: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <form action="action_form.php" method="POST"> ... <input type="submit"> </form> </body>
    </html>
  • Выбор времени

    Создайте поле ввода с арибутом name="time", которое допускает ввод значений в 24-часовом формате. Установите значение по умолчанию, отображаемое в поле ввода 14:00.

    Задача HTML:

    Реши сам »

    Время открытия церемонии:

    HTML-код: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <form action="action_form.php" method="POST"> <p>Время открытия церемонии: </p> ... <input type="submit"> </body>
    </html>





Профессия‌ ‌веб-разработчик‌
Веб-разработчик с нуля‌
Старт в программировании‌
Курс HTML/CSS‌
Школа фриланса
Курс Верстальщик 2020 - HTML 5, CSS‌
Профессия‌ тестировщик‌