В процессе создания сайтов иногда возникают ситуации, что необходимо дать возможность посетителю сайта передать какую-то информацию серверу. Получив эту информацию, сервер уже может ее обработать и выдать определенные результаты.
Например,
1) регистрации посетителя на сайте
2) отправка через сайт текстовой информации на e-mail
3) Загрузка на сайт (сервер) какой-то графической информации через веб-страницу
4) Формы для расширенного поиска какой-то информации
и.т.д.
HTML-форма является связующим звеном между посетителем сайта и программой на удаленном сервере. Что же собой представляет форма?
Форма – это область на веб-странице, которая содержит специальные средства и возможности (текстовые поля, кнопки и.т.д.), которые позволяют посетителю сайта передать какую-то информацию на сервер.
Нужно понимать, что если за создание форм отвечает язык разметки гипертекста HTML, то за их обработку на сервере, отвечают уже серверные языки веб-программирования (например, PHP).
В ближайших уроках мне бы хотелось рассмотреть средства HTML, которые позволяют нам создавать формы на веб-страницах.
Хочу сразу сказать, что создавать формы намного проще, чем их обрабатывать.
Давайте начнем с того, из каких элементов состоит эта самая форма.
1) Текстовое поле. Позволяет пользователю ввести строку текстовой информации.
2) Многострочное текстовое поле. Позволяет вводить текстовую информацию в несколько строк.
3) Текстовая метка (лейбл). Специальная текстовая область, которая несет только информационный характер и расшифровывает назначение того или иного элемента формы. Может быть изменено только создателем веб-страницы.
2) Переключатель (checkbox). Позволяет выбрать несколько вариантов из предложенных.
3) Переключатель (radio). Позволяет выбрать только один вариант из предложенных.
4) Кнопка. Инструмент, который позволяет выполнить определенные действия с данными, которые введены или будут введены в форму. Например, отправить их на сервер, очистить все поля, которые заполнил пользователь и.т.д.
5) Выпадающие (не выпадающие) списки. Позволяют пользователю выбрать один или несколько вариантов из предложенных с помощью специального элемента, при нажатии, на которое появляется специальное меню.
6) Области группировки элементов (Fieldset). Служат для того, чтобы визуально и логически объединить однотипные элементы в одну группу.
7) Скрытые элементы формы. Они не отображаются на веб-странице и обычно используются для того, чтобы передать значения каких-то переменных на удаленный сервер.
Это все основные элементы форм, с которыми вам придется столкнуться в своей работе. В следующих уроках я буду подробнее останавливаться на каждом, и мы посмотрим, что они собой представляю, как создаются и какие свойства имеют.
Понравилась заметка?
Получайте подобные на e-mail.
Дмитрий, Вы забыли упомянуть о таком элементе формы как , а ведь им удобно пользоваться, особенно если идет речь о обработке данных.
Неплохо было бы также рассказать и о , ведь он используется уже в первом приведенном Вами примере.
Да и элемент очень часто используется на сайтах, было бы неплохо и о нем рассказать
Еще одно замечание. Вы говорите "Форма – это область на веб-странице, которая содержит специальные средства и возможности (текстовые поля, кнопки и.т.д.), которые позволяют посетителю сайта передать какую-то информацию на сервер."
Но ведь формы можно использовать и для других целей, не обязательно для отправки данных на сервер.
И еще одно, по поводу элемента — Переключатель (radio) – Вы говорите: "Позволяет выбрать только один вариант из предложенных".
Так это не всегда так, к примеру ,если у всех Radio-кнопок будут разные имена, то Вы никогда не сможете выбрать только один вариант.
Дмитрий, Вы забыли упомянуть о таком элементе формы как input type=Hidden, а ведь им удобно пользоваться, особенно если идет речь о обработке данных.
Неплохо было бы также рассказать и о FIELDSET , ведь он используется уже в первом приведенном Вами примере.
Да и элемент input type=File очень часто используется на сайтах, было бы неплохо и о нем рассказать
Еще одно замечание. Вы говорите "Форма – это область на веб-странице, которая содержит специальные средства и возможности (текстовые поля, кнопки и.т.д.), которые позволяют посетителю сайта передать какую-то информацию на сервер."
Но ведь формы можно использовать и для других целей, не обязательно для отправки данных на сервер.
И еще одно, по поводу элемента — Переключатель (radio) – Вы говорите: "Позволяет выбрать только один вариант из предложенных".
Так это не всегда так, к примеру ,если у всех Radio-кнопок будут разные имена, то Вы никогда не сможете выбрать только один вариант.
Игорь, большое спасибо за хорошие замечания.
Про input type=Hidden и FIELDSET я добавил в заметку.
На счет input type=File, по сути это элемент, который состоит из двух, уже описанных мною элементов: текстовое поле и кнопка.
Игорь, а для каких еще целей вы можете использовать форму? Ее основное назначение "отправить информацию агенту для обработки (напр., Web-серверу, mail-серверу и т.п.)" в спецификации так и написано. Если есть какие-то иные примеры применения веб-форм, то скорее всего это какие-то уловки, которыми могут пользоваться веб-мастера, чтобы обойти определенные специфичные задачи. Но основное назначение, для чего формы создавались – это именно отправка данных к агенту для обработки.
И последнее Ваше замечание. Если у радиоэлемента будет другое имя, то это уже совершенно другая группа переключателей. Там вы предлагаете пользователю другое условие для выбора. Основное назначение этого элемента это именно "выбрать один из многих".
Вы говорите "На счет input type=File, по сути это элемент, который состоит из двух, уже описанных мною элементов: текстовое поле и кнопка."
Если судить по виду, то действительно напоминает. Но, если говорить о функциональности – то организовать с помощью обычной кнопки и текстового поля то, для чего служит input type=File, то готов с Вами поспорить!!! Тут придется прибегать к JavaScript, или к другим клиентским скриптам, и я, более чем уверен, что сделать это будет намного сложнее, чем использовать стандартные средства HTML.
И, по поводу назначения форм – ведь с помощью форм можно организовать, к примеру, простейший WYSIWIG-редактор. Подчеркиваю – простейший, т.е. в его работе ничего не будет связано с сервером. И такие редакторы действительно используются современными Web-разработчиками. Кстати, можно организовать даже сохранение сконструированной в этом редакторе страницы на жесткий диск.
Да, и последнее, среди текстовых полей, я бы выделил поле для ввода пароля (input type=PASSWORD) – хоть оно и напоминает внешне обычное текстовое поле, но опять же, для того, чтобы имитировать его работу – придется прибегать к JavaScript.
Отличным и наглядным примером формы является форма добавления комментариев, которая находится внизу этой страницы. Только не понятно почему поля "Защита от СПАМА" и "Комментарий" в этой форме не отмечены красной звездочкой. Разве они не являются обязательными для заполнения ?
Справедливое замечание. Отметил.