Создание форм Лекция 6. Сбор информации Элементы форм, такие как области редактирования текста, поля ввода флажков или меню, позволяют посетителям веб-сайта. - презентация

1 Создание форм Лекция 6

2 Сбор информации Элементы форм, такие как области редактирования текста, поля ввода флажков или меню, позволяют посетителям веб-сайта вводить информацию и выбирать требуемые операции. Элементы форм, такие как области редактирования текста, поля ввода флажков или меню, позволяют посетителям веб-сайта вводить информацию и выбирать требуемые операции. При добавлении элемента формы, необходимо указать его имя. Имена служат только для различения элементов форм на веб-странице, в окне браузера они не отображаются. Когда пользователь вводит данные он выбирает требуемую опцию, соответствующему элементу формы присваивается определенное значение. После щелчка на кнопке SUBMIT имя элемента и его значение отсылается на веб-сервер или отправляется абоненту эл.почты по указанному адресу. При добавлении элемента формы, необходимо указать его имя. Имена служат только для различения элементов форм на веб-странице, в окне браузера они не отображаются. Когда пользователь вводит данные он выбирает требуемую опцию, соответствующему элементу формы присваивается определенное значение. После щелчка на кнопке SUBMIT имя элемента и его значение отсылается на веб-сервер или отправляется абоненту эл.почты по указанному адресу.

3 Проектирование форм Формы, должны быть привлекательны внешне и просты в использовании. Чтобы форма помещалась в границах одного экрана, она должна содержать не более 40 текстовых строк по вертикали и 75 символов по горизонтали. Формы, должны быть привлекательны внешне и просты в использовании. Чтобы форма помещалась в границах одного экрана, она должна содержать не более 40 текстовых строк по вертикали и 75 символов по горизонтали. Добавляя в форму новые элементы, группируйте их по значению и сопровождайте надписями, внятно поясняющими, какого рода информация должна быть введена пользователем. Если речь идет о полях редактирования и областях ввода многострочного текста, убедитесь, что размеры элементов соответствуют объему информации, которая должна вводиться. Например, поле редактирования, предназначенное для хранения номера телефона, должно обеспечивать возможность набора строки и текста длиной не менее символов. Может оказаться полезным отобразить рядом текст с примером, который поможет неискушенному пользователю правильно ввести всю требуемую информацию. Добавляя в форму новые элементы, группируйте их по значению и сопровождайте надписями, внятно поясняющими, какого рода информация должна быть введена пользователем. Если речь идет о полях редактирования и областях ввода многострочного текста, убедитесь, что размеры элементов соответствуют объему информации, которая должна вводиться. Например, поле редактирования, предназначенное для хранения номера телефона, должно обеспечивать возможность набора строки и текста длиной не менее символов. Может оказаться полезным отобразить рядом текст с примером, который поможет неискушенному пользователю правильно ввести всю требуемую информацию.

4 Обработка информации Когда веб-сервер получает информацию о заполненной форме, он запускает на выполнение одну или несколько программ, которые носят название сценариев CGI (Common Gateway Interface). Например, сценарий CGI способен отослать результаты заполнения формы по электронной почте, сохранить их в виде внешнего файла, либо внести в базу данных, размещенную на веб-сервере. Когда веб-сервер получает информацию о заполненной форме, он запускает на выполнение одну или несколько программ, которые носят название сценариев CGI (Common Gateway Interface). Например, сценарий CGI способен отослать результаты заполнения формы по электронной почте, сохранить их в виде внешнего файла, либо внести в базу данных, размещенную на веб-сервере. Когда веб-броузер отсылает на сервер данные, введенные пользователем, он осуществляет кодирование информации, добавляя вспомогательные символы. Когда веб-броузер отсылает на сервер данные, введенные пользователем, он осуществляет кодирование информации, добавляя вспомогательные символы. Например, каждый символ пробела в этом случае приобретает вид символа плюс, а пары имен элементов и присвоенных им значений разделяются символом амперсанта &. Символы, отличные от букв и цифр, такие как знак доллара, представляются в виде последовательности, состоящей из знака %, за которым следует 16- ный номер символа. Например, каждый символ пробела в этом случае приобретает вид символа плюс, а пары имен элементов и присвоенных им значений разделяются символом амперсанта &. Символы, отличные от букв и цифр, такие как знак доллара, представляются в виде последовательности, состоящей из знака %, за которым следует 16- ный номер символа.

