Глава_14_Изучаем_HTML__XHTML. 653Переход на интерактивный режим

• Название: 653Переход на интерактивный режим
• Дата: 23.04.2022
• Размер: 4.49 Mb.
• Имя файла: Глава_14_Изучаем_HTML__XHTML.pdf
• Тип: Документы; #491450
• страница: 2 из 4

Starbuzz Bean Machine

Заполните следующую форму и нажмите кнопку «Заказать сейчас»,
чтобы оформить заказ

669
дальше

html-
формы
Äîáàâëåíèå ýëåìåíòà

Если вы уже знаете URL серверного сценария, который будет обрабатывать вашу форму, то остается лишь вставить его в атрибут action вашего элемента (далее работайте самостоятельно и внесите в свой HTML-код соответствующие изменения):

Starbuzz Bean Machine

Заполните следующую форму и нажмите кнопку «Заказать сейчас»,
чтобы оформить заказ


method="
POST">

670
глава 14
Êàê ðàáîòàþò àòðèáóòû name ýëåìåíòîâ ôîðìû
Об атрибуте name вам обязательно нужно знать следующее: он играет роль связующего звена между вашей формой и веб-приложением, которое ее обрабатывает. Рассмотрим, как это работает.



name="city">



processorder.php www.starbuzzcoffee.com
Вводя элементы формы в свой HTML-файл, вы присваиваете им уникальные имена. Вы уже видели, как это делается для текстовых полей, относящихся к типам text и tel:
У каждого элемента управления типа input вашей формы есть атрибут name.
Каждый элемент ‹input› получает индивидуальное имя.
Допустим, вы ввели свое имя, адрес, город, страну, почто- вый индекс и телефон в форму и нажали кнопку
Заказать сейчас
Браузер берет каждый фрагмент данных и помечает его тем именем, которое вы использовали в качестве значения атри- бута name. Затем браузер отправляет имена и значения серве- ру следующим образом.
Когда вы представляете форму на рассмо- трение, браузер упаковывает все данные, используя уникальные имена.
name = Баккару Банзай
address = Институт Банзай
city = Лос-Анджелес
state = США
zip = 90050
phone = 310-555-1212
То, что вы ввели в форму.
Информация, которую браузер упаковывает для сервера.
Уникальные имена для каждого эле- мента формы.
Она нужна серверному сценарию, чтобы данные формы были помечены соответствующим образом.
названия
элементов формы
Каждое уникально е имя получает значение, которо е берется из данных, вводимых в форму.
Обратите внимание, что в данном случае атрибут name элемента имеет значение name (что просто идеально).

671
дальше

