Глава_14_Изучаем_HTML__XHTML. 653Переход на интерактивный режим
 Скачать 4.49 Mb.
|
|
глава 14 Òåñòèðîâàíèå ýëåìåíòîâ òèïîâ number è date Вот что мы ввели в форму. Обратите внимание на то, что у типа number имеются стрелки вверх/вниз, а элемент управления для ввода даты в данном браузере (Chrome) является всего лишь типа text. А вот ответ Starbuzz Bean Machine. Как видно, мы зака- зали 5 пакетиков кофе! Домашняя смесь Боливия Гватемала Кения Заказать сейчас Выберите кофе: Тип: Кофе в зернах Молотый Дополнительные услуги: Подарочная упаковка Доставка каталога вместе с заказом Доставить по адресу Имя: Адрес: Город: Страна: Почтовый индекс: Телефон: Комментарии клиентов: Äîïîëíåíèå ôîðìû Вы уже почти все сделали. Осталось добавить в форму элемент управления «Дополнительные услуги» с двумя флажками и элемент управления для комментариев клиентов. Поскольку вы уже научились работать с формами, мы не будем тратить на это много времени и добавим оба раздела сразу. Раздел «Дополнительные услуги» состоит из двух флажков: одного для подарочной упаковки, другого — для доставки каталога. Кажется, флажок «Доставка каталога вместе с заказом» должен быть установлен по умолчанию. Раздел с комментариями клиентов — это просто элемент ‹textarea›. St ar buz z К аф е S ta rb uzz Каф е тест- драйв 681 дальше html- формы Äîáàâëåíèå ôëàæêîâ è ìíîãîñòðî÷íîãî òåêñòîâîãî ïîëÿ Мы добавили по одному флажку для каждого параметра. Обратите внимание, что имена элементов одинаковые: “extras[ ]”... Как и для пе- реключателей, мы разместили метки справа от флажков. Мы используем атрибут checked, чтобы указать, что флажок о доставке каталога должен быть установлен по умолчанию. Вы можете добавить атрибут checked сразу для нескольких флажков. Вы знаете, что делать: просмотрите новый HTML-код и добавьте его в файл form.html. Это многострочное текстовое поле. ...но их значения разные. 682 глава 14 Çàâåðøàþùèé òåñò Сохраните изменения, обновите страницу и оцените новую форму. Не находите, что она достаточно хорошо выглядит? Вот то, что вы получите после представления информации на рассмотрение. Серверный сценарий получил все данные формы и использовал их на странице с ответом. Убедитесь, что можете найти на ней все данные, которые ввели в форме. Попробуйте использовать различ- ные комбинации данных в форме, предлагаемой на рассмотрение (с подарочной упаковкой и без нее, с каталогом и без, с различными сортами кофе и т. д.), и посмо- трите, как все будет работать. успешная передача на рассмотрение Вот наши новые флажки, один из которых — «Доставка каталога вместе с заказом» — уже выбран. А это многострочное поле для ввода текстовой информации. 683 дальше html- формы Остановитесь на минутку. Вы думаете, я не заметила, как вы попытались не обращать внимания на элемент “extras[]”? Что это за квадратные скобки? Вы должны это объяснить. И несмотря на то что оно допустимо, оно выглядит не совсем обычно, не так ли? Дело вот в чем: с точки зрения HTML это нормальное имя для элемента формы. Если в имени указаны квадратные скобки, это никак не влияет на браузер. Так зачем же мы его использовали? Оказывается, сценарный язык (PHP), на котором написан сер- верный сценарий processorder.php, понимает небольшую подсказку, что переменная формы мо- жет включать в себя несколько значений. Способ, которым вы даете ему эту подсказку, — указание символов «[]» в конце имени. Итак, если вы ограничиваетесь только изучением HTML, можете полностью об этом забыть. Однако лучше сохраните эту информацию в самом дальнем уголке сознания на тот случай, если когда-нибудь в будущем захотите написать форму, которая будет использовать серверный сценарий PHP. Верите вы или нет, но «extras[ ]» — это весьма допустимое имя для элемента формы. 684 глава 14 Ниже приведена HTML-форма, а справа — те данные, которые ввел в нее пользователь. Ваша задача — стать на время браузером и поставить в соответствие каждому имени элемента формы значение, введенное пользователем. Выполнив это упражнение, проверьте, все ли вы сделали правильно. Это форма. сопоставим имена с элементами формы СТАНЬ браузером 685 дальше html- формы name = __________________ zip = ___________________ model = _________________ color = _________________ caroptions[] = __________ Эта форма заполнена. Поставьте в соответствие каждому полю формы его значение и впишите свои отв еты сюда. "Áàêêàðó Áàíçàé" Дополнительное задание для вас… 686 глава 14 Теперь, когда мы закончили с формой, не могли бы мы поговорить о способах отсылки данных на сервер? Мы использовали POST, но вы сказали, что существуют и другие способы. POST и GET выполняют одну и ту же работу — доставляют данные вашей формы из браузера на сервер. Но они делают это различными способами. POST упаковывает переменные формы и незаметно для пользователя отсылает их серверу. В то же время GET также упаковывает переменные формы, но, прежде чем отправить запрос серверу, присоединяет их в конец URL-адреса. Есть два основных метода, которые использует браузер: POST и GET. При использовании метода POST все данные формы отсылаются серверу как часть запроса и не видны пользователю. fi rstname=buck lastname=bonz item=java number=2 Серверный сценарий POST GET http://wickedlysmart.com/hfhtmlcss/contest.php http://wickedlysmart.com/hfhtmlcss/contest.php?fi rstname=buckaroo&lastname=banzai При использовании метода GET данные формы добавляются к самому URL-адресу, так что пользователь их видит. В адресной строке браузера пользователь видит только URL серверного сценария. Обратите внимание, что данные формы добавляются в конец URL-адреса. Это то, что пользователь ви- дит в адресной стро- ке браузера. методы формы: get и post Серверный сценарий 687 дальше html- формы В: Почему метод называется GET («получатель»), хотя мы, наоборот, отсылаем что-то серверу? О: Хороший вопрос. Какова основная ра- бота браузера? Получать веб-страницы от сервера. Когда вы используете метод GET, браузер просто получает веб-страницу, как делает это всегда. Кроме того, в случае с формой он присоединяет данные в конец URL-адреса. Надо также отметить, что бра- узер воспринимает это как обычный запрос. Когда вы используете метод POST, браузер, наоборот, создает небольшой пакет данных и отправляет их серверу. В: В чем же преимущества и не- достатки использования методов POST и GET? О: Есть несколько отличий, которые на самом деле имеют большое значение. Ес- ли вы хотите, чтобы пользователи могли напрямую ссылаться на веб-страницы, кото- рые являются результатом представления формы на рассмотрение, то лучше исполь- зуйте метод GET, потому что не существует способа сослаться на страницу, являющуюся результатом рассмотрения формы мето- дом POST. Когда вам может такое понадо- биться? Допустим, у вас есть серверный сценарий, который возвращает список ре- зультатов поиска. Тогда можно сделать так, чтобы пользователи могли ссылаться на эти результаты и снова просматривать их без необходимости вновь заполнять всю форму. С другой стороны, если ваш сер- верный сценарий обрабатывает заказы, то вы не захотите, чтобы пользователи ссыла- лись на результаты таких обработок. Иначе каждый раз, когда они будут возвращаться к этой странице, заказ будет снова и снова представляться на рассмотрение. Ситуация, в которой вы точно никогда не захотите использовать метод GET, — когда данные в вашей форме являются конфиденциаль- ными, например хранят номер кредитной карты или пароль. Поскольку URL легко увидеть, конфиденциальная информация может быть запросто получена другими людьми, если они просмотрят историю ва- шего браузера или если каким-то образом GET попадет в закладки. Наконец, если вы используете элемент Обратите внимание на то, что в правом столбце у нас также имеется пустая ячейка, поэтому мы можем поместить сюда пустой элемент Для последней строки у нас имеется пустая ячейка в левом столбце, поэтому мы опять-таки можем использовать пустой для нее. Все строки просты: с классом tableRow для строки, а каждая ячейка – в Для каждой строки, содержащей только метку «Доставить по адресу:», мы добавили класс heading в , так что мы можем выделить данный текст полужирным шрифтом 694 глава 14 оформление формы Îôîðìëåíèå ôîðìû ñ ïîìîùüþ CSS У нас уже есть вся необходимая нам структура, так что теперь нам осталось лишь добавить не- сколько правил стиля, и все будет готово. Поскольку наша форма — это часть сайта Starbuzz, мы будем повторно использовать стили из файла starbuzz.css и создадим таблицу стилей под названием styledform.css, в которую добавим новые правила стиля для формы Bean Machine. Вы уже видели весь этот CSS-код. Мы не используем никаких индивидуальных правил стиля для форм и таблиц: все это уже было сделано в предыдущей главе. Вы найдете CSS-код в файле styledform.css, который находится в папке chapter14/starbuzz. В некоторых стилях мы будем полагаться на CSS для всего Starbuzz-сайта, но добавим фоновый рисунок Starbuzz и поля для элемента body. Готово к употреблению body { background: #efe5d0 url(images/background.gif) top left; margin: 20px; } form { display: table; padding: 10px; border: thin dotted #7e7e7e; background-color: #e1ceb8; } form textarea { width: 500px; height: 200px; } div.tableRow { display: table-row; } div.tableRow p { display: table-cell; vertical-align: top; padding: 3px; } div.tableRow p:first-child { text-align: right; } p.heading { font-weight: bold; } …и добавляем границу вокруг формы и от- ступы между содержимым формы и границей, а также фоновый цвет для того, чтобы форма контрастировала с фоном страницы. Каждый с классом tableRow играет роль строки в макете табличного пр едставления. Каждый элемент , вложенный в с классом tableRow, является ячейкой таблицы. Мы вертикально выравниваем содержимое в каждом , чтобы содер- жимое в каждой строке было выровнено по верху ячеек. Мы также задаем здесь небольшой отступ, чтобы добавить пространства между строками. Данное правило задействует псевдоэлемент fi rst-child в селекторе для элементов , вложенных в элементы с классом tableRow. Это означает, что первый элемент в каждой строке будет выравниваться по правой стороне, то есть все они будут вертикально выравниваться относительно правой стороны столбца. Мы используем форму для представления таблицы в табличном виде… Для всех элементов с классом heading мы выде- ляем полужирным шрифтом текст, чтобы он вы- глядел как заголовок. Данный класс мы использовали в случае с ячейкой «Доставить по адресу:». Чтобы для комментариев было больше места, в фор- ме мы делаем крупнее такой элемент управления, как многострочное поле для ввода текстовой информации, задав соответствующие значения для width и height. 695 дальше html- формы Òåñòèðîâàíèå îôîðìëåííîé ôîðìû Вы добавите два элемента в элемент 710 приложение #box { position: absolute; top: 100px; left: 100px; width: 200px; height: 200px; background-color: red; transition: transform 2s; -webkit-transition: -webkit-transform 2s; -moz-transition: -moz-transform 2s; -o-transition: -o-transform 2s; } #box:hover { transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); } Мы можем добавить свойство transition в правило для с идентификатором box, чтобы его трансформация в новое состоя- ние занимала 2 секунды. Вот как мы это сделаем: Значение свойства transition представляет собой другое свой- ство, которым в данном случае является transform, в сочетании с отрезком времени, в данной ситуации равным 2 секундам. Когда значение указанного свойства изменяется, transition способствует тому, чтобы данное изменение осуществлялось на протяжении заданного отрезка времени, в результате чего получается анима- ционный эффект. Вы также можете обеспечить переход в случае с другими CSS-свойствами, например width или opacity. Свойство transition «говорит»: «Если значение свой- ства transform изменится, осуществить переход от текущего значения transform к новому значению transform за указанный отрезок времени». transform по умолчанию не име- ет никакого значения, то есть трансформация отсутствует. Однако когда вы наведете курсор мыши на элемент с идентифи- катором box, transform приобретет значение, согласно которому данный элемент повернется на 45 градусов. Таким образом, переход от отсут- ствия трансформации до трансфор- мации в виде поворота на 45 граду- сов произойдет за 2 секунды. 2 секунды css- трансформации и переходы Internet Explorer в настоящее время (включая версию 9) не име- ет поддержки для transition, она появится в версии 10. Вы не уви- дите анимацию, если использу- ете Internet Explorer. 711 дальше приложение № 4. Èíòåðàêòèâíîñòü HTML-страницы не обязательно должны быть пассивными документами: они могут иметь исполняемое содержимое. Оно задает поведение для ваших страниц. Исполняемое содержимое создается посредством написания программ или сценариев на языке сценариев под названием «JavaScript». Посмотрите на следующий фрагмент кода, чтобы получить первое представление о том, как поместить исполняемое содержимое на ваши страницы. Это новый HTML- элемент |