5 Дескриптор FORM Дескриптор FORM позволяет снабдить веб-страницу объектом формы. На веб-странице допускается размещать любое число различных форм. Дескриптор FORM позволяет снабдить веб-страницу объектом формы. На веб-странице допускается размещать любое число различных форм. Атрибут METHOD позволяет определить, каким образом информация, введенная пользователем, будет передаваться по интернету. Атрибут METHOD позволяет определить, каким образом информация, введенная пользователем, будет передаваться по интернету. Возможные значения: Возможные значения: get – этот протокол установлен по умолчанию. Передает данные в виде параметра переменной. Информация из формы добавляется в конец URL, который был указан в описании заголовка формы. get – этот протокол установлен по умолчанию. Передает данные в виде параметра переменной. Информация из формы добавляется в конец URL, который был указан в описании заголовка формы. post – позволяет передавать большие объемы данных. Этот метод передает всю информацию о форме немедленно после обращения к указанному URL. Наиболее употребительный способ доставки данных. Метод Post обеспечивает больший уровень безопасности и особенно удобен при работе с крупными формами. post – позволяет передавать большие объемы данных. Этот метод передает всю информацию о форме немедленно после обращения к указанному URL. Наиболее употребительный способ доставки данных. Метод Post обеспечивает больший уровень безопасности и особенно удобен при работе с крупными формами.

6 Дескриптор FORM Атрибут ACTION служит для указания места назначения данных формы, отсылаемых браузером. Браузер может отправить информацию либо на обработку сценарием cgi, расположенным на веб-сервере, либо по указанному адресу электронной почты. Атрибут ACTION служит для указания места назначения данных формы, отсылаемых браузером. Браузер может отправить информацию либо на обработку сценарием cgi, расположенным на веб-сервере, либо по указанному адресу электронной почты. Сценарий cgi –программа, запускаемая на выполнение веб-сервером и предназначенная для обработки данных формы, введенных пользователем. Сценарий cgi –программа, запускаемая на выполнение веб-сервером и предназначенная для обработки данных формы, введенных пользователем.

7 Дескриптор FORM Когда данные передаются из формы на Web-сервер, они, как правило, кодируются по умолчанию MIME-форматом application/x-www-form-urlencoded. В данном методе кодирования пробелы заменяются на знак +, а нестандартные символы на комбинацию %nn, где nn соответствует коду символа в таблице ASCII. С помощью атрибута ENCTYPE можно изменить метод кодирования информации, принятый по умолчанию. Например, при использовании протокола mailto в URL в атрибуте ACTION более приемлемым является MIME-формат text/plain. Когда данные передаются из формы на Web-сервер, они, как правило, кодируются по умолчанию MIME-форматом application/x-www-form-urlencoded. В данном методе кодирования пробелы заменяются на знак +, а нестандартные символы на комбинацию %nn, где nn соответствует коду символа в таблице ASCII. С помощью атрибута ENCTYPE можно изменить метод кодирования информации, принятый по умолчанию. Например, при использовании протокола mailto в URL в атрибуте ACTION более приемлемым является MIME-формат text/plain. Если необходимо, чтобы веб-браузер отсылал результаты заполнения формы по эл.почте, необходимо обратиться к атрибуту ENCTYPE, гарантирующее доставку данных в приемлемом формате. ENCTYPE – определяет тип содержимого формы. Средства оказываются особо полезными в том случае, если конкретный веб- сервер не разрешает пользоваться сценарием. Если необходимо, чтобы веб-браузер отсылал результаты заполнения формы по эл.почте, необходимо обратиться к атрибуту ENCTYPE, гарантирующее доставку данных в приемлемом формате. ENCTYPE – определяет тип содержимого формы. Средства оказываются особо полезными в том случае, если конкретный веб- сервер не разрешает пользоваться сценарием. Атрибут сообщает браузеру о способе кодирования перед отсылкой серверу. Возможные значения: Атрибут сообщает браузеру о способе кодирования перед отсылкой серверу. Возможные значения: text/plain – используется при пересылке данных на . text/plain – используется при пересылке данных на . text/html - используется при пересылке данных на . text/html - используется при пересылке данных на . Стандартный. Стандартный. enctype=application/x-www-form-urlencoded enctype=application/x-www-form-urlencoded Упрощенный. Упрощенный. enctype=text/plain enctype=text/plain

