Лабораторная работа: Технологии создания гипертекстовых документов
//-->
</script>
</head>
<body>
<form name="mailer" id="mailer" action="/mail.php" method="post" onsubmit="return checkmailform();">
E-mail отправителя:<br /> <input type="text" name="mailsender" id="mailsender" /><br />
Текстписьма:<br /> <textarea name="mailtext" id="mailtext" cols="35" rows="5"></textarea><br />
<input type="submit" value="Отправить" />
</form>
</body>
</html>
Рис.7. Отображение формы для отправки сообщений на e-mail.
Рис.8. Сообщение о неправильно введенном адресе электронной почты (пропущена собака).
7. ПОВЫШЕНИЕ УДОБСТВА РАБОТЫ С ФОРМАМИ
ТЕХНОЛОГИЯ: Java Script
ПОДДЕРЖКА: все распространенные браузеры с поддержкой JavaScript.
Форма поискового запроса размещена на каждой странице современного сайта. Не всегда дизайнер может выделить для нее достаточно места, и тогда приходится разъяснять назначение формы текстом внутри нее. Это допустимое решение, но трудно осуществимое. Чтобы отправить поисковый запрос, пользователю приходится кликнуть внутри формы мышью, выделить объяснительный текст, удалить его уже с клавиатуры, вписать свой поисковый запрос и нажать кнопку поиска или «Enter».
Простой код на JavaScript избавляет посетителя от этих многочисленных действий:
<form name="searchf" id="searchf" action="/search.php" method="get">
<input type="text" name="searchstring" id="searchstring" value="Поиск" onfocus='this.value = "";' /> <input type="submit" value=" > " />
</form>
Эта форма передает запрос серверному скрипту search.php. Форма состоит из текстового поля для ввода запроса и кнопки отправки данных на сервер. Фраза «Поиск», вписанная в текстовое поле, задана атрибутом value. С помощью события документа onfocus запускают код на JavaScript. Можно использовать событие onclick, срабатывающее при клике на элементе, но оно менее универсально. В любом случае событие запускает программный код. В этот раз код не вынесен в отдельную функцию, а записан в качестве значения this.value = "" и фактически означает «установить значение текущего (this) поля равным пустоте».
События обеспечивают большой простор для деятельности, например, есть форма, мимо которой посетитель не должен пройти:
<form name="searchf2" id="searchf2" action="/search.php" method="get">
<input type="text" name="searchstring2" id="searchstring2" value="Поиск" onmouseover='this.value = ""; this.focus();' /> <input type="submit" value=" > " />
</form>
Используя onmouseover='this.value = ""; this.focus();', можно поймать курсор мыши, очистить форму ввода и переместить в нее курсор. Событие onmouseover срабатывает при прохождении курсора мыши над объектом, a this.focus() активизирует текущий объект.
Листинг 7_input_reset - Формы поискового запроса.
<html xmlns="http://www.w3.org/1999/xhtml">