Приветствую, Друзья.
В прошлом видео мы рассмотрели живые примеры создания карты изображения. Примеров, я думаю, достаточно, их было три. Также мы завершили очередной раздел ВидеоКурса посвящённый изображениям. Теперь мы знаем все об изображениях в 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.