8 Дескриптор FORM Атрибут ACCEPT-CHARSET дает возможность принудительно задать вид кодировки данных, отсылаемых на веб-сервер. Атрибут ACCEPT-CHARSET дает возможность принудительно задать вид кодировки данных, отсылаемых на веб-сервер. Например, если пользователь вводит информацию по-русски, сервер должен правильно интерпретировать символы в одном из соответствующих форматов кодировки – KOI8-R. Например, если пользователь вводит информацию по-русски, сервер должен правильно интерпретировать символы в одном из соответствующих форматов кодировки – KOI8-R.

9 Группы элементов формы Для логического объединения того, что связано со сведениями о пользователе, и того, что связано с его мнением был введен тег. Все, что находилось между ним и его закрывающим тегом, будет обведено в рамку и озаглавлено так, как указано в теге. Теги и поддерживаются пока только в Internet Explorer версии 4 и выше, в браузер Netscape начал поддерживать их только в шестой версии. Атрибут ALIGN служит для выравнивания текста заголовка влево (значение left), вправо (right), вверх (top), вниз (bottom) относительно группы. В данный момент браузерами верно интерпретируются только два значения – left и right. Для логического объединения того, что связано со сведениями о пользователе, и того, что связано с его мнением был введен тег. Все, что находилось между ним и его закрывающим тегом, будет обведено в рамку и озаглавлено так, как указано в теге. Теги и поддерживаются пока только в Internet Explorer версии 4 и выше, в браузер Netscape начал поддерживать их только в шестой версии. Атрибут ALIGN служит для выравнивания текста заголовка влево (значение left), вправо (right), вверх (top), вниз (bottom) относительно группы. В данный момент браузерами верно интерпретируются только два значения – left и right. В браузере Internet Explorer значение атрибута TITLE= выводится в качестве всплывающей подсказки при наведении мыши на содержимое элемента. Кстати, это относится также и к другим тегам, которые могут иметь атрибут TITLE=. Можно, например, установить его даже у элемента. А то, что находится между тегами и, будет вынесено в заголовок рамки. В браузере Internet Explorer значение атрибута TITLE= выводится в качестве всплывающей подсказки при наведении мыши на содержимое элемента. Кстати, это относится также и к другим тегам, которые могут иметь атрибут TITLE=. Можно, например, установить его даже у элемента. А то, что находится между тегами и, будет вынесено в заголовок рамки.

10 Поля редактирования Поля редактирования позволяют вводить короткие фрагменты текста - имена, адреса и т.д. Поля редактирования позволяют вводить короткие фрагменты текста - имена, адреса и т.д. При создании поля редактирования используется атрибут NAME для наименования объекта. Имя поля поможет различить его в наборе данных, отсылаемых на сервер. Наименование поля может состоять только из буквенных и цифровых символов – знаки, пробелы и пунктуации использовать не разрешается. Если необходимо ввести пробелы, замените их символами подчеркивания. При создании поля редактирования используется атрибут NAME для наименования объекта. Имя поля поможет различить его в наборе данных, отсылаемых на сервер. Наименование поля может состоять только из буквенных и цифровых символов – знаки, пробелы и пунктуации использовать не разрешается. Если необходимо ввести пробелы, замените их символами подчеркивания. Атрибут SIZE предназначен для задания ширины поля редактирования при его воспроизведении в окне браузера. По умолчанию ширина выбирается достаточной для отображения около 20 символов. Значение, присвоенное атрибуту SIZE, не оказывает влияния на длину строки символов, которую сможет ввести пользователь. Атрибут SIZE предназначен для задания ширины поля редактирования при его воспроизведении в окне браузера. По умолчанию ширина выбирается достаточной для отображения около 20 символов. Значение, присвоенное атрибуту SIZE, не оказывает влияния на длину строки символов, которую сможет ввести пользователь.

