Работа с формами
Один из способов взаимодействия с пользователями представляют html-формы. Например, если нам надо получить от пользователя некоторую информацию, мы можем определить на веб-странице формы, которая будет содержать текстовые поля для ввода информации и кнопку для отправки. И после ввода данных мы можем обработать введенную информацию.
Для создания формы используется элемент :
В JavaScript форма представлена объектом HtmlFormElement . И после создания формы мы можем к ней обратиться различными способами.
Первый способ заключается в прямом обращении по имени формы:
var searchForm = document.search;
Второй способ состоит в обращении к коллекции форм документа и поиске в ней нужной формы:
С помощью свойства name объекта формы мы можем получить значение атрибута name у соответствующего элемента формы в коде html.
Еще один способ сочетает оба подхода:
var searchForm = document.forms["search"];
И также можно применять стандартные способы для поиска элемента формы, например, по id, по тегу или по селектору. Например:
var searchForm = document.getElementsByTagname("form")[0] Форма имеет ряд свойств, из которых наиболее важными являются вышерассмотренное свойство name , а также свойство elements , которое содержит коллекцию элементов формы:
Среди методов формы надо отметить метод submit() , который отправляет данные формы на сервер, и метод reset() , который очищает поля формы:
var searchForm = document.forms["search"]; searchForm.submit(); searchForm.reset();
Элементы форм
Форма может содержать различные элементы ввода html: input, textarea, button, select и т.д. Но все они имеют ряд общих свойств и методов.
Также, как и форма, элементы форм имеют свойство name , с помощью которого можно получить значение атрибута name :
Другим важным свойством является свойство value , которое позволяет получить или изменить значение поля:
var searchForm = document.forms["search"]; var keyBox = searchForm.elements["key"]; document.write(keyBox.value); // hello world // установка значения keyBox.value = "Привет мир";
С помощью свойства form можно получить родительский объект формы:
var searchForm = document.forms["search"]; var keyBox = searchForm.elements["key"]; document.write(keyBox.form.name); // search
Данное свойство может быть полезно, например, при отправке формы, когда перед непосредственной отправкой формы необходимо провести валидацию всех полей формы.
Свойство type позволяет получить тип поля ввода. Это либо название тега элемента (например, textarea), либо значение атрибута type у элементов input .
Из методов можно выделить методы focus() (устанавливает фокус на элемент) и blur() (убирает фокус с элемента):
var searchForm = document.forms["search"]; var keyBox = searchForm.elements["key"]; keyBox.focus();
Создание простой формы на HTML, CSS и JavaScript
От автора: Создание HTML-форм – один из основополагающих разделов в веб-дизайне и веб-программировании. Используя формы, мы регистрируемся на сайтах, пишем сообщения в гостевые книги, оставляем комментарии, пишем и отправляем письма через веб-интерфейсы почтовых сервисов. Написание абсолютного большинства веб-приложений начинается с создания формы. На счет «абсолютного большинства» я, конечно загнул, серьезные программисты начинают, как правило, с другого. А вот начинающие разработчики, такие как автор этого туториала, начинают проектирование своего первого dt,-приложения с создания простой HTML-формы.
Автор: Павел Карабило
Начинающий веб-разработчик, самоучка. Живу, учусь, работаю в столице Украины. Активно изучаю JavaScript, jQuery, CSS3, HTML5, PHP, SQL. Особый интерес питаю к дизайну и разработке интерактивных интерфейсов веб-приложений (front-end).
Изучите Веб-вёрстку с нуля
Если вы мечтаете создавать сайты, но не знаете, с чего начать. Хотите глубоко погрузиться в основы веб-разработки, а не просто пройтись по верхам — этот курс для вас!
В этом туториале я буду использовать HTML, CSS3 и совсем чуточку – JavaScript. Следуя за мной шаг за шагом, начинающий веб-программист (или веб-дизайнер) сможет создать простую форму, которая сможет стать основой для первой гостевой книги, системы комментариев или другого простого веб-приложения. Надеюсь, в недалеком будущем, я предоставлю вашему вниманию небольшой туториал, в котором расскажу, как из одной такой формы спроектировать и написать гостевую книгу, используя PHP и MySQL.
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер!
Шаг 1.
Для начала, давайте определимся, для чего мы будем создавать форму. Если бы мы создавали форму для регистрации на крупном портале, то нам пришлось бы разместить на ней поля для ввода имени, фамилии, логина пользователя, его адреса электронной почты, и, возможно, для его реального адреса, поле для пароля, и т.д. В общем, нам придется разместить на форме целую кучу полей, в которых мы запутаемся, а гости нашего сайта – тем более. Я решил сделать простейшую форму для самой простой гостевой книги, для этого мне понадобится:
поле для ввода имени автора сообщения;
поле для ввода адреса его электронной почты;
текстовую область для написания сообщения;
кнопка с надписью «Отправить» или любой другой для того, чтобы все это дело работало.
Начнем, пожалуй, с HTML. Создадим файл и назовем, его, например, index.html. Или как вам будет угодно, я назову его именно так.
Напишем в наш файл следующий HTML-код: