Создание Сайтов и их настройка

Видео уроки Атрибуты input в HTML: Атрибут type.

Атрибуты input в HTML: Атрибут type.

В прошлом видео мы начали знакомство с формами в HTML. И поговорили о том, как добавляется форма на страницу сайта. Кроме этого мы начали разговор об атрибуте type тега <input>, и теперь знаем, как сделать текстовое поле.

Но с применением HTML-атрибута type для <input> мы можем создавать и другие поля с абсолютно разным назначением. Именно об этих возможностях мы поговорим в этом видео уроке.

Значений атрибута type довольно большое количество. И после этого видео мы сможем добавлять в форму чекбоксы, кнопки-картинки, поля ввода пароля, кнопки загрузки файлов, скрытые поля, кнопки сброса и кнопки отправки данных. То есть в одном видео уроке мы охватим довольно много возможностей, которые мы можем применять при выводе HTML формы на странице.

Атрибуты input в HTML: Атрибут type.

input type button

Именно такой синтаксис позволит добавить в форму кнопку. Только естественно должны присутствовать необходимые знаки и кавычки. То есть полный и правильный синтаксис кнопки будет выглядеть так:

Ничего особенно в такой кнопке нет. Это самая обычная кнопка-пустышка, для которой мы можем назначить какие-нибудь действия, например с помощью HTML-событий.

input type reset

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

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

input type submit

Это, пожалуй, самый важный элемент формы, который позволяет оправить данные формы, например обработчику. Это поле также представляет собой кнопку при нажатии, на которую происходит оправка данных. Что касается всех этих кнопок то можно отметить, что это не единственный способ добавления кнопок в форму HTML. Но об этом мы еще поговорим в последующих видео уроках.

Чтобы добавить кнопку отправки данных на страницу мы должны прописать следующий код внутри формы:

Но это не единственный вариант отправки данных формы.

input type image

C помощью значения image для атрибута type мы можем добавить в форму картинку, которая будет выполнят то же самое, что и кнопка отправки, то есть отправлять данные формы. Единственное отличие в том, что это уже будет не кнопка, а изображение. Картинка может быть совершенно любой, например нарисованная заранее кнопка отправки.

В этом случае синтаксис будет отличаться от обычной кнопки отправки тем, что будет отсутствовать параметр value но будет присутствовать параметр src.

Итак, с кнопками и отправкой данных мы разобрались. Что еще может позволить нам атрибут type тега <input>?

input type file

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

В этом случае, пожалуй, самый простой синтаксис:

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

input type password

Кроме того если вспоминать о текстовых полях, то мы можем с помощью значения password указать специальное поле для ввода пароля. Оно отличается от обычного текстового поля тем, что вводимый текст отображается в виде звездочек или точек, чтобы никто не мог видеть вводимый пароль.

Такой код должен быть использован для вызова поля ввода пароля на странице.

Но и это еще не все значения атрибута type которые мы можем использовать при выводе формы.

input type checkbox

Значение checkbox позволяет добавить в форму чекбокс или флажок. Если говорить простым языком, то мы можем добавить возможность выбора нескольких вариантов из предложенных, с помощью проставления галочек. Наверняка Вы с таким когда-нибудь уже сталкивались, например, при участии в каком-нибудь опросе или при заполнении формы, где необходимо выбрать один или несколько вариантов ответов из предложенных, поставив чекбокс.

Что касается синтаксиса, то он довольно прост:

Естественно это самый минимум, который необходим для вывода чекбоксов.

input type radio

Значение radio не говорит о том, что мы будем слушать радио, и вообще это поле никак не связано с радио электроникой. Мы просто с помощью этого значения можем добавит в форму некую радио-кнопку, с помощью которой, опять же, будет осуществляться выбор варианта ответа из предложенных. Однако в отличие от чекбокса, в этом случае предоставляется возможность выбора только одного единственного варианта ответа. Так же часто может встречаться в различных опросах, но и в формах обратной связи тоже имеет место быть.

Синтаксис здесь также прост и логичен:

Хочу еще раз отметить, что это тот минимум, который необходим как в случае с радио кнопками, так и с чекбоксами. Кроме того желательно использовать параметр value, чтобы приходил именно тот ответ который выбрал пользователь, но об этом подробнее в видео уроке.

И последняя возможность с использованием атрибута type.

input type hidden

C использованием значения hidden мы можем добавить в форму пустое невидимое или скрытое поле, которое никак не отображается на странице вообще. Подобные скрытые поля используются для подстановки необходимых нам данных и впоследствии получения их вместе с остальными данными, которые будут заполнены пользователем. Все необходимые данные мы можем прописать в параметре value. И тогда синтаксис такого поля чаще всего будет выглядеть таким образом:

Все эти вопросы мы рассмотрим в видео уроке. Вопросов довольно много и все они довольно интересны и наверняка смогут пригодиться при создании, например формы обратной связи на сайте.

Видео урок: Атрибуты input в HTML: Атрибут type.

HTML-справочник и другие материалы можно и нужно скачать здесь!

В следующий раз…

Расскажи друзьям:
Поделись ссылкой:
Комментариев нет, но вы можете стать первым!

Нажимая на кнопку "Комментировать" Вы согласшаетесь с условиями политики конфиденциальности

Проверка комментариев включена. Прежде чем Ваши комментарии будут опубликованы пройдет какое-то время.

Навигация по статье