11 Поля редактирования Чтобы ограничить емкость поля редактирования, следует применить атрибут MAXLENGTH – удобное средство первично контроля корректности данных, вводимых пользователем. Например, если поле предназначено для хранения 3-х символьного кода валюты, уместно присвоить атрибуту MAXLENGTH значение 3. Чтобы ограничить емкость поля редактирования, следует применить атрибут MAXLENGTH – удобное средство первично контроля корректности данных, вводимых пользователем. Например, если поле предназначено для хранения 3-х символьного кода валюты, уместно присвоить атрибуту MAXLENGTH значение 3. При создании поля редактирования, предназначенного для хранения конфиденциальной информации, которую необходимо защитить от просмотра посторонними лицами в момент ее ввода, атрибуту TYPE дескриптора INPUT следует присвоить значение PASSWORD. По мере заполнения такого поля браузер вместо реальных данных будет отображать символы звездочки (*). При создании поля редактирования, предназначенного для хранения конфиденциальной информации, которую необходимо защитить от просмотра посторонними лицами в момент ее ввода, атрибуту TYPE дескриптора INPUT следует присвоить значение PASSWORD. По мере заполнения такого поля браузер вместо реальных данных будет отображать символы звездочки (*). Введите пароль: Введите пароль: Атрибут TYPE может применять следующие значения: Атрибут TYPE может применять следующие значения: Text Text Password Password Checkbox Checkbox File File Radio Radio Submit Submit Reset Reset Image Image Hidden Hidden HIDDEN: скрытое текстовое поле Поля данного типа не отображаются броузером и не дают пользователю возможность изменять присвоенные данному полю по умолчанию значения. Скрытое поле используется для передачи в CGI-программу вспомогательной информации: ID пользователя, пароля или другой информации. HIDDEN: скрытое текстовое поле Поля данного типа не отображаются броузером и не дают пользователю возможность изменять присвоенные данному полю по умолчанию значения. Скрытое поле используется для передачи в CGI-программу вспомогательной информации: ID пользователя, пароля или другой информации.

12 Поля редактирования Атрибут VALUE позволяет поместить в создаваемое поле некоторое исходное текстовое значение, которое затем может быть отредактировано, либо принять им без изменения. С помощью этого атрибута удобно также располагать внутри поля краткие пояснительные инструкции. Атрибут VALUE позволяет поместить в создаваемое поле некоторое исходное текстовое значение, которое затем может быть отредактировано, либо принять им без изменения. С помощью этого атрибута удобно также располагать внутри поля краткие пояснительные инструкции. Дата рождения: Дата рождения:

13 Поля редактирования Атрибут CHEKED позволяет установить переключатель заранее, так чтобы при воспроизведении страницы опция выбиралась автоматически. Предварительный выбор наиболее популярных опций-переключателей, выполненный вами, поможет пользователям сэкономить рабочее время. Атрибут CHEKED позволяет установить переключатель заранее, так чтобы при воспроизведении страницы опция выбиралась автоматически. Предварительный выбор наиболее популярных опций-переключателей, выполненный вами, поможет пользователям сэкономить рабочее время. Атрибут ACCESSKEY дает возможность назначить элементу формы, такому как переключатель, горячую комбинацию клавиш, что позволит пользователям быстро выбирать необходимую опцию одновременным нажатием ALT и соответствующей буквенной или цифровой клавиши. Чтобы задать атрибут, введите в пределах дескриптора элемента формы ACCESSKEY=? и замените ? буквенным или цифровым символом. Атрибут ACCESSKEY дает возможность назначить элементу формы, такому как переключатель, горячую комбинацию клавиш, что позволит пользователям быстро выбирать необходимую опцию одновременным нажатием ALT и соответствующей буквенной или цифровой клавиши. Чтобы задать атрибут, введите в пределах дескриптора элемента формы ACCESSKEY=? и замените ? буквенным или цифровым символом.

