|
p align="left">{ alert("Заполните поле: E-mail отправителя"); document.forms.mailer.mailsender.focus(); return false; } if (! (/\w+@\w+\.[a-z]{2,4}/.test(document.forms.mailer.mailsender.value)) ) { alert("Введите правильный e-mail адрес"); document.forms.mailer.mailsender.focus(); return false; } if ( (document.forms.mailer.mailtext.value == null) || (document.forms.mailer.mailtext.value.length < 10) ) { alert("Заполните поле: Текст письма"); document.forms.mailer.mailtext.focus(); return false; } return true; } Функция делает три проверки: ? введен ли текст в поле «E-mail» и не меньше ли он 7 символов; ? является ли адрес правильным e-mail-адресом; ? введен ли текст сообщения и не меньше ли он 10 символов. Если хотя бы одна из проверок не пройдена, пользователь получает сообщение об ошибке. Если проблем не обнаружено, скрипт не мешает отправке данных. Листинг 6_form_check - Проверка полей формы для отправки сообщений на e-mail. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Форма отзыва</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <script language="javascript" type="text/javascript"> //<!-- //<![CDATA[ function checkmailform() { if ( (document.forms.mailer.mailsender.value == null) || (document.forms.mailer.mailsender.value.length < 7) ) { alert("Заполните поле: E-mail отправителя"); document.forms.mailer.mailsender.focus(); return false; } if (! (/\w+@\w+\.[a-z]{2,4}/.test(document.forms.mailer.mailsender.value)) ) { alert("Введите правильный e-mail адрес"); document.forms.mailer.mailsender.focus(); return false; } if ( (document.forms.mailer.mailtext.value == null) || (document.forms.mailer.mailtext.value.length < 10) ) { alert("Заполните поле: Текст письма"); document.forms.mailer.mailtext.focus(); return false; } return true; } //]]> //--> </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 ПОДДЕРЖКА: все распространенные браузеры с поддержкой Java Script. Форма поискового запроса размещена на каждой странице современного сайта. Не всегда дизайнер может выделить для нее достаточно места, и тогда приходится разъяснять назначение формы текстом внутри нее. Это допустимое решение, но трудно осуществимое. Чтобы отправить поисковый запрос, пользователю приходится кликнуть внутри формы мышью, выделить объяснительный текст, удалить его уже с клавиатуры, вписать свой поисковый запрос и нажать кнопку поиска или «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"> <head> <title>Форма поиска</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> </head> <body> <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> <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> </body> </html> Рис.9. Формы поискового запроса - выбирайте лучшую! 8. ВЫПАДАЮЩЕЕ МЕНЮ ТЕХНОЛОГИЯ: Java Script, CSS ПОДДЕРЖКА: все распространенные браузеры с поддержкой Java Script и W3C DOM (IE5 и старше, Mozilla, Opera) Если на сайте много ссылок в меню, необходимо сделать его ниспадающим: <div onmouseover="menushow('1');" onmouseout="menuhide('1');" style="float: left; width: 50%;"> <div class="navhead">Информация</div> <div id="navbody1"> <a href="/news.html">Новости</a><br /> <a href="/products.html">Учебные планы</a><br /> <a href="/pchela.html">Пчеловодство</a><br /> <a href="/about.html">Об авторе</a> </div> </div> <div onmouseover="menushow('2');" onmouseout="menuhide('2');"> <div class="navhead">Учебные дисциплины</div> <div id="navbody2"> <a href="/buy1.html">Схемотехника</a><br /> <a href="/buy2.html">Теория информации</a><br /> <a href="/buy3.html">Надежность, эргономика, качество АСОИУ</a><br /> <a href="/buy4.html">Интернет-технологии</a> </div> </div> Первый блок ссылок имеет уникальное имя navbodyl, второй -- navbody2. Для каждого раздела при наведении мыши на элемент и уходе мыши с элемента вызывается функция JavaScript. CSS-оформление минимально: <style type="text/css"> .navhead { font-weight: bold; background-color: #ccc; } #navbody1, #navbody2 { visibility: hidden; } </style> Для navbodyl и navbody2 указано свойство visibility: hidden;. При этом JS получает номер блока и меняет его атрибут видимости: <script language="javascript" type="text/javascript"> //<!-- //<![CDATA[ function menuhide(menunum) { var currentmenu = document.getElementById("navbody" + menunum); currentmenu.style.visibility = 'hidden'; } function menushow(menunum) { var currentmenu = document.getElementById("navbody" + menunum); currentmenu.style.visibility = 'visible'; } //]]> //--> </script> При наведении мыши на блок активизируется функция menushow(menunum). Menunum -- переменная, хранящая строку с номером меню. Функция выбирает элемент страницы, имя складывается из navbody и номера (menunum). Далее для элемента задается свойство visibility: visible. Функция menuhide() срабатывает, когда курсор мыши покидает область меню. Листинг 8_menu - Выпадающее меню. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Выпадающее меню</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <script language="javascript" type="text/javascript"> //<!-- //<![CDATA[ function menuhide(menunum) { var currentmenu = document.getElementById("navbody" + menunum); currentmenu.style.visibility = 'hidden'; } function menushow(menunum) { var currentmenu = document.getElementById("navbody" + menunum); currentmenu.style.visibility = 'visible'; } //]]> //--> </script> <style type="text/css"> .navhead { font-weight: bold; background-color: #ccc; } #navbody1, #navbody2 { visibility: hidden; } </style> </head> <body> <div onmouseover="menushow('1');" onmouseout="menuhide('1');" style="float: left; width: 50%;"> <div class="navhead">Информация</div> <div id="navbody1"> <a href="/news.html">Новости</a><br /> <a href="/products.html">Учебные планы</a><br /> <a href="/pchela.html">Пчеловодство</a><br /> <a href="/about.html">Об авторе</a> </div> </div> <div onmouseover="menushow('2');" onmouseout="menuhide('2');"> <div class="navhead">Учебные дисциплины</div> <div id="navbody2"> <a href="/buy1.html">Схемотехника</a><br /> <a href="/buy2.html">Теория информации</a><br /> <a href="/buy3.html">Надежность, эргономика, качество АСОИУ</a><br /> <a href="/buy4.html">Интернет-технологии</a> </div> </div> </body> </html> Рис.10. Выпадающее меню на экране монитора. ЗАДАНИЕ НА САМОСТОЯТЕЛЬНУЮ РАЗРАБОТКУ Используя решения, изложенные в приведенных примерах, разработать web-сайт, содержащий не менее трех страниц. Тематику сайта выбрать самостоятельно и согласовать с преподавателем. Тематика сайта может отражать Ваши научные интересы, хобби, направление деятельности компании, где Вы работаете и т.д. В процессе работы над web-сайтом у Вас возникнут интересные решения. Пополните ими эту коллекцию и используйте в своих последующих работах! ЛИТЕРАТУРА 1. Земсков Ю. Тайны гипертекста. CHIP SPECIAL 08.05. c. 26-31.
Страницы: 1, 2, 3
| 
