SdelaemBlog

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

Форма обратной связи HTML: Текстовое поле.

Главная Статьи HTML & CSS ВидеоКурс HTML Форма обратной связи HTML: Текстовое поле.

Приветствую, Друзья.

В прошлом видео мы рассмотрели живые примеры создания карты изображения. Примеров, я думаю, достаточно, их было три. Также мы завершили очередной раздел ВидеоКурса посвящённый изображениям. Теперь мы знаем все об изображениях в HTML.

Пора двигаться дальше и приступать к еще одному большому и не менее интересному разделу это формы в 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.

Оставьте свой коммент
ДОСТАВКА СТАТЕЙ ПОЧТОЙ, на дом

Комментариев пока нет, но вы можете стать первым!

Чтобы оставить комментарий, заполните, пожалуйста форму ниже:

Смайлы

Обязательно для Заполнения!

Обязательно для Заполнения!

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

Отправить жалобу разработчику сайта

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

[contact-form-7 404 "Not Found"]

Спасибо большое за поддержку проекта! :)

Для поддержки проекта, выберите убодный способ для оплаты: