1 / 43

Web- программирование

Web- программирование. Кейно Павел Петрович pavel@mati.ru. Лекция 0. HTML- формы. Форма. Форма создаётся с помощью тега < form >, внутри неё могут быть любые необходимые теги, и характеризуется она следующими необязательными параметрами:

haruki
Download Presentation

Web- программирование

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web-программирование Кейно Павел Петровичpavel@mati.ru

  2. Лекция 0 HTML-формы

  3. Форма Форма создаётся с помощью тега <form>, внутри неё могут быть любые необходимые теги, и характеризуется она следующими необязательными параметрами: • адрес программы на веб-сервере, которая будет обрабатывать содержимое данных формы; • элементами формы, которые представляют собой стандартные поля для ввода информации пользователем; • кнопку отправки данных на сервер.

  4. Пример формы <!DOCTYPE html> <html> <head> <metacharset="utf-8"> <title>Формы</title> </head> <body> <form> <p><inputname="a"> <inputtype="submit"></p> </form> </body> </html>

  5. Атрибут action <!DOCTYPE HTML> <html> <head> <metacharset="utf-8"> <title>Данные формы</title></head> <body> <formaction="/example/handler.php"> <p> <inputname="login"> <inputtype="password"name="pass"> </p> <p><inputtype="submit"></p> </form> </body> </html>

  6. Указание метода передачи данных • Для указания в форме метода передачи данных используется атрибут “method”, принимающий значения “GET” или “POST”.

  7. Передача данных методами GET и POST Метод GET Метод POST «Невидим» для пользователя при отправке Передача данных происходит в теле запроса Способен передавать большие объёмы данных Способен передавать файлы • Сохраняется в строке URL-адреса; адрес с запросом GET можно сохранить в закладках • Кэшируется браузером • Данные передаются в открытом виде и могут быть перехвачены

  8. Метод GET http://yandex.ru/yandsearch?text=cats+photo&lang=ru В данном примере CGI-сценарию yandsearchпередаётся строка запроса, внутри которой содержатся переменные “text” со значением “catsphoto” и “lang” со значением “ru”.Заголовок запроса начинается так: GET /yandsearch?text=cats+photo&lang=ru HTTP 1.1 CGI-сценарий Запрос

  9. Чередование методов GET и POST POST /passport?mode=auth HTTP/1.1 Host: passport.yandex.ru User-Agent: Mozilla/5.0 (Windows NT 6.1) Gecko/20100101 Firefox/23.0 Content-Type: application/x-www-form-urlencoded Content-Length: 62 from=passport&login=john&passwd=mypass&timestamp=1379013756458

  10. Связывание формы с полями <!DOCTYPE html> <html> <head> <metacharset="utf-8"> <title>Форма</title> </head> <body> <formid="auth"action="handler.php"method="post"></form> <p>...</p> <p><inputname="login"form="auth"> <inputtype="password"name="pass"form="auth"></p> <p><inputtype="submit"form="auth"></p> </body> </html>

  11. Отправка формы <body> <form> <p><input placeholder="Ваше имя"name="user"></p> <p><inputtype="submit"value="Отправить"formaction="handler.php"formmethod="post"></p> </form> </body>

  12. Однострочное текстовое поле <inputtype="text"maxlength="25"size="40"name="username"value="Вася"> Параметры: disabled – заблокировать поле для ввода maxlength – максимальное число символов, которое возможно ввести в поле. name – имя поляsize – ширина поля в символах value – начальный текст в поле

  13. Поле для пароля <inputtype="password"атрибуты> Используются те же самые атрибуты, что и у type="text".

  14. Многострочный текст <textareaатрибуты> Текст </textarea> Атрибуты : cols– ширина поля в символах disabled, maxlength, name – также, как и в input.readonly – поле не может изменяться пользователемrows – высота поля в строках текста

  15. Поле только для чтения <body> <formaction="handler.php"> <p>Скопируйте приведённый текст и вставьте его в поле запроса пароля.</p> <p><textareaname="comment"readonly>Мухаха</textarea></p> </form> </body>

  16. Многострочный текст

  17. Кнопки Существует два способа создания кнопок: • <inputtype="button"атрибуты> • <button атрибуты>Надпись на кнопке</button>

  18. Кнопка 1 <body> <form> <p><inputtype="button"value=" Нажми меня нежно "></p> </form> </body>

  19. Кнопка 2 <body> <form> <p><button>Обычная кнопка</button> <button> <imgsrc="images/umbrella.gif"alt=""style="vertical-align:middle"> Кнопка с рисунком </button></p> </form> </body>

  20. Кнопка 2

  21. Кнопка Submit • <inputtype="submit"атрибуты> • <buttontype="submit">Надпись на кнопке</button> Специальная кнопка Submit отправляет данные формы на сервер.

  22. Отправка данных на сервер <body> <form> <p><inputname="login"></p> <p><inputtype="submit"></p> </form> </body>

  23. Кнопка Reset Синтаксис: • <inputtype="reset"атрибуты> • <buttontype="reset">Надпись на кнопке</button> Кнопка Reset сбрасывает данные формы в первоначальное состояние.

  24. Кнопка Reset <body> <form> <p><inputvalue="Введите текст"></p> <p><inputtype="submit"value="Отправить"> <inputtype="reset"value="Очистить"></p> </form> </body>

  25. Переключатели Переключатели (жарг. радиокнопки) используют, когда необходимо выбрать один единственный вариант из нескольких предложенных. • <inputtype="radio"name="имя" атрибуты> Атрибуты : checked – переключатель включён изначально name – поскольку переключатель является групповым элементом, имя должно быть у всей группы одинаковое. value – значение, отправляемое на сервер.

  26. Переключатели <formaction="handler.php"> <p><b>Какое у вас состояние разума?</b></p> <p><inputname="dzen"type="radio"value="nedzen">Не дзен</p> <p><inputname="dzen"type="radio"value="dzen">Дзен</p> <p><inputname="dzen"type="radio"value="pdzen"checked>Полный дзен</p> <p><inputtype="submit"value="Выбрать"></p> </form>

  27. Переключатели

  28. Флажки Флажки (жарг. чекбоксы) используют, когда необходимо выбрать любое количество вариантов из предложенного списка.<inputtype="checkbox"атрибуты> Атрибуты те же самые, что и у переключателей.

  29. Флажки <formaction="handler.php"> <p>В каких годах произошли самые известные извержения вулкана Кракатау?</p> <p><inputtype="checkbox"name="a"value="1417"> 1417</p> <p><inputtype="checkbox"name="a"value="1680"checked> 1680</p> <p><inputtype="checkbox"name="a"value="1883"checked> 1883</p> <p><inputtype="checkbox"name="a"value="1934"> 1934</p> <p><inputtype="checkbox"name="a"value="2010"> 2010</p> <p><inputtype="submit"value="Отправить"></p> </form>

  30. Флажки

  31. Поле со списком Синтаксис: <selectатрибуты> <optionатрибуты>Пункт 1</option> <optionатрибуты>Пункт 2</option> </select>

  32. Поле со списком

  33. Тег <select> Тег <select> выступает контейнером для пунктов списка и определяет его вид. Атрибуты: multiple – будет отображать список со множественным выбором. name – определяет имя списка. size – устанавливает высоту списка.

  34. Список множественного выбора <form> <p><selectname="select"size="3"multiple> <optionselectedvalue="s1">Чебурашка</option> <optionvalue="s2">КрокодилГена</option> <optionvalue="s3">Шапокляк</option> <optionvalue="s4">КрысаЛариса</option> </select> <inputtype="submit"value="Отправить"></p> </form>

  35. Тег <option> Тег <option> также имеет атрибуты, влияющие на вид списка: • selected – делает текущий пункт списка выделенным • value– определяет значение пункта списка, которое будет отправлено на сервер.

  36. Группирование элементов списка <form> <p><selectname="food"> <optgrouplabel="Русская кухня"> <optionvalue="r1">ЗакускаБарская</option> <optionvalue="r2">Раки, фаршированные по-царски</option> <optionvalue="r3">Биточки в горшочке</option> </optgroup> <optgrouplabel="Украинская кухня"> <optionvalue="u1">Галушки славянские</option> <optionvalue="u2">Пампушки украинские</option> <optionvalue="u3">Жаркое по-харьковски</option> </optgroup> </select></p> <p><inputtype="submit"value="Отправить"></p> </form>

  37. Группирование элементов списка

  38. Скрытое поле Предназначено для передачи промежуточных технических данных между страницами. Поле не видимо для пользователя. • <inputtype="hidden"атрибуты> Атрибуты: • name, value.

  39. Скрытое поле <formaction="handler.php"method="post"> <p><b>Напишите любимое слово и нажмите кнопку Отправить (никакие данные не будут передаваться на сервер!):</b></p> <p><inputsize="25"name="word"> <inputtype="hidden"name="name"value="Vasya"> <inputtype="hidden"name="password"value="pupkin"></p> <p><inputtype="submit"value="Отправить"></p> </form>

  40. Группирование элементов форм При создании сложной формы можно визуально группировать некоторые её элементы. Структура: <fieldset> <legend>Заголовок</legend> ... </fieldset>

  41. Группирование элементов форм <form> <fieldset> <legend>Вход на сайт</legend> <p>Логин: <inputname="login"></p> <p>Пароль: <inputtype="password"name="pass"></p> <p><inputtype="submit"value="Вход"></p> </fieldset> </form>

  42. Группирование элементов форм

  43. Лабораторная работа • Сверстать произвольного вида форму с семантическим использованием всех пройденных элементов форм.

More Related