Занятия 18 — 28 Начать обучение Тема

Зарегистрируйтесь, чтобы просмотреть полный документ!

Занятия № 18 - 28 Начать обучение Тема: Создание и редактирование форм Курс ведёт : Сургучёва Ирина Николаевна Для связи: E-mail: lara 1233@yandex. ru Красноярск - 2013 © Surgucheva Irina Skype: lovez_snov_irena

Приветствую Вас на курсе: «Основы сайтостроения на языках HTML и CSS» . На прошлом занятии мы рассмотрели с вами тему: Создание таблиц. Вы научились создавать таблицы, добавлять столбцы и строки, объединять столбцы и строки, создавать вложенные таблицы, делать рамку у таблицы видимой и невидимой, задавать цвет рамки, закрашивать цветом строки, распределять информацию по ячейкам. Сегодняшняя тема: Создание и редактирование форм. Тема большая и сложная требующая от Вас особой внимательности. Часть 1 Понятие «формы» . Примеры форм. Как происходит обработка форм? Тег формы и его атрибуты Каркас формы Текстовые поля форм

Форма HTML представляет собой документ, созданный с использованием элементов HTML. Назначением формы является сбор информации от пользователей. После того как пользователь заполнит форму и запускает процесс ее обработки, информация из нее попадает в программу, работающую на сервере. Другая программа под названием Common Gateway Interface (CGI) обрабатывает ее. Таким образом, пользователь может интерактивно взаимодействовать с сервером Web через Internet. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению. Документ может содержать любое количество форм, но одновременно на сервер может быть отправлена только одна форма. По этой причине данные форм должны быть независимы друг от друга. Для отправки формы на сервер используется кнопка Submit, того же можно добиться, если нажать клавишу Enter в пределах формы. Если кнопка Submit отсутствует в форме, клавиша Enter имитирует ее использование, но только в том случае, когда в форме имеется только один элемент <input>. Если таких элементов два и более, нажатие на <Enter> не вызовет никакого результата. Перейдите на следующий слайд, чтобы просмотреть примеры форм

1. Вход в систему: 2. Комментарий на сайте 3. Выпадающий список 4. Список с полосой прокрутки

5. Переключатели, кнопки 6. Радиобутон, прикрепить файл 7. Общий пример

Прочитать и просмотреть схему обязательно! HTML – это всего лишь язык разметки, который указывает браузеру, что и как нужно отображать. С помощью языка html мы сможем создать: текст, поля, меню, кнопки для форм, но вот обработать данные введенные в форму без помощи другого языка мы не сможем. HTML не может обрабатывать данные, для этого существуют специальные серверные языки программирования, например язык PHP. Поэтому форма, чтоб она работала должна быть связана с серверным обработчиком, который будет обрабатывать данные полученные из формы. Откройте схему работы обработки данных формы и рассмотрите её (схема представлена на следующем слайде). Описание схемы: Пользователь заходит на web-сайт и заполняет форму, затем нажимает кнопку ОТПРАВИТЬ. В этот момент данные из формы отправляются обработчику, у нас это будет документ formdata. php (именно этот файл будет заниматься обработкой). Далее все зависит от того, что прописано в файле-обработчике, то что хочет владелец сайта, например он хочет получать e-mail письмо с данными, которые были введены в форму посетителем сайта (пользователем). В файле PHP-обработчика прописана инструкция, что делать с данными (в данном примере: отправлять данные владельцу сайта на указанный e-mail). Результат владелец сайта получит письмо с данными введенными в форму. И хотя у нас курс не предусматривает изучение яыка php, тем не менее мы рассмотрим некоторые элементы, для того, чтобы вы смогли создать полноценную рабочую форму (3 часть занятия).

Схема Обработка данных полученных из формы Форма заполняется посетителем сайта

тег form Тег <form> устанавливает форму на web-странице. Форма предназначена для обмена данными между пользователем и сервером. Синтаксис: <form action="URL">. . . </form> атрибут action Указывает обработчик, к которому обращаются данные формы при их отправке на сервер. В качестве обработчика может выступать CGI-программа или HTML-документ, который включает в себя серверные сценарии. После выполнения обработчиком действий по работе с данными формы он возвращает новый HTML-документ. Если атрибут action отсутствует, текущая страница перезагружается, возвращая все элементы формы к их значениям по умолчанию.

