Глава_14_Изучаем_HTML__XHTML. 653Переход на интерактивный режим
 Скачать 4.49 Mb.
|
|
653 Переход на интерактивный режим 14 HTML-формы До сих пор ваше веб-общение было односторонним: от веб-страницы к поль- зователям. Разве не было бы здорово, если бы пользователи смогли отвечать вам? Именно на этом этапе вступают в действие формы HTML. Как только вы снабдите свои страницы формами (прибегнув к определенной помощи веб-сервера), вы сможете собирать отзывы клиентов, принимать по Сети заказы, делать следующий ход в игре в режиме онлайн или проводить интернет-голосование. В этой главе вы познакомитесь с целой группой HTML-элементов, предназначенных для создания веб-форм. Вы также узнаете о том, что происходит на сервере для поддержки форм и как сделать сами формы стильными. Да, только что получил вашу форму. Сейчас мы проверяем ее на сервере, а затем отправим вам ответ. 654 глава 14 Êàê ðàáîòàþò ôîðìû Если вы пользуетесь Интернетом, то точно знаете, как выглядят формы. Но вы, скорее всего, никогда не задумывались о том, что им приходится делать с HTML. По своей сути форма — это веб-страница с областями ввода, в которых вы можете печатать свою информацию. Когда форма представляется на рассмотрение, информация из нее упаковывается и отсылается веб-серверу для обработки серверным сценарием. Что вы получаете после обработки? Другую веб-страницу в качестве ответа, конечно же. Подробно рассмотрим, как это работает. Веб-сервер Браузер упаковывает все данные из формы и отсылает их веб-серверу. fi rstname=buck lastname=bonz item=java number=2 Веб-сервер Вы посещаете в еб-страницу с HTML-формой, заполняете эту форму и пр едставляете информацию на рассмотр ение. Веб-сервер получает данные формы и отдает их серверному сценарию на обработку. Серверный сценарий обрабатывает данные формы и создает новую HTML-страницу, которая используется в качестве ответа, отсылаемого обратно веб-серверу. Веб-сервер отсылает ответ, полученный от серверного сценария, обратно брауз еру. 657 дальше html- формы ×òî ñîçäàåò áðàóçåð Сюрприз! Для создания формы применяется элемент . Сейчас мы поговорим не- много о блочных элементах, которые могут входить в элемент , но есть также на- бор абсолютно новых элементов, которые созданы специально для форм. Каждый из них предоставляет различные способы для ввода информации: поля для ввода текста, флажки, раскрывающиеся списки и т. д. Мы подробно рассмотрим все эти элементы, но сначала вернемся к HTML-коду с предыдущей страницы и посмотрим, как на приведенной ниже странице отображаются элементы и содержимое, расположенные внутри элемента . Форму для конкурса вы найдете в папке chapter14/contest. Откройте ее, еще раз хорошенько рассмотрите, затем загрузите в браузере и примите участие в конкурсе. A B C D Это просто обычный абзац с текстом в форме. Это два текстовых элемента управле- ния для ввода имени и фамилии. В HTML для их создания вы используете эле- мент ‹input›. Это кнопка Submit (Отправить) (кнопка может также называться Submit Query (Послать запрос)). 658 глава 14 contest.php hfhtmlcss Êàê ðàáîòàåò ýëåìåíò 659 дальше html- формы Хорошо, у меня есть HTML-форма, которая не вызывает никаких сложностей. Но где я возьму серверный сценарий? Или я должна его создать? Хороший вопрос. Создание серверных сцена- риев — это совершенно другая тема, совсем не связанная с той информацией, которую мы пред- лагаем вам в этой книге. Сначала мы пытались ее осветить, но все закончилось тем, что книга стала весить больше, чем мы сами (а это нехорошо). Итак, как бы то ни было... Чтобы создать серверный сценарий, нужно знать сценарный язык, или язык программирования. Это обязательно должен быть такой язык, ко- торый поддерживается вашей хостинговой компанией. Большинство компаний поддержи- вают такие языки, как PHP, Ruby on Rails, Perl, Python, Node.js, Java (и другие). Если вы этим заинтересовались, то постарайтесь найти книгу именно о создании серверных сценариев (так- же называемых программами, выполняемыми на сервере). Кроме того, выясните в своей хо- стинговой компании, не предоставляет ли она простые сценарии своим клиентам. Это избавит вас от необходимости самостоятельно создавать серверные сценарии. Что касается этой главы, мы уже разработали все серверные сценарии, которые вам понадобятся. Вам нужно лишь правильно указать URL-адрес соответствующего серверного сценария в атри- буте action элемента . 660 глава 14 ×òî ìîæåò âõîäèòü â ôîðìó Вы можете поместить в форму практически любой блочный элемент, но это не то, что важно для нас на данный момент. Нас интересуют специальные элементы формы, которые создают элементы управления в браузере. Мы приводим здесь краткую информацию о наиболее часто используемых элементах формы. Начнем с элемента формы , который имеет много функций. Элемент типа text Элемент типа text использу- ется для ввода одной строки текста. Благодаря дополнительным атрибу- там вы можете задать максималь- ное количество символов и ширину управляющего элемента. < input type="text" name="fullname"/> Элемент ‹input› — элемент б ез содержимого, так что после него не следует никакого содержимого. Для большинства элементов требуется название, используемое серверным сценарием. Чуть позже мы рассмотрим, как это работает. Элемент ‹input› со значением text атрибута type создает на странице браузера элемент управления для ввода текста из одной строки. Элемент типа submit Элемент типа submit создает кнопку, нажав которую вы можете пред- ставить форму на рассмотрение. Когда вы нажимаете эту кнопку, браузер от- сылает форму серверному сценарию на обработку. Для кнопки Submit (Отправить) укажите значение submit для атрибута type элемента ‹input›. По умолчанию кноп- ка называется Submit (Отправить) или Submit Query (Отправить запрос), хотя это название можно изменить (как это сделать, мы по- кажем чуть позже). Обратите внимание, что в обоих случаях используется один и тот же HTML-элемент, но с различными значениями атрибута type. Используйте атрибут type, чтобы указать, что вам нужен ввод информации типа text. обзор элементов формы 661 дальше html- формы Элемент типа radio Элемент типа radio создает переклю- чатели, которые являются взаимоисключа- ющими. Это похоже на старые переключа- тели в машинах: если вы выбираете одно положение, то все остальные становятся не- активными. Элемент управления radio позволяет выбрать только одно положение из предлагаемых. Указывайте элемент ‹input› типа radio для каждого положения переключателя. Все положения, имеющие отношение к данному переключателю, должны иметь одно имя управляющего элемента... ...но каждое положение должно иметь свое значение. Элемент типа heckbox Элемент типа checkbox создает флаж- ки, которые могут быть либо установленны- ми, либо снятыми. Вы можете использовать сразу несколько флажков, при этом можно установить любое их количество. Как и для переключателей, вы используете по одному элементу ‹input› со значением checkbox атрибута type для каждого положения. Взаимосвязанные флажки также используют одно и то же имя. Каждый флажок имеет собственное значение. То же самое здесь: мы все еще используем элемент ‹input›, просто с другим значением атрибута type. Можно не установить ни одного флажка или установить любое их количество. Это отличает флажки от переключателей. 662 глава 14 textarea Элемент |