html-
формы
В:
В чем разница между элементом
типа text и элементом ?</b><br>O:<br>Вы можете использовать элемент <input> типа text для ввода текстовых данных, которые вмещаются в одну строку, таких как имя или почтовый индекс, а элемент <textarea> приме- няйте для ввода более длинного текста.<br>В:<br><b> Могу ли я изменить надпись </b><br><b>на кнопке отправки формы?</b><br>O:<br>Да, просто используйте в элементе атри- бут value и присвойте ему нужное значение. <br>Вы также можете использовать атрибут value для элемента <input> типа text, чтобы опреде- лить для него текст, который будет отображать- ся по умолчанию.<br>В:<br><b> Есть ли ограничения по объему </b><br><b>информации, который я могу ввести </b><br><b>в элемент <input> типа text или в элемент </b><br><b><textarea>?</b><br>O:<br>Браузеры задают определенные огра- ничения на количество информации, кото- рое можно вводить в элементы <input> или в <textarea>. Однако вряд ли вам когда-то понадобится больше информации, чем допу- скают эти ограничения. Если вы все же хотите ограничить количество символов, которое ваши пользователи могут ввести в элемент <input>, используйте атрибут maxlength и задайте ему значение, равное определенному количеству символов. Например, maxlength=”100” не позво- лит пользователям ввести более 100 символов. <br>Однако для <textarea> в HTML нет способа ограничить количество символов, которое могут ввести пользователи<br>В:<br> <b>Элементы <input> таких типов, как </b><br><b>tel, email и url, выглядят точно так же, как </b><br><b>элемент <input> типа text. А есть ли между </b><br><b>ними разница?</b><br>О:<br>Все элементы <input> типов tel, email и url отправляют соответствующему серверному сценарию текстовые строки и, в сущности, яв- ляются тем же самым, что и элемент <input> типа text. Однако поскольку браузер будет знать, что определенный элемент <input> име- ет тип, например, tel, он сможет более толково подходить к обеспечению интерфейса поль- зователя для людей, зашедших на страницу. <br>Так, некоторые мобильные браузеры могут отображать цифровую телефонную клавиатуру.<br>В:<br><b> Я до сих пор не понял, как имена </b><br><b>ставятся в соответствие данным формы.</b><br>O:<br>Каждый элемент формы имеет уникаль- ное имя и у каждого элемента есть свое зна- чение. Когда вы нажимаете кнопку отправки формы, браузер берет все имена вместе с их значениями и отсылает серверу. Например, когда вы вводите почтовый индекс 90050 в эле- мент <input> типа text с именем zip, браузер отсылает серверу “zip = 90050”, после того как форма представляется на рассмотрение.<br>В:<br><b> Как серверный сценарий уз-</b><br><b>нает, какие имена я собираюсь </b><br><b>использовать? Как мне выбирать </b><br><b>имена для элементов формы?</b><br>O:<br>Хороший вопрос. На самом деле все происходит наоборот: это вы должны знать, какие имена ожидает увидеть ваш серверный сценарий, и, учитывая это, писать свою форму. <br>Если вы <a href="/scenarij-otkritie-memorialenoj-doski-posvyashennoj-geroyam-zem-v2/index.html" title="Сценарий «Открытие мемориальной доски, посвященной героям-землякам, погибшим при исполнении служебного воинского долга в спецоперации на Украине выпускнику Старокулаткинской ">используете серверный сценарий</a>, на- писанный кем-то другим, то этот кто-то должен вам сказать, какие имена нужно использовать, или предоставить вам такую информацию в документации для этого серверного сцена- рия. Неплохо начать с того, чтобы попросить о помощи вашу хостинговую компанию<br>В:<br><b> Почему у элемента <option> нет атри-</b><br><b>бута name? У всех остальных элементов </b><br><b>форм он есть.</b><br>O:<br>Хорошее замечание. Все элементы <br><option> являются частью меню, которое со- здается элементом <select>. Нам нужно лишь одно имя для всего меню, и оно уже присвоено элементу <select>. Иначе говоря, элементам <br><option> не нужен атрибут name, потому что в элементе <select> уже указано имя для всего меню целиком. Не забывайте, что при пред- ставлении формы на рассмотрение на сервер под этим именем отсылается только то зна- чение, которое пользователь выбрал в меню<br>В:<br><b> Разве вы не говорили, что имя каж-</b><br><b>дого элемента формы должно быть уни-</b><br><b>кальным? Но все элементы <input> типа </b><br><b>radio имеют одинаковое имя.</b><br>O:<br>Верно. Положения для переключателей всегда используются группами. Подумайте над этим: если вы установите одно положение переключателя, то остальные станут неактив- ными. Итак, чтобы браузер знал, что положе- ния переключателя взаимосвязаны, для них используется одно имя. Допустим, у вас есть переключатель под названием “color” (цвет) с положениями “красный”, “зеленый” и “синий”. <br>Во <a href="/pejzaj-kak-vid-izobrazitelenogo-iskusstva-solnechnij-denek/index.html" title="Пейзаж как вид изобразительного искусства. «Солнечный денёк»">всех значениях указаны цвета</a>, и выбран мо- жет быть только один, так что в указании одного общего имени для всего набора есть логика.<br>В:<br><b> Флажки работают так же, как пере-</b><br><b>ключатели?</b><br>O:<br>Да. Единственное отличие состоит в том, что вы можете установить сразу несколько флажков. Когда браузер отсылает данные формы серверу, он комбинирует значения всех флажков в одно и отсылает их под име- нем элемента checkbox. Допустим, у вас есть флажки под общим названием “spice” (специи) со значениями “соль”, “перец” и “чеснок”, и вы установили их все. В результате браузер ото- шлет серверу выражение “spice = соль&пе- рец&чеснок”.<br>часто<br>Задаваемые вопросы<br></div> <div> <br><b>672</b><br><i><b>глава 14</b></i><br>Âåðíåìñÿ ê ðàçìåùåíèþ ýëåìåíòîâ <input> â HTML<br>Теперь у нас есть элементы <b><input></b> внутри формы. Взгляните на дополнения, описанные ниже, и внесите соответствующие изменения в свой файл form.html.<br>Это ТОЛЬКО фрагмент формы form.html.<br>Начнем с того, что поместим все внутрь элемента ‹p›.<br>Вложите элементы непосредственно в форму.<br>Это все элементы <br>‹input›: по одному для каждого элемента типа text в разделе формы под названием <br>«Доставить по адресу».<br>Мы добавили метку для каждого поля, чтобы пользователь знал, что вводить.<br>Вы также должны знать, что ‹input› — это строч- ный элемент, поэтому если вы хотите, чтобы между элементами ‹input› были разрывы строки, придется добавить элементы ‹br›. Именно поэтому вам также нужно вложить их в элемент ‹p›.<br>Наконец, пользователям нужна кнопка, после нажатия которой данные будут отправлены на сервер. Добавьте ее на форму, указав элемент ‹input› типа submit в самом конце кода. Кроме того, задайте для нее значение «Заказать сейчас», в резуль- тате чего надпись на кнопке поменяется.<br>После того как вы внесете все эти изменения, сохраните файл form.html и двигайтесь дальше!<br>Не забудьте проверить свой HTML- код на валидность. Элементы фор- мы тоже должны быть проверены!<br><i><b>добавление </b></i><br><i><b>элементов input</b></i><br><b> <form action="http://starbuzzcoffee.com/processorder.php" method="POST"></b><br><b> <br></b>Ship to: <b><br></b><br> Имя: <br><b><input type="text" name="name"> <br></b><br> Адрес: <br><b><input type="text" name="address"> <br></b><br> Город: <br><b><input type="text" name="city"> <br></b><br> Страна: <br><b><input type="text" name="state"> <br></b><br> Почтовый индекс: <br><b><input type="text" name="zip"> <br></b><br>Телефон: <b><input type="tel" name="phone"> <br></b><br><b> <br></b><br><b> <br></b><br><b> <input type="submit" value="Заказать сейчас"> </b><br><b> <br></b><br><b> </form></b><br></div> <div> <br><b>673</b><br><i><b>дальше</b></i><br><br><i><b>html-</b></i><br><i><b>формы</b></i><br>Òåñò äëÿ ôîðìû<br>Это ответ серверного сценария. Кажется, серверный сценарий получил нужную информацию, но мы предоставили не все необходимые ему данные.<br>Обновите страницу, заполните текстовые поля и пред- ставьте форму на рассмотрение. Когда вы это сдела- ете, браузер упакует данные и отошлет их по адресу, указанному в атрибуте <b>action</b>. В данном случае это <br><b>starbuzzcoffee.com</b><br>Вы же не думаете, что мы дадим вам пример, который в реальности не работает? Сайт starbuzzcoffee.<br>com готов принять вашу форму на обработку. Не упустите эту возможность!<br>Äîáàâèì â ôîðìó åùå íåñêîëüêî ýëåìåíòîâ <input><br>Кажется, серверный сценарий не позволит нам двигаться дальше, пока мы не укажем, какие сорта кофе хотим заказать, должен ли этот кофе быть мо- лотым или в зернах. Добавим возможность такого выбора, поместив в форму элемент <b><select></b>. Помните, что этот элемент содержит перечень парамет- ров, каждый из которых можно выбрать в раскрывающемся списке. Кроме того, в соответствие каждому пункту списка ставится значение. Когда форма представляется на рассмотрение, значение выбранного пункта списка отсы- лается серверу. Переверните страницу и посмотрите, как правильно добавить элемент <b><select></b>.<br>Это форма.<br>Это ответ после рассмотрения формы серверным сценарием.<br>Обратите внимание на то, как изменился URL в адресной строке браузера, после того как вы пред- ставите форму на рассмотре- ние (вы увидите его в атрибуте action элемента <form>).<br></div> <div> <br><b>674</b><br><i><b>глава 14</b></i><br>Äîáàâëåíèå ýëåìåíòà <select><br>Это наш новый элемент ‹select›. <br>Он имеет уникальное имя.<br>Внутрь мы помещаем элементы ‹option› — по одному для каждого сорта кофе.<br><b><option value="Гватемала"></b>Гватемала<b></option></b><br>У каждого элемента <option> есть свое значение.<br>Когда браузер упаковывает имена и значения формы, он использует имя элемента ‹select› вместе со зна- чением выбранного элемента option.<br>В данном случае браузер отошлет серверу выражение beans = “Гватемала”.<br>Содержимое элемента используется в качестве пункта раскрывающегося списка.<br><i><b>использование</b></i><br><i><b>элемента select</b></i><br>HTML крупным планом<br><b><form action="http://starbuzzcoffee.com/processorder.php" method="post"></b><br><b> <br></b><br>Выберите кофе:<br><b> <select name="beans"></b><br><b> <option value="Смесь"></b>Домашняя смесь<b></option></b><br><b> <option value="Боливия"></b>Боливия<b></option></b><br><b> <option value="Гватемала">Гватемала</option></b><br><b> <option value="Кения"></b>Кения<b></option></b><br><b> </select></b><br><b> <br></b><br><b> <br></b><br>Доставить по адресу: <b><br></b><br>Имя: <b><input type="text" name="name" value=""><br></b><br>Адрес: <b><input type="text" name="address" value=""><br></b><br>Город: <b><input type="text" name="city" value=""><br></b><br>Страна: <b><input type="text" name="state" value=""><br></b><br>Почтовый индекс: <b><input type="text" name="zip" value=""><br></b><br>Телефон: <b><input type="tel" name="phone" value=""><br></b><br><b> <br></b><br><b> <br></b><br><b> <input type="submit" value="Заказать сейчас"></b><br><b> <br></b><br><b></form></b><br>Давайте подробно рассмотрим элемент <b><option></b>.<br></div> <div> <br><b>675</b><br><i><b>дальше</b></i><br><br><i><b>html-</b></i><br><i><b>формы</b></i><br>Òåñò äëÿ ýëåìåíòà <select><br>Теперь посмотрим, как работает элемент <b><select></b>. Обно- вите страницу, и вы увидите, что появился раскрывающийся список. Выберите любимый сорт кофе, заполните осталь- ные поля формы и сделайте заказ.<br>Мы еще не представили серверному сценарию всю необходимую ему информацию, но он по крайней мере успешно принял те данные, которые были введены в форму.<br>Это результат выбора ‹select›.<br>Это данные, введенные в текстовые поля, включая поле для указания телефона.<br>Это форма, дополненная элементом ‹select›. Обратите внимание, что здесь есть все параметры.<br>Похоже, что Star buzz Bean <br>Machine будет считать, что мы <a href="/silenie-storoni-v3/index.html" title="Сильные стороны">хотим заказать один пакетик кофе</a>, если мы сами не укажем, сколько именно пакетиков нам тр ебуется.<br></div> <div> <br><b>676</b><br><i><b>глава 14</b></i><br>Измените значение атрибута <b>name</b> элемента <b><select></b> на <b>thembeans</b>. Обновите форму и сде- лайте новый заказ. Как это повлияло на ответ, который вы получили от серверного сценария?<br>Ïðåäîñòàâüòå êëèåíòó âûáîð — <br>ìîëîòûé êîôå èëè êîôå â çåðíàõ<br>Клиент должен иметь возможность выбрать, какой кофе зака- зать: молотый или в зернах. Для этого мы создаем переключа- тели. Они действуют как кнопки на радиоприемниках в старых автомобилях: можно нажать только одну из них. В HTML это работает следующим образом: вы создаете по одному элемен- ту <b><input></b> типа <b>radio</b> для каждого положения переключателя. <br>В данном случае вам нужны два положения: одно для молотого кофе, другое — для кофе в зернах. Рассмотрим, как это выглядит:<br><b><br>Тип: <br></b><br><b> <input type="radio" name="beantype" value="зерна"> Кофе в зернах <br></b><br><b> <input type="radio" name="beantype" value="молотый"> Молотый кофе</b><br><b><br></b><br>Здесь есть два положения пере- ключателя: одно для кофе в зернах, другое — для молотого кофе.<br>Для этого мы используем элемент ‹input› и установим для него тип radio.<br>Это уникальное имя. <br>Все положения одного переключателя имеют одно имя.<br>Вот значения, кото- рые будут отправлены серверному сценарию. <br>Причем отправлено бу- дет только одно из них <br>(то, которое выбрано при представлении фор- мы на рассмотрение).<br>Обратите внимание, что для переключа- телей метки часто ставятся справа от самого элемента.<br><i>После того как вы выполните это упражнение, убедитесь, что изменили значение атрибута </i><br><i>name обратно на beans.</i><br><i><b>предоставим</b></i><br><i><b>выбор</b></i><br><b>Мозговой</b><br><b>штурм</b><br></div> <div> <br><b>677</b><br><i><b>дальше</b></i><br><br><i><b>html-</b></i><br><i><b>формы</b></i><br>Îôîðìëåíèå ïåðåêëþ÷àòåëåé<br>Возьмите код для переключателя с предыдущей страницы и вставьте его в свой HTML-код, прямо под абзац, содержащий элемент <b><select></b>. Убеди- тесь, что обновили страницу, и снова представьте форму на рассмотрение.<br>Скорее всего, после обновления страницы не будет выбрано ни одно положение переключателя, но это зависит от того, какой браузер вы используете.<br>Ого! Кафе Starbuzz приняло наш заказ, хотя мы даже не завершили работу над формой. Нам все еще нужно добавить коли- чество пакетиков, доставку к определенной дате, сведения о подарочной упаковке и об- ласть для ввода комментариев клиентов.<br>Как же могло случиться, что заказ был успеш- но принят, а на форме еще не все элементы? <br>Все зависит от того, как запрограммирован сер- верный сценарий. В данном случае он настро- ен на обработку заказа даже в том случае, если вместе с остальными данными не представлена информация о подарочной упаковке, каталоге и комментариях клиента. Чтобы узнать, какие именно элементы формы требуются серверному сценарию, спросите об этом разработчика или прочитайте в документации.<br></div> <div> <br><b>678</b><br><i><b>глава 14</b></i><br>80 % наших клиентов заказывают молотый кофе. <a href="/olimpiada-po-matematike-4-klass-zadanie-1-1b/index.html" title="Олимпиада по математике 4 класс Задание №1 (1б.)">Можете ли вы сделать так</a>, чтобы, когда пользователь загружает страницу, по умолчанию было выбрано положение переключателя для заказа кофе в зернах?<br>Если вы добавите логический атрибут checked со значением checked в эле- мент input типа radio, то при отображении формы браузером этот элемент будет выбран по умолчанию. Добавьте атрибут checked в элемент <input> типа radio под названием зерна и протестируйте страницу. Решение упражнения вы найдете в конце главы.<br>(Помните, что логическим атрибутам не требуются значения; если атрибут checked присутствует, то соответствующий элемент управления для ввода информации будет выбран).<br><i><b>добавление </b></i><br><i><b>флажков</b></i><br>Èñïîëüçîâàíèå äðóãèõ òèïîâ <input><br>Далее нам необходимо обеспечить наличие поля «Количество пакетиков», в котором пользователь смо- жет указать количество пакетиков кофе, которое он желает приобрести, и поля «Доставить к указанной дате» для указания даты, к которой должен быть доставлен его заказ. Оба этих поля будут элементами <br><b><input></b><br>, однако вместо того чтобы просто использовать базовые элементы <b><input></b> типа <b>text</b>, мы мо- жем конкретизировать то, какой именно тип мы хотим в случае с этими элементами <b><input></b>, применив тип <b>number</b> для «Количество пакетиков» и тип <b>date</b> — для «Доставить к указанной дате».<br>В случае с полем «Количество пакетиков» мы можем обеспечить еще большую конкретизацию, задав минимальное и максимальное количество пакетиков, которое можно будет указать:<br>Количество пакетиков: <br><b><input type="number" name="bags" min="1" max="10"></b><br>Доставить к указанной дате: <br><b><input type="date" name="date"></b><br>Теперь, если вы попробуете ввести значение ко- личества пакетиков, которое больше 10 или мень- ше 1, в браузерах, поддерживающих такой тип <br><b><input></b><br>, как <b>number</b>, будет выводиться сообще- ние об ошибке, когда вы попытаетесь отправить форму, в котором будет сказано, что введенное вами значение является неправильным.<br>Задействовав тип number и задав минимально е и максимальное количество пакетиков, мы можем установить требуемое нам ограничение на ввод значений (мы не хотим, чтобы покупатели заказывали за раз более 10 пакетиков коф е одного типа!).<br>Благодаря тому что здесь мы применили тип date, браузеры, подд ерживающие его, бу- дут помогать покупателям, <a href="/programma-na-paskale-v-kotoroj-okrujnoste-peremeshaetsya-po-ek/index.html" title="Программа на паскаль, в которой окружность перемещается по экрану">выводя на экран такой элемент управления</a>, как календарь.<br>Пользователь получит сообщение об ошибке, если попы- тается ввести значение, которое будет больше<br>(или меньше) установленного максимума (или минимума).<br></div> <div> <br><b>679</b><br><i><b>дальше</b></i><br><br><i><b>html-</b></i><br><i><b>формы</b></i><br><b><form action="http://starbuzzcoffee.com/processorder.php" method="post"></b><br><b> <br></b><br>Выберите кофе:<br><b> <select name="beans"></b><br><b> <option value="Домашняя смесь"></b>Домашняя смесь<b></option></b><br><b> <option value="Боливия"></b>Боливия<b></option></b><br><b> <option value="Гватемала"></b>Гватемала<b></option></b><br><b> <option value="Кения"></b>Кения<b></option></b><br><b> </select></b><br><b> <br></b><br><b> <br></b><br>Type:<b><br></b><br><b> <input type="radio" name="beantype" value="зерна"></b>Кофе в зернах<b><br></b><br><b> <input type="radio" name="beantype" value="молотый"></b>Молотый кофе<br><b> <br></b><br><b> <br></b><br>Количество пакетиков: <b><input type="number" name="bags" min="1" max="10"></b><br><b> <br></b><br><b> <br></b><br>Доставить к указанной дате: <b><input type="date" name="date"></b><br><b> <br></b><br><b> <br></b><br>Доставить по адресу: <b><br></b><br>Имя: <b><input type="text" name="name" value=""><br></b><br>Адрес: <b><input type="text" name="address" value=""><br></b><br>Город: <b><input type="text" name="city" value=""><br></b><br>Страна: <b><input type="text" name="state" value=""><br></b><br>Почтовый индекс: <b><input type="text" name="zip" value=""><br></b><br>Телефон: <b><input type="tel" name="phone" value=""><br></b><br><b> <br></b><br><b> <br></b><br><b> <input type="submit" value="Заказать сейчас"></b><br><b> <br></b><br><b></form></b><br>Äîáàâëåíèå òàêèõ òèïîâ <input>, êàê number è date<br>Добавьте два новых элемента <b><input></b> в свой файл form.html, разместив их под элементами <b><input></b> с <b>name="beantype"</b> и над полями «Доставить по адресу:», а затем протестируйте свой новый код.<br>Сюда мы добавили новый код. Помните, что браузеры могут отображать данные элементы по-разному, то есть все будет за- висеть от того, какой именно браузер вы ис- пользуете. Проведите тестирование на более чем одном браузере!<br>Переверните страницу, чтобы увидеть результаты нашего тестирования…<br></div> <div> <br><b>680</b><br><i></input></input></input></input></input></input></input></input></input></input></input></input></input></input></input></input></input></input></input></input></input></input></input></input></input></select></select></select></input></input></input></input></input></input></input></select></select></select></select></input></input></input></input></input></input></input></input></input></input></input></select></select></select></input></input></input></input></input></input>

1   2   3   4