Электронный обучающий курс Формы HTML Содержание курса L/O/G/O www. themegallery. com
Содержание курса 1 Теоретический материал 2 Проверка знаний 3 Глоссарий 4 Информация
Теоретический материал В этой лекции разбирается возможность взаимодействия читателя HTML-страниц с сервером Web-узла. Подробно описывается подмножество HTML, которое носит название HTML-формы. Содержание
HTML-формы Формы были созданы и используются в WWW для получения отклика пользователя на предоставленную информацию и сбора данных о пользователе. После заполнения пользователем формы и запуска процесса ее обработки, информация из нее попадает к программе, работающей на сервере. Простота использования тега <MAILTO: > в формах позволяет даже владельцам небольших страниц получать отклик от своих читателей. Для обработки большого количества откликов используются программы, поддерживающие Common Gateway Interface (CGI) и расположенные на сервере, в адрес которого поступают отклики. Таким образом пользователь может интерактивно взаимодействовать с Web-сервером через Internet. Содержание
Задание формы — элемент FORM • Элемент FORM обозначает документ как форму и определяет границы использования других тегов, размещаемых в форме. Тег <FORM> определяется последовательностью тегов <INPUT>, размещенных внутри пары <FORM> и </FORM>. В форме используется как метод (method), так и действие (action) для описания обработки данных, вводимых пользователем в форму. Метод (GET или POST) определяет, как должны обрабатываться входные данные из формы, а действие указывает на URI (Uniform Resource Identifier) программы, ответственной за обработку этих данных. <FORM METHOD=post ACTION=mailto: yourname@your. email. address> Содержание
Определение элементов управления формы — тег <INPUT> • Данный тег используют для определения области внутри формы, куда вводятся данные. Он формирует поле для ввода информации пользователем. Это может быть текстовое поле, опция, изображение или кнопка. Вид поля ввода определяется значением атрибута TYPE. Содержание
Атрибут TYPE=text • Когда пользователю необходимо ввести небольшое количество текста (одну или несколько строк), используется тег <INPUT>, и атрибут TYPE устанавливается в значение text. Кроме того, задается атрибут NAME для определения наименования переменной поля. Ваше имя <INPUT NAME=Name SIZE=35> • Имеется еще три дополнительных атрибута, которые можно использовать. Первый называется MAXLENGTH, он ограничивает число символов, вводимых пользователем в текущее поле. По умолчанию данное число не ограничено. Вторым атрибутом является SIZE, определяющий размер видимой на экране области, занимаемой текущим полем. Значение по умолчанию определяется типом браузера. Если значение MAXLENGTH больше, чем SIZE, браузер будет прокручивать данные в окне. Последним из дополнительных атрибутов является атрибут VALUE, обеспечивающий начальное значение поля ввода. Содержание
Атрибут TYPE=checkbox • Для создания независимых флагов в формах HTML используется тег <INPUT> с атрибутом TYPE=checkbox. В зависимости от содержания формы пользователь может отметить несколько флагов. Когда форма использует тег <INPUT> с атрибутом CHECKBOX, в нем должны присутствовать и атрибуты NAME, и VALUE. Атрибут NAME указывает на наименование данного поля (флага) ввода. В атрибуте VALUE будет содержаться значение поля. <BR>Россия<INPUT NAME="Страна" TYPE=checkbox VALUE="Россия"> Страны СНГ<INPUT NAME="Страна" TYPE=checkbox VALUE="СНГ"> • В некоторых случаях необходимо инициализировать данный флаг, как уже отмеченный. В таких случаях тег <INPUT> должен содержать атрибут CHECKED. Содержание
Атрибут TYPE=radio • В некоторых случаях требуется организовать выбор одного из нескольких возможных значений. Для создания формы ввода при выборе пользователем одного значения из нескольких возможных необходимо использовать тег <INPUT> с атрибутом TYPE=radio. Когда в форме применяется данный атрибут, в теге <INPUT> должны быть указаны атрибуты NAME и VALUE. Атрибут NAME указывает наименование соответствующего поля (кнопки). Атрибут VALUE содержит значение поля. <BR>Пол мужской<INPUT NAME="Пол" TYPE=radio VALUE="Мужской"> Пол женский<INPUT NAME="Пол" TYPE=radio VALUE="Женский"> Содержание
Атрибут TYPE=image • В зависимости от содержимого формы может случиться так, что пользователю потребуется щелкнуть мышью на изображении, чтобы завершить работу с формой. Для этого программисты используют тег <INPUT> с атрибутом TYPE=image. Когда пользователь щелкает мышью по изображению, браузер сохраняет координаты соответствующей точки экрана. Далее он "обрабатывает" введенную в форму информацию. Когда форма использует атрибут image, тег <INPUT> должен содержать также атрибуты NAME и SRC. NAME указывает наименование поля ввода формы. Атрибут SRC содержит URI файла — источника изображения. Атрибут ALIGN является дополнительным и используется аналогично тому же атрибуту тега <IMG>. <BR>Выберите точку<INPUT TYPE=image NAME=point SRC=image. gif> Содержание
Атрибут TYPE=password • Если в форме требуется организовать ввод пароля, то атрибут TYPE можно установить в значение password (TYPE=password). Используя данный тип, можно организовать ввод пароля без вывода на экран составляющих его символов. При этом следует помнить, что введенные данные передаются по незащищенным каналам связи и могут быть перехвачены. <BR>Подпись<INPUT NAME=login>Пароль <INPUT TYPE=password NAME="Слово"> Содержание
Атрибут TYPE=reset • Когда пользователь заполняет форму, ему может потребоваться начать все сначала. На такой случай существует кнопка Reset, по которой пользователь может щелкнуть мышью, чтобы вернуться к первоначальным значениям полей. Когда пользователь выбирает данную кнопку, форма восстанавливает первоначальные значения всех элементов, в которых присутствует атрибут TYPE=reset. Для создания кнопки Reset используется тег <INPUT> с атрибутом TYPE=reset. Браузер в свою очередь будет выводить изображение данной кнопки. Если в форме используется атрибут reset, тег <INPUT> может дополнительно содержать атрибут VALUE. Данный атрибут определяет надпись на изображении кнопки. <INPUT TYPE=reset VALUE="Очистить форму"> Содержание
Атрибут TYPE=submit • Используя форму HTML для ввода информации от пользователя, необходимо обеспечить пользователю возможность завершить ввод данных. Для этого используется тег <INPUT> с атрибутом TYPE=submit. Браузер, в свою очередь, выводит данный элемент, как кнопку, по которой пользователь может щелкнуть, чтобы завершить процесс редактирования. Когда в форме используется тег <INPUT> с атрибутом submit, данный элемент может содержать два дополнительных атрибута: NAME и VALUE. Атрибут NAME хранит название переменной поля в вашей форме. Атрибут VALUE — определяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов. <BR><INPUT TYPE=submit VALUE="Отправить сообщение"> Содержание
Атрибут TYPE=hidden • Скрытые поля. Добавление в тег INPUT атрибута TYPE=hidden позволит включить в отправляемую форму значения атрибутов NAME и VALUE, которые пользователь изменить не может. Такие метки полезны при наличии нескольких форм для дальнейшей обработки данных. Содержание
Создание многострочных областей ввода текста — тег <TEXTAREA> • В зависимости от типа формы может потребоваться организовать ввод большого количества текста. В таких случаях используется тег <TEXTAREA> для создания текстового поля из нескольких строк. Данный тег использует три атрибута: COLS, NAME и ROWS. Содержание
Атрибут COLS • Указывает (число символов) число колонок, содержащихся в текстовой области. Атрибут NAME • Определяет наименование поля. Атрибут ROWS • Задает количество видимых строк текстовой области. <BR><TEXTAREA NAME=тема COLS=38 ROWS=3> </TEXTAREA> Содержание
Использование списков в форме — тег <SELECT> • Когда формы HTML становятся более сложными, в них часто включают списки с прокруткой и выпадающие меню. Для этого используют тег SELECT с атрибутом TYPE=select. Для определения списка пунктов используют тег <OPTION>. Тег <SELECT> поддерживает три необязательных атрибута: MULTIPLE, NAME и SIZE. Содержание
Атрибут MULTIPLE • Позволяет выбрать более чем одно наименование. Атрибут NAME • Определяет наименование объекта. Атрибут SIZE • Определяет число видимых пользователю пунктов списка. Если в форме установлено значение атрибута SIZE=1, то браузер выводит на экран список в виде выпадающего меню. В случае SIZE > 1 браузер представляет на экране обычный список. • В форме может использоваться тег <OPTION> только внутри тега <SELECT>. Эти теги поддерживают два дополнительных атрибута: SELECTED и VALUE. Атрибут SELECTED • Используется для первоначального выбора значения элемента по умолчанию. Содержание
Атрибут VALUE • Указывает на значение, возвращаемое формой после выбора пользователем данного пункта. По умолчанию значение поля равно значению тега <OPTION>. <BR>Выбор <SELECT NAME="Выбор"> <OPTION>Вариант 1 <OPTION>Вариант 2 <OPTION VALUE="Вариант 3">Вариант 3 <OPTION SELECTED>Вариант 4 </SELECT> Рис. Выпадающее меню Содержание Проверка знаний
Проверка знаний В качестве проверки знаний Вашему вниманию будет предложен тест, состоящий из 10 вопросов с возможностью выбора одного ответа из четырёх Начать тестирование
Вопрос №_1 Для чего предназначены формы? Для поиска информации в мировой сети Для сбора информации от пользователей Для скачивания файлов Для изменения внешнего вида web-страницы Содержание
Вопрос №_2 Какими тегами задаётся форма? <BODY> и </BODY> <TABLE> и </TABLE> <FORM> и </FORM> <INPUT> Содержание
Вопрос №_3 Какой тег используют для определения области внутри формы, куда вводятся данные? <INPUT> <TABLE> <OUTPUT> <STYLE> Содержание
Вопрос №_4 Для чего используется тег <INPUT> с атрибутом TYPE=submit? Для того, чтобы вернуться к первоначальным значениям полей Для организации выбора одного из нескольких возможных значений Для обеспечения возможности завершить ввод данных. Такого атрибута не существует и вопрос некорректен Содержание
Вопрос №_5 Для создания независимых флагов в формах HTML используется тег <INPUT> с атрибутом … TYPE=text TYPE=image TYPE=radio TYPE=checkbox Содержание
Вопрос №_6 Предназначение атрибута COLS Указывает (число символов) число колонок, содержащихся в текстовой области Позволяет выбрать более чем одно наименование Задает количество видимых строк текстовой области Определяет наименование поля Содержание
Вопрос №_7 Для чего используется тег <TEXTAREA>? Для определения области внутри формы, куда вводятся данные. Для организации выбора одного из нескольких возможных значений Для создания текстового поля из нескольких строк Для организации возможности отправки электронного письма Содержание
Вопрос №_8 Какой тег позволяет включать в форму списки с прокруткой и выпадающие меню? Тег <TEXTAREA> Тег INPUT с атрибутом TYPE=hidden тег <INPUT> Тег SELECT с атрибутом TYPE=select Содержание
Вопрос №_9 Что такое CGI? Программа, которая выполняется для сборки или обеспечения работоспособности веб-сайта. Стандарт интерфейса, используемого для связи внешней программы с web-сервером Стандартный язык разметки документов во Всемирной паутине Скриптовый язык программирования, применяющийся для разработки веб-приложений Содержание
Вопрос №_10 Атрибут VALUE тега <SELECT>… Задает количество видимых строк текстовой области Позволяет выбрать более чем одно наименование Указывает на значение, возвращаемое формой после выбора пользователем данного пункта. Используется для первоначального выбора значения элемента по умолчанию Содержание
Это правильный ответ! merit Вернуться к вопросу
Ответ неверный! merit Вернуться к вопросу
Глоссарий CGI Text in here Web-страница Web-браузер Форма Тег Атрибут Скрипт CSS Содержание Web-сервер. Text in here
CGI • CGI (Common Gateway Interface) — это спецификация обмена данными между прикладной программой, выполняемой по запросу пользователя, и HTTP-сервером, который данную программу запускает. Содержание
Web-страница • Web-страница (англ. Web page) — гипертекстовый ресурс Всемирной паутины, обычно написанный на языке HTML. Вебстраница может содержать ссылки для быстрого перехода на другие страницы, а также статические и динамические изображения. Программа, демонстрирующая веб-страницу, называется веб-браузер. Содержание
HTML • HTML (от англ. Hyper. Text Markup Language — «язык разметки гипертекста» ) — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме. Содержание
Web-сервер • Web-сервер — это сервер, принимающий HTTP-запросы от клиентов, обычно веббраузеров, и выдающий им HTTP-ответы, обычно вместе с HTML-страницей, изображением, файлом, медиа-потоком или другими данными. Содержание
Форма • Форма — это инструмент, с помощью которого HTML-документ может послать некоторую информацию в некоторую заранее определенную точку внешнего мира, где информация будет некоторым образом обработана. Содержание
Web-браузер • Веб-обозреватель, браузер (от англ. Web browser)— программное обеспечение для просмотра веб-сайтов, то есть для запроса веб-страниц (преимущественно из Сети), их обработки, вывода и перехода от одной страницы к другой. Содержание
Тег • Тег - это инструкция, которая укажет браузеру, какой блок нарисовать и, возможно, в каком месте и каким стилем его вывести, но второе утверждение принято выносить в CSS. Тег это служебная инструкция размещенная между символами меньше (<) больше (>). Теги могут быть открывающимися и закрывающимися. Например: <div> - открывающий тег, </div> закрывающий тег. Открывающий тег указывает на начало какого либо блока, а закрывающий — на завершение этого блока. Содержание
Атрибут • Атрибут — это уточнение для браузеров, как поточнее нарисовать тег, атрибуты описываются внутри открывающего тега в виде коллекции имя="значение". Например: <div class="header">. Содержание
Скрипт • Скрипт, или сценарий, это такая программа, которая выполняется для сборки или обеспечения работоспособности веб-сайта. Скрипты бывают разных типов и, в зависимости от этого, могут выполняться либо на ПК (клиентские скрипты), либо на сервере. Задача клиентских скриптов – обеспечить динамичность страницы сайта. У серверных скриптов, естественно, гораздо больше возможностей и задач. Содержание
Каскадные таблицы стилей • CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, написанного языком разметки. • Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL. Содержание
Информация • Данный электронный обучающий курс по теме «HTML формы» был разработан в рамках предмета «Технологии разработки электронных учебников» студентом ФФМи. КН группы ИС-4 Пальчиковым Владимиром. • Курс содержит теоретическую информацию по вышеупомянутой теме, средство для контроля знаний (тестирование), небольшой словарь терминов. • Гипертекстовые переходы и кнопки позволяют удобно перемещаться по страницам учебника для изучения и поиска необходимой информации. • Удачного изучения! Содержание
Скачать презентацию Электронный обучающий курс Формы HTML Содержание курса L O G O
Презентация_Пальчиков.ppt