Значения: В качестве значения принимается полный или относительный путь к серверному файлу (URL). Синтаксис: <body> <form action="handler. php"> <p>. . . </p> </form> </body> атрибут autocomplete Автозаполнение производит браузер, который запоминает написанные при первом вводе значения, а затем подставляет их при повторном наборе в поля формы. При этом автозаполнение может быть отключено в настройках браузера и не может быть в таком случае изменено при помощи атрибута autocomplete. К примеру, включение автозаполнения в браузере Chrome (можно посмотреть на следующем слайде).

При вводе первых букв текста отображается список сохранённых ранее значений, из которого можно выбрать необходимое Синтаксис: <form autocomplete="on | off">. . . </form> on Включает автозаполнение формы. off Отключает автозаполнение. Это значение обычно используется для отмены сохранения в браузере важных данных (паролей, номеров банковских карт), а также редко вводимых или уникальных данных.

атрибут enctype Определяет способ кодирования данных формы при их отправке на сервер. Обычно устанавливать значение атрибута enctype не требуется, данные вполне правильно понимаются на стороне сервера. Однако если используется поле для отправки файла (input type="file"), следует определить атрибут enctype как multipart/form-data. Синтаксис: <form enctype="application/x-www-formurlencoded | multipart/form-data | text/plain">. . . </form> application/x-www-form-urlencoded Вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D 0%90%D 0%BD%D 1%8 F вместо Аня). multipart/form-data Данные не кодируются. Это значение применяется при отправке файлов. text/plain Пробелы заменяются знаком +, буквы и другие символы не кодируются.

атрибут method Атрибут method сообщает серверу о методе запроса Синтаксис: <form method="get | post">. . . </form> Значение атрибута method не зависит от регистра. Различают два метода — get и post. get Этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары «имя=значение» присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ &). Удобство использования метода get заключается в том, что адрес со всеми параметрами можно использовать неоднократно, сохранив его, например, в закладки браузера, а также менять значения параметров прямо в адресной строке. post Метод post посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем доступно методу get, поскольку у него установлено ограничение в 4 Кб. Большие объемы данных используются в форумах, почтовых службах, заполнении базы данных, при пересылке файлов и др.

атрибут name Определяет уникальное имя формы. Как правило, имя формы используется для доступа к ее элементам через скрипты. Синтаксис: <form name="имя">. . . </form> В качестве имени используется набор символов, включая числа и буквы. Java. Script чувствителен к регистру, поэтому при обращении к форме по имени через скрипты соблюдайте то же написание, что и в атрибуте name. атрибут target После того, как обработчик формы получает данные, он возвращает результат в виде HTML-документа. Вы можете определить окно, в которое будет загружаться итоговая web -страница. Для этого используется атрибут target, в качестве его значения используется имя окна или фрейма. Если target не установлен, возвращаемый результат показывается в текущем окне.

Синтаксис: <form target="имя окна">. . . </form> В качестве значения используется имя окна или фрейма, заданное атрибутом name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен можно указывать следующие: _blank Загружает страницу в новое окно браузера. _self Загружает страницу в текущее окно. _parent Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self. _top Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.

1. Откройте папку «Изучение HTML» , которая у нас была ранее создана на рабочем столе и создайте в ней папку «Формы» . 2. Откройте программу Notepad++ и создайте новый документ «index. html» сохраните его в папку «Формы» . 3. Из любого ранее созданного нами документа скопируйте в новый документ index. html, основную структуру html-документа, чтобы нам не прописывать эти данные, измените название в <title> на «Изучение форм» . Ниже приведен пример, что должно у вас получиться: <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 01 Transitional//EN" "http: //www. w 3. org/TR/html 4/loose. dtd"> <html> <head> <title>Изучение форм</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> </html>

4. Создадим первую нашу форму и пропишем нужные атрибуты к ней: Основные атрибуты, которые прописываются для формы это: action, method, name. Их мы рассмотрели в предыдущих слайдах, можете вернуться и еще раз прочитать за что отвечает, каждый из перечисленных атрибутов. На скриншоте представлена запись, которая должна быть сделана у вас.

Рассмотрим запись подробнее: <form action="formdata. php" method="post" name="form 1"> устанавливает форму на web-странице Документ, в котором прописана инструкция обработки данных - обработчик Указывает обработчик, к которому обращаются данные формы при их отправке на сервер посылает на сервер данные в запросе браузера Указывает метод, которым будут отсылаться данные нашему обработчику имя формы Определяет уникальное имя формы 5. Сохраните и посмотрите результат в браузере. Ничего не видно? Верно, так и должно быть. У нас создан каркас формы, но не один элемент еще не добавлен. В следующем разделе нашего урока мы рассмотрим создание разных элементов формы.

Тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Атрибутов у данного тега очень много, мы рассмотрим по ходу занятия только основные, остальные вы сможете самостоятельно посмотреть в Internet: http: //uroki-html. ru/tags/tag_input. php Начнем с создания простого текстового поля. Например: ввод имени, ввод E-mail. При помощи данного тега создаётся большинство элементов формы. <input> переводится как ВВОД. атрибут type тега <input> Сообщает браузеру, к какому типу относится элемент формы.

Продолжим работать над нашим документом, где мы создали каркас формы, давайте теперь добавим текстовое поле. 6. Добавим следующую запись: Рассмотрим запись: <input type="text" name="name"> Задаёт элемент формы Задаёт тип элемента формы Тип элемента - текст Название текстового поля Имя текстового поля

7. Сохраните. Просмотрите в браузере, что получилось. Поле мы с вами создали, но посетителю будет непонятно, что нужно в него вводить. Для этого существуют пояснения к полям. Достаточно заключить <input> в тег абзаца и сразу после открывающегося тега прописать текст (пояснение), что должен ввести в это поле посетитель сайта. Ниже на скриншоте вы можете просмотреть, как должна выглядеть запись:

8. Сохраните. Просмотрите в браузере, что получилось. Теперь наша запись имеет правильный вид, но активировать ввод имени в текстовое поле можно лишь тогда, когда курсор появляется в этом поле по щелчку мыши в нём. Хотелось бы сделать так, чтобы активировать поле можно было щелкнув мышкой даже по тексту «Введите ваше имя» , здесь есть одна хитрость, а именно тег, который позволяет связать метку текста с элементом формы. Давайте рассмотрим его. Тег <label> устанавливает связь между определенной меткой, в качестве которой обычно выступает текст, и элементом формы (<input>, <select>, <textarea>). Такая связь необходима, чтобы изменять значения элементов формы при нажатии курсором мыши на текст. Закрывающий тег обязателен!

9. Ниже представлена запись как нужно правильно прописывать тег <label>. Внесите изменения в свой документ. Сохраните и просмотрите в браузере. Внимание! Если вы всё правильно сделали, то щёлкая кнопкой мыши по тексту «Введите ваше имя: » у вас должен мигать курсор в текстовом поле. Пожалуйста используйте данный тег всегда для форм – это очень удобно при их заполнении. атрибут size тега <input> Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.

10. По умолчанию ширина текстового поля = 20 символам. Но иногда, такого размера недостаточно, для этого используют атрибут size, который устанавливает нужное количество символов в текстовом поле. Давайте пропишем данный параметр в нашем документе и посмотрим, какие изменения у нас произойдут. Результат : Как вы видите у меня поле стало в два раза больше.

11. Иногда нужно наоборот ввести ограничение на количество вводимых символов в поле. Для этого нужно: первое, в пояснении добавить текст, что поле ограничено и второе, прописать еще один атрибут, который ограничивает ввод символов в текстовое поле. Рассмотрим данный атрибут: атрибут maxlength тега <input> Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Синтаксис: <input type="text" maxlength="число"> Откройте свой документ и внесите следующие изменения:

12. Сохраните изменения и просмотрите в браузере как это выглядит. Вот что получилось у меня: Внимание! Если вы всё правильно сделали, то более 10 символов вы не сможете ввести в данное текстовое поле. Так как число 10 состоит из двух цифр 1 и 0, то десятым символом получается 1, а 0 уже 11, поэтому данная цифра вводится уже не будет. 13. Давайте создадим поле для ввода пароля. Чтобы создать поле для ввода пароля необходимо внести всего два изменения: первое, в пояснительный текст, что нужно вводить в данное поле, и второе, изменить значение атрибута type. Давайте скопируем созданную нами запись для поля «Введите ваше имя: » и произведем следующие изменения:

У вас должна получиться следующая запись: Сохраните и проверьте в браузере. В поле пароля должны появиться – круглые маркеры, при вводе символов – значит вы сделали всё правильно:

Скачать презентацию Занятия 18 — 28 Начать обучение Тема

Занятие 18-28 Формы ЧАСТЬ1.ppt

Количество слайдов: 27