14 Создание меню Если в распоряжение пользователей необходимо предоставить набор альтернативных опций, эту задачу удобно решить с помощью элемента формы, называемого меню. Меню обычно используется для перечисления доступных режимов работы, отображения списков товаров, услуг и т.п. Если в распоряжение пользователей необходимо предоставить набор альтернативных опций, эту задачу удобно решить с помощью элемента формы, называемого меню. Меню обычно используется для перечисления доступных режимов работы, отображения списков товаров, услуг и т.п. Атрибут NAME позволяет задать имя меню, служащее для различения объекта в наборе данных об элементах формы, который отсылается на веб-сервер. Атрибут NAME позволяет задать имя меню, служащее для различения объекта в наборе данных об элементах формы, который отсылается на веб-сервер. По умолчанию объект меню воспроизводится на веб-странице в виде раскрывающегося списка, в котором единовременно виден только один, текущий, элемент из группы доступных опций. Если необходимо, чтобы отображалось сразу несколько элементов, следует применить атрибут SIZE, позволяющий указать число элементов меню, которые сможет увидеть пользователь, не прибегая к помощи полосы прокрутки. По умолчанию объект меню воспроизводится на веб-странице в виде раскрывающегося списка, в котором единовременно виден только один, текущий, элемент из группы доступных опций. Если необходимо, чтобы отображалось сразу несколько элементов, следует применить атрибут SIZE, позволяющий указать число элементов меню, которые сможет увидеть пользователь, не прибегая к помощи полосы прокрутки.

15 Создание меню Дескриптор служит для определения отдельного элемента меню. Атрибут VALUE используется для именования элемента. При выборе опции указанное имя будет передано в итоговый набор данных формы. Дескриптор служит для определения отдельного элемента меню. Атрибут VALUE используется для именования элемента. При выборе опции указанное имя будет передано в итоговый набор данных формы. Атрибут SELECTED позволяет выбрать определенный элемент меню предварительно, так чтобы при воспроизведении страницы соответствующая опция устанавливалась автоматически. Это удобно, если речь идет о варианте, который, по вашему мнению, так или иначе будет выбираться большинством пользователей. Атрибут SELECTED позволяет выбрать определенный элемент меню предварительно, так чтобы при воспроизведении страницы соответствующая опция устанавливалась автоматически. Это удобно, если речь идет о варианте, который, по вашему мнению, так или иначе будет выбираться большинством пользователей. Менее 20 Менее Более 30 Более 30

16 Создание меню Атрибут MULTIPLE дескриптора предоставляет пользователям возможность выбора единовременно более одной опции меню с помощью щелчков кнопкой мыши при нажатой клавиши. При использовании атрибута MULTIPLE меню всегда отображается в распахнутом виде, а не в форме раскрывающегося списка, как обычно. Атрибут MULTIPLE дескриптора предоставляет пользователям возможность выбора единовременно более одной опции меню с помощью щелчков кнопкой мыши при нажатой клавиши. При использовании атрибута MULTIPLE меню всегда отображается в распахнутом виде, а не в форме раскрывающегося списка, как обычно. Пример: Пример: В каких странах вы уже побывали? В каких странах вы уже побывали? США США Франция Франция Италия Италия

17 Создание многоуровневого меню Дескриптор позволяет построить многоуровневое меню – удобный инструмент представления данных, поделенных на категории по тематическому принципу. Атрибут LABEL служит для задания имени элемента основного меню, который ссылается на вложенное меню. Дескриптор позволяет построить многоуровневое меню – удобный инструмент представления данных, поделенных на категории по тематическому принципу. Атрибут LABEL служит для задания имени элемента основного меню, который ссылается на вложенное меню. Пример: Пример: Что Вы любите поесть-попить? Что Вы любите поесть-попить? Жареная курица Жареная курица Гречневая каша Гречневая каша Сок Сок Молоко Молоко

