Элемент <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="значение">Пример: Использование переключателей
Значение атрибута type: checkbox
Элемент <input> типа checkbox создает флажки, которые напоминают переключатели тем, что дают пользователю возможность выбирать из предложенных вами вариантов. Главным отличием от переключателей является то, что посетитель может выбрать сразу несколько вариантов, а сами флажки обозначаются квадратиками, а не кружочками:
<input type="checkbox" name="name" value="значение">Пример: Использование флажков
Значение атрибута 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">Значение атрибута type: week
При использовании типа поля ввода week соответствующий инструмент-указатель позволит пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате, например, Неделя 25, 2017.
<input type="week" name="week">Значение атрибута type: month
Для запроса ввода определенного месяца года вы можете использовать элемент <input> со значением month атрибута type. Интерфейс позволит пользователю выбрать один месяц, после чего обеспечит ввод данных в виде года и месяца.
<input type="month" name="month">Значение атрибута type: time
Поле ввода, относящееся к типу time, допускает ввод значений в 24-часовом формате, например 17:30. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени.
<input type="time" name="time">Значение атрибута 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">
Значение атрибута type: datetime-local
Тип ввода данных datetime-local работает точно так же, как и datetime, однако не включает информацию о часовом поясе. Значение представляет собой дату и время в формате ISO без учета часового пояса (ГГГГ-ММ-ДДТчч:мм:сс).
<input type="datetime-local" name="datetime-local">
Пример: Сочетание даты и времени без учета часового пояса
Значение атрибута type: number
Элемент <input> типа number создает поле, в которое пользователь может вводить только числовое значение. Для типа ввода number браузер предоставляет виджет счетчика, который представляет собой поле, справа от которого находятся две кнопки со стрелками — для увеличения и уменьшения числового значения. В поле счетчика по умолчанию разрешен прямой ввод с клавиатуры. Для указания минимальных и максимальных допустимых значений ввода предназначены атрибуты min и max, а также можно установить шаг приращения с помощью атрибута step.
Синтаксис создания поля для ввода чисел следующий:
<input type="number" name="num" min="1" max="12" value="1" step="1">
Пример: Ввод чисел (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. Вышеперечисленные атрибуты не являются обязательными и, если их опустить, то в таком случае они принимают значения по умолчанию.
Значение атрибута type: color
Поле ввода type="color" генерирует палитры цветов обеспечивая пользователям возможность выбирать значения цветов в шестнадцатеричном формате RGB (#RRGGBB). Синтаксис создания поля для задания цвета:
<input type="color" value="цвет" name="имя">Атрибут value предназначен для задания исходного цвета (#RRGGBB) и не является обязательным. Атрибут name применяется для идентификации получаемого значения.
Значение атрибута type: email
Поле типа email представляет из себя однострочное текстовое поле и предназначено для ввода либо отдельного адреса, либо списка адресов электронной почты. Браузеры, поддерживающие язык HTML5, проверят, соответствует ли введенный посетителем адрес электронной почты принятому стандарту для данного типа адресов. Синтаксис создания поля следующий:
<input type="email">Элемент <input type="email"> может включать атрибуты свойственные типу text, а также добавлен атрибут multiple, который позволяет вводить сразу список из допустимых электронных адресов, разделенных запятыми.
Пример: Адрес электронной почты
Вход на почту
Введите email:
Введите пароль:
Значение атрибута type: url
Элемент <input> типа url адаптирован для ввода URL-адресов, например адреса какой-либо страницы во всемирной паутине. Строка <input type="url"> заставляет браузер проверять, правильно ли пользователь ввел URL-адрес. При использовании поля ввода type="url" на устройствах с сенсорными экранами, внешний вид встроенной виртуальной клавиатуры будет оптимизирован для отображения символов, наиболее часто встречающихся в URL-дpecax.
Атрибуты для элемента <input> типа url совпадают с текстовым полем (<input type="text">).
Некоторые браузеры добавляют специфическую информацию в предупреждающие сообщения, выводимые на экран, при попытке отправить форму с некорректными значениями URL-адреса. Далее приведен пример кода, включающего атрибут placeholder (с англ. — заполнитель), значение которого в виде подсказки будет по умолчанию отображаться, пока поле ввода URL-адреса не получит фокус:
Значение атрибута type: search
Поле ввода type="search" работает таким же образом, как и стандартное текстовое поле ввода, разница между типами ввода данных search и text чисто стилистическая. Некоторые браузеры немного по-разному выполняют визуализацию на основе одного и того же кода.
Синтаксис поля ввода поискового запроса:
<input type="email">Используемые атрибуты совпадают с текстовым полем text:
Значение атрибута type: tel
Элемент <input> типа tel применяется для того, чтобы сообщить браузеру, что в соответствующем поле формы пользователь должен ввести телефонный номер. Несмотря на то, что телефонный номер представляет из себя числовой формат вводимых данных, в браузерах поле типа tel ведет себя как обычное текстовое поле ввода. Однако, применение типа поля ввода tel приводит к появлению на экранах мобильных устройств специальной клавиатуры, предназначенной для облегчения ввода информации. Синтаксис поля ввода номера телефона:
<input type="tel">Задачи
-
Ввод чисел
Создайте поле ввода, которое может содержать только числовые значения. К созданному полю ввода добавьте атрибут 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>