Приветствую, Друзья.
В прошлом видео мы рассмотрели живые примеры создания карты изображения. Примеров, я думаю, достаточно, их было три. Также мы завершили очередной раздел ВидеоКурса посвящённый изображениям. Теперь мы знаем все об изображениях в HTML.
Пора двигаться дальше и приступать к еще одному большому и не менее интересному разделу это формы в HTML. В этом разделе мы затронем все, что касается форм, начиная от простых форм, состоящих из текстовых полей и заканчивая отправкой и обработкой данных.
Первый видео урок этого раздела посвящен созданию формы и добавлению текстового поля для получения данных. В этом видео мы изучим три HTML-тега, с которыми еще не знакомились. Это <form>, <input> и <label>.
HTML-тег form.
Тег <form> существует для создания блока или контейнера формы, в который мы сможем помещать различные элементы, начиная с текстовых полей и заканчивая различными списками и флажками. Тег <form> имеет обязательный HTML-атрибут action с помощью которого мы можем указать путь к файлу, который будет обрабатывать данные из формы. Кроме того, тег <form> имеет огромное количество различных атрибутов, о которых мы подробно поговорим в видео уроке.
HTML-тег input.
Тег <input> существует для добавления различных элементов в контейнер формы. Элементы могут самые различные это и текстовые поля, и кнопки, и переключатели, и т.д. Тег <input> не менее важен тега <form> и служит для непосредственного вывода различных полей на странице. У него существует довольно внушительный список атрибутов, которые мы можем использовать. И, пожалуй, самый интересный, это атрибут type, который позволит нам определить, что за элемент необходимо вывести на страницу. В этом видео мы рассмотрим вывод текстового поля, с помощью тега <input>.
Мы выведем на страницу с помощью тега <input> текстовое поле. Обычное текстовое поле, в которое пользователь сможет вносить какие-то свои данные, такие как имя, фамилия и много всего прочего. Кроме этого мы проделаем некоторые манипуляции с текстовым полем. Узнаем, как менять его ширину? Как сделать ограничение по количеству символов введенных в текстовое поле? Как вообще сделать поле неактивным и т.д.
HTML-тег label.
Тег <label> служит для установки связи между меткой, например текста, и элементом формы, в нашем случае это <input>. Для чего это нужно и как работает, мы сможем увидеть в видео уроке. Следует отметить, что тег <label> имеет всего пару атрибутов, которые мы можем использовать в отличие от тегов, о которых я написал чуть выше.
Все эти теги имеют тесную связь друг с другом особенно первые два. И именно с помощью этих тегов мы можем создавать формы обратной связи HTML.
В этом видео мы начнем создавать форму и изучать различные элементы. А после завершения раздела Вы сможете легко создавать форму связи HTML у себя на сайте, достаточно будет только выбрать элементы, которые необходимы именно Вам. Также стоит отметить, что это не обязательно должна быть форма связи, это может быть и форма комментариев, или регистрации, или, например заказа услуг, или чего-то еще. Не важно, какая должна быть форма, и какова ее цель. У всех форм общая задача это получение каких-либо данных с помощью элементов интерфейса, таких как <input>.
Видео урок: Форма обратной связи HTML: Текстовое поле.
HTML-справочник и другие материалы можно и нужно скачать здесь!
В следующем видео мы продолжим изучение форм в HTML. И подробно рассмотрим возможности тега <input>, с помощью атрибута type.
