Форма обратной связи form.html

Рис. 8. Форма обратной связи

Здесь через CSS (рисунок 8) перегружены свойства формы, ответственные за её внешний вид. По нажатию на кнопку «Отослать» введённые данные показываются пользователю на экране, причём происходит это посредством генерации HTML через JavaScript (конкретно, через jQuery) без прописывания тегов напрямую.

Рис. 9. Обработанная форма обратной связи

<html><head></head><style type="text/css">body { background: url('mainBackground.png') 100% 100% no-repeat; background-position: 0% 0%; background-color: #9e4384; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; font-size: 14px;}h1 { color: #ffe2ff; font-size: 150%;}h3 { color: #ffe2ff; font-size: 125%;}label { color: #ff0000;}input, textarea { background-color: #0a2e3A; width: 400px; color: #00ff00; border: #ffff00 1px dotted;}.btn { background-color: #000000;}.radio { width: 25px;}</style><script type="text/javascript" src="./jquery-1.6.4.min.js"></script><body><h1>Форма обратной связи</h1><div id="report"></div><script type="text/javascript">$(function() { $('#report').hide(); $('#send').click(function(){ $('<h3 />').html('Ваш отзыва'); $('<p />').html('Имя: '+$('#name').attr('value')).appendTo($('#report')); $('<p />').html('Фамилия: '+$('#surname').attr('value')).appendTo($('#report')); $('<p />').html('Пол: '+$(":radio[name=gender]").filter(":checked").val()).appendTo($('#report')); $('<p />').html('Отзыв: '+$('#reportField').attr('value')).appendTo($('#report')); $('#report').show(); $('#form').hide(); });});</script><div id="form"><TABLE border=3 bgcolor="pink"><FORM action="mailto:salonf@googlemail.com"><TR><TD><LABEL for="name">Имя: </label></td><TD><INPUT type="text" id="name"></td></tr><TR><TD><LABEL for="surname">Фамилия: </label></td><TD><INPUT type="text" id="surname"></td></tr><TR><TD><label for="gender">Пол:   </label></td><td><INPUT type="radio" name="gender" id="gender" value="male" class="radio"> М <INPUT type="radio" name="gender" value="female" class="radio"> Ж</td></tr><tr><td><label for="reportField">Отзыв<label></td><td><textarea id="reportField"></textarea></td></tr><tr><TD colspan=2 align="center"><INPUT type="button" id="send" value="Отослать" class="btn"><INPUT type="reset" class="btn"></td></tr></form></table></div></body></html>

Листинг 6. Код формы

Выводы

В ходе данной работы были изучены основные методы построения фреймов, а также изучены пока нестандартные, но современные подходы к взаимодействию различных объектов как между фреймами, так и внутри фреймов. Кроме того мы изучили некоторые приёмы стилизации, позволяющие создать псевдообъемные кнопки-картинки и, таким образом, сэкономить трафик и время загрузки страницы по сравнению с рисунками. И, наконец, был показан современный подход к навигации – якорная навигация, которая в настоящее время используется такими признанными гигантами информационной индустрии, как Google и Twitter.