18 Область ввода многострочного текста Дескриптор TEXTAREA позволяет создать, в которую пользователь может ввести несколько строк или абзацев произвольного текста – например, адресовать вопросы авторам сайта или поделиться с ними собственным мнением. Дескриптор TEXTAREA позволяет создать, в которую пользователь может ввести несколько строк или абзацев произвольного текста – например, адресовать вопросы авторам сайта или поделиться с ними собственным мнением. Атрибут NAME служит для задания имени создаваемой области ввода многострочного текста, которое помогает различить объект в наборе данных, отсылаемых на веб-сервер. Атрибут NAME служит для задания имени создаваемой области ввода многострочного текста, которое помогает различить объект в наборе данных, отсылаемых на веб-сервер. Атрибуты ROWS и COLS предназначены для определения значения высоты и ширины области ввода. Поскольку читателям не дано права изменять параметры подобных объектов на веб-странице, о том, чтобы область ввода умещалась в пределах экрана и пользователям было удобно с ней работать, должны позаботиться вы сами. Атрибуты ROWS и COLS предназначены для определения значения высоты и ширины области ввода. Поскольку читателям не дано права изменять параметры подобных объектов на веб-странице, о том, чтобы область ввода умещалась в пределах экрана и пользователям было удобно с ней работать, должны позаботиться вы сами. Атрибут WRAP задает правила переноса целых слов текста, вводимых пользователем. Значения soft включает функцию переноса слов на экране, но не воздействует на внешний вид данных, отсылаемых на сервер. Значение hard гарантирует форматирование данных как на экране, так и во внутренним буфере броузера. Константа off отключает функцию автоматического переноса слов. Атрибут WRAP задает правила переноса целых слов текста, вводимых пользователем. Значения soft включает функцию переноса слов на экране, но не воздействует на внешний вид данных, отсылаемых на сервер. Значение hard гарантирует форматирование данных как на экране, так и во внутренним буфере броузера. Константа off отключает функцию автоматического переноса слов.

19 Порядок перехода по элементам формы Читатели веб-страниц могут переходить от одного элемента формы к другому с помощью клавиши. При этом браузер по умолчанию активизирует элементы в порядке их следования в тексте формы. Изменение порядка перехода в соответствии с внутренней логикой содержимого формы способно оказать существенную помощь пользователям и облегчить их работу. Читатели веб-страниц могут переходить от одного элемента формы к другому с помощью клавиши. При этом браузер по умолчанию активизирует элементы в порядке их следования в тексте формы. Изменение порядка перехода в соответствии с внутренней логикой содержимого формы способно оказать существенную помощь пользователям и облегчить их работу. Для изменения порядка перехода по элементам формы применяется атрибут TABINDEX. Чтобы включить элемент в перечень, описывающий новый порядок перехода, поместите тело соответствующего дескриптора элемента атрибут TABINDEX и присвойте ему числовое значение индекса из промежутка Если необходимо исключить элемент из перечня, установите для атрибута TABINDEX отрицательное число (например, TABINDEX=-1). Для изменения порядка перехода по элементам формы применяется атрибут TABINDEX. Чтобы включить элемент в перечень, описывающий новый порядок перехода, поместите тело соответствующего дескриптора элемента атрибут TABINDEX и присвойте ему числовое значение индекса из промежутка Если необходимо исключить элемент из перечня, установите для атрибута TABINDEX отрицательное число (например, TABINDEX=-1). Когда пользователь впервые нажмет клавишу, курсор переместится к элементу с наименьшим положительным значением индекса. Последовательность нажатий прведет пользователя к элементу с наибольшей величиной индекса. Если нескольким элементам формы назначено одинаковое значение индекса, первым выбранным окажется тот, который в тексте веб-страницы размещается раньше остальных. Когда пользователь впервые нажмет клавишу, курсор переместится к элементу с наименьшим положительным значением индекса. Последовательность нажатий прведет пользователя к элементу с наибольшей величиной индекса. Если нескольким элементам формы назначено одинаковое значение индекса, первым выбранным окажется тот, который в тексте веб-страницы размещается раньше остальных. Необходимо отметить, что значение атрибута TABINDEX может устанавливаться и для других объектов веб-страницы за пределами формы, таких как графические изображения (дескриптор ), гиперссылки ( ), или карты ссылок ( ). Необходимо отметить, что значение атрибута TABINDEX может устанавливаться и для других объектов веб-страницы за пределами формы, таких как графические изображения (дескриптор ), гиперссылки ( ), или карты ссылок ( ).