Обзор элементов управления форм

Спецификация HTML 4.01 (http://www.w3.org/TR/html401/) содержит исчерпывающие сведения о формах и сама по себе достойна внимательного изучения, тем не менее в этом разделе мы попытаемся рассмотреть наиболее полезные концепции, которые помогут вам извлечь максимум выгоды из этой главы. Раз вы читаете эту книгу, то можно с определенной долей уверенности предположить, что вам уже приходилось создавать свои собственные формы; поэтому нет никакого смысла напоминать вам, что форма – это коллекция, состоящая из одного или более элементов управления, предназначенных для ввода информации и передачи ее на сервер для последующей обработки.

Однако, важно отметить, что революция AJAX действительно видоизменила парадигму передачи данных на сервер. Ранее данные могли передаваться серверной процедуре, которая разбивала их на удобные в использовании пары ключ/значение, использовала в своей работе полученные из них ассоциативные массивы и затем возвращала новую страницу, отражающую выбор, сделанный пользователем. Чтобы сделать процесс передачи данных более элегантным, форма могла бы включаться в тег iframe, чтобы избежать необходимости полной перезагрузки страницы. Однако теперь благодаря объекту XMLHttpRequest (XHR) имеется возможность асинхронной отправки небольших порций данных на сервер без необходимости явно отправлять форму на сервер или перезагружать страницу.

Конечно, объект XHR, AJAX и другие хитроумные приемы организации взаимодействий с пользователем не ликвидируют потребности в формах.


Формы все еще остаются надежным, проверенным стандартом – они способны выполнять свои функции даже при отключенной поддержке JavaScript и играют важную роль в создании доступных реализаций. Практически всегда есть смысл предусматривать возможность деградации функциональных возможностей и обеспечивать высокую доступность при применении самых причудливых способов отправки данных на сервер. Проще говоря, это не вопрос выбора «формы или AJAX», это вопрос обеспечения консолидации «форм и AJAX».

Для начала рассмотрим пример 13.1, представляющий собой расширенную версию самой простой формы из главы 1.
Пример 13.1. Простая форма


Register for Spam


(body)

Just Use the form below to sign-up for our great offers:


method="POST"
onsubmit="javascript:return validate()"
action="http://localhost:8080/register/"> First Name: (br)
Last Name: (br)
Your Email: (b)
(button type="submit")Sign Up!(/button)
(button type="reset")Reset(/button)
(button type="button" onclick="javascript:help()")Help(/button)

(/body)


Несмотря на всю свою простоту, эта форма обладает достаточным объемом функциональных возможностей и будет вести себя одинаково практически во всех типах броузеров, а объединение ее с таблицей стилей CSS может придать ей довольно привлекательный внешний вид.

Здесь имеется даже кнопка Help (справка), которая даст пользователю возможность узнать, для чего в действительности предназначена эта форма.


На стороне сервера обрабатывать эту форму мог бы простой сценарий, возможно, уже после того, как вебсервер извлечет данные из именованных полей формы. Обработать эту форму мог бы простой сценарий CherryPy, который приводится в примере 13.2.
Пример 13.2. Сценарий CherryPy, выполняющий обработку формы import cherrypy class Content:
"""
Процедура обработки формы.
Доступ к именованным полям формы реализуется очень просто.
"""
@cherrypy.expose
def register(self, first=None, last=None, email=None):
#здесь выполняется добавление информации о пользователе
#в черный список...
#отправить в ответ настроенную страницу html
return """

You're now on our spam list!
(body)

Congratulations %s %s, you're gonna get spammed!


(/body)

""" % (first, last) #подстановка значений переменных cherrypy.quickstart(Content())

Несмотря на всю простоту, предыдущий пример затрагивает некоторые основы, касающиеся использования форм:
• Элементы управления форм должны заключаться в тег FORM.
• Тег FORM практически всегда включает атрибуты name, method, onsubmit, enctype и action, предоставляющие информацию о том, как следует обрабатывать форму.
• Атрибут onsubmit предоставляет стандартный способ выполнения действий по проверке содержимого формы на стороне клиента.


Если процедура проверки возвращает значение false, это препятствует отправке формы на сервер.
• Атрибут action содержит URL отправки формы.
• Поля формы, представляющие значимые состояния, должны включать атрибуты name, которые собираются серверными платформами в пары ключ/значение и передаются процедурам, выполняющим обработку отправленных форм.
• Формы изначально обеспечивают возможность доступа к ним при помощи клавиатуры – нажатие на клавишу табуляции вызывает перемещение между полями1, а нажатие клавиши Enter – отправку формы. Хотя это и не было продемонстрировано в примере, следует помнить, что порядок навигации между полями формы можно изменить с помощью атрибута tabindex.
• Вообще существует большое разнообразие типов элементов управления, определяемых с помощью атрибута type. В данном конкретном примере демонстрируется использование кнопок трех разных типов: одна вызывает событие onsubmit, вторая выполняет сброс формы в исходное состояние и третья обрабатывает нестандартное действие.
• Отправка формы обязательно вызывает полную загрузку новой страницы, переданной сервером в ответ на получение формы. Если атрибут action отсутствует, необходимо предусмотреть выполнение дополнительных действий с помощью JavaScript или DHTML для подключения обработчиков событий DOM, таких как onclick..



Оцените статью: (0 голосов)
0 5 0

Статьи из раздела Dojo на эту тему:
Button
CheckBox
ComboBox
ComboButton
CurrencyTextBox

Вернуться в раздел: Dojo / Виджеты форм