Технологии создания гипертекстовых документов (стр. 3 из 3)
Рис.6. Форма для электронного письма, которая открывается, если щелкнуть ссылку на электронный адрес.
6. ПРОВЕРКА ПОЛЕЙ ФОРМЫ
ТЕХНОЛОГИЯ: JavaScript
ПОДДЕРЖКА: все распространенные браузеры с поддержкой JavaScript.
Часто на web-сайте размещают форму для отправки сообщений на e-mail:
<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>
Она состоит из полей ввода e-mail, текста и кнопки отправки данных серверному скрипту mail.php. Для формы и полей данных в атрибутах id и name указаны уникальные имена, которыми оперируют из JavaScript. С помощью события документа (action)onsubmit, возникающего при отправке формы, вызывают функцию JavaScript:
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();
returnfalse;
}
returntrue;
}
Функция делает три проверки:
● введен ли текст в поле «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. ПОВЫШЕНИЕ УДОБСТВА РАБОТЫ С ФОРМАМИ
ТЕХНОЛОГИЯ: JavaScript
ПОДДЕРЖКА: все распространенные браузеры с поддержкой 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">
<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. ВЫПАДАЮЩЕЕ МЕНЮ
ТЕХНОЛОГИЯ: JavaScript, CSS
ПОДДЕРЖКА: все распространенные браузеры с поддержкой JavaScript и W3CDOM (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-оформление минимально:
<styletype="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 – Выпадающее меню.
<htmlxmlns="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%;">
<divclass="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 />
<ahref="/buy4.html">Интернет-технологии</a>
</div>
</div>
</body>
</html>
Рис.10. Выпадающее меню на экране монитора.
ЗАДАНИЕ НА САМОСТОЯТЕЛЬНУЮ РАЗРАБОТКУ
Используя решения, изложенные в приведенных примерах, разработать web-сайт, содержащий не менее трех страниц. Тематику сайта выбрать самостоятельно и согласовать с преподавателем. Тематика сайта может отражать Ваши научные интересы, хобби, направление деятельности компании, где Вы работаете и т.д. В процессе работы над web-сайтом у Вас возникнут интересные решения. Пополните ими эту коллекцию и используйте в своих последующих работах!
ЛИТЕРАТУРА
1. Земсков Ю. Тайны гипертекста. CHIP SPECIAL 08.05. c. 26-31.