DOCTYPE html head meta charsetutf8 titletitle head body
![](https://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-1.jpg)
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-2.jpg)
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-3.jpg)
![Пример формы <!DOCTYPE html> <head> <meta charset="utf-8"> <title>Формы</title> </head> <body> <form> <p><input name="a"> <input Пример формы <!DOCTYPE html> <head> <meta charset="utf-8"> <title>Формы</title> </head> <body> <form> <p><input name="a"> <input](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-4.jpg)
Пример формы <!DOCTYPE html> <head> <meta charset="utf-8"> <title>Формы</title> </head> <body> <form> <p><input name="a"> <input type="submit"></p> </form> </body> </html>
![Атрибут action <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Данные формы</title> </head> <body> <form action="/example/handler. Атрибут action <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Данные формы</title> </head> <body> <form action="/example/handler.](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-5.jpg)
Атрибут action <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Данные формы</title> </head> <body> <form action="/example/handler. php"> <p> <input name="login"> <input type="password" name="pass"> </p> <p><input type="submit"></p> </form> </body> </html>
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-6.jpg)
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-7.jpg)
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-8.jpg)
![Чередование методов GET и POST /passport? mode=auth HTTP/1. 1 Host: passport. yandex. ru User-Agent: Чередование методов GET и POST /passport? mode=auth HTTP/1. 1 Host: passport. yandex. ru User-Agent:](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-9.jpg)
Чередование методов GET и 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×tamp =1379013756458
![Связывание формы с полями <!DOCTYPE html> <head> <meta charset="utf-8"> <title>Форма</title> </head> <body> <form id="auth" Связывание формы с полями <!DOCTYPE html> <head> <meta charset="utf-8"> <title>Форма</title> </head> <body> <form id="auth"](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-10.jpg)
Связывание формы с полями <!DOCTYPE html> <head> <meta charset="utf-8"> <title>Форма</title> </head> <body> <form id="auth" action="handler. php" method="post"></form> <p>. . . </p> <p><input name="login" form="auth"> <input type="password" name="pass" form="auth"></p> <p><input type="submit" form="auth"></p> </body> </html>
![Отправка формы <body> <form> <p><input placeholder="Ваше имя" name="user"></p> <p><input type="submit" value="Отправить" formaction="handler. php" formmethod="post"></p> Отправка формы <body> <form> <p><input placeholder="Ваше имя" name="user"></p> <p><input type="submit" value="Отправить" formaction="handler. php" formmethod="post"></p>](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-11.jpg)
Отправка формы <body> <form> <p><input placeholder="Ваше имя" name="user"></p> <p><input type="submit" value="Отправить" formaction="handler. php" formmethod="post"></p> </form> </body>
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-12.jpg)
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-13.jpg)
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-14.jpg)
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-15.jpg)
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-16.jpg)
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-17.jpg)
![Кнопка 1 <body> <form> <p><input type="button" value=" Нажми меня нежно "></p> </form> </body> Кнопка 1 <body> <form> <p><input type="button" value=" Нажми меня нежно "></p> </form> </body>](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-18.jpg)
Кнопка 1 <body> <form> <p><input type="button" value=" Нажми меня нежно "></p> </form> </body>
![Кнопка 2 <body> <form> <p><button>Обычная кнопка</button> <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="images/umbrella. gif" alt="" style="vertical-align: middle"> Кнопка с Кнопка 2 <body> <form> <p><button>Обычная кнопка</button> <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="images/umbrella. gif" alt="" style="vertical-align: middle"> Кнопка с](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-19.jpg)
Кнопка 2 <body> <form> <p><button>Обычная кнопка</button> <img src="images/umbrella. gif" alt="" style="vertical-align: middle"> Кнопка с рисунком </button></p> </form> </body>
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-20.jpg)
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-21.jpg)
![Отправка данных на сервер <body> <form> <p><input name="login"></p> <p><input type="submit"></p> </form> </body> Отправка данных на сервер <body> <form> <p><input name="login"></p> <p><input type="submit"></p> </form> </body>](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-22.jpg)
Отправка данных на сервер <body> <form> <p><input name="login"></p> <p><input type="submit"></p> </form> </body>
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-23.jpg)
![Кнопка Reset <body> <form> <p><input value="Введите текст"></p> <p><input type="submit" value="Отправить"> <input type="reset" value="Очистить"></p> </form> Кнопка Reset <body> <form> <p><input value="Введите текст"></p> <p><input type="submit" value="Отправить"> <input type="reset" value="Очистить"></p> </form>](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-24.jpg)
Кнопка Reset <body> <form> <p><input value="Введите текст"></p> <p><input type="submit" value="Отправить"> <input type="reset" value="Очистить"></p> </form> </body>
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-25.jpg)
![Переключатели <form action="handler. php"> <p><b>Какое у вас состояние разума? </b></p> <p><input name="dzen" type="radio" value="nedzen"> Переключатели <form action="handler. php"> <p><b>Какое у вас состояние разума? </b></p> <p><input name="dzen" type="radio" value="nedzen">](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-26.jpg)
Переключатели <form action="handler. php"> <p><b>Какое у вас состояние разума? </b></p> <p><input name="dzen" type="radio" value="nedzen"> Не дзен</p> <p><input name="dzen" type="radio" value="dzen"> Дзен</p> <p><input name="dzen" type="radio" value="pdzen" checked> Полный дзен</p> <p><input type="submit" value="Выбрать"></p> </form>
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-27.jpg)
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-28.jpg)
![Флажки <form action="handler. php"> <p>В каких годах произошли самые известные извержения вулкана Кракатау? </p> Флажки <form action="handler. php"> <p>В каких годах произошли самые известные извержения вулкана Кракатау? </p>](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-29.jpg)
Флажки <form action="handler. php"> <p>В каких годах произошли самые известные извержения вулкана Кракатау? </p> <p><input type="checkbox" name="a" value="1417"> 1417</p> <p><input type="checkbox" name="a" value="1680" checked> 1680</p> <p><input type="checkbox" name="a" value="1883" checked> 1883</p> <p><input type="checkbox" name="a" value="1934"> 1934</p> <p><input type="checkbox" name="a" value="2010"> 2010</p> <p><input type="submit" value="Отправить"></p> </form>
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-30.jpg)
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-31.jpg)
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-32.jpg)
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-33.jpg)
![Список множественного выбора <form> <p><select name="select" size="3" multiple> <option selected value="s 1">Чебурашка</option> <option value="s Список множественного выбора <form> <p><select name="select" size="3" multiple> <option selected value="s 1">Чебурашка</option> <option value="s](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-34.jpg)
Список множественного выбора <form> <p><select name="select" size="3" multiple> <option selected value="s 1">Чебурашка</option> <option value="s 2">Крокодил Гена</option> <option value="s 3">Шапокляк</option> <option value="s 4">Крыса Лариса</option> </select> <input type="submit" value="Отправить"></p> </form>
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-35.jpg)
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-36.jpg)
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-37.jpg)
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-38.jpg)
![Скрытое поле <form action="handler. php" method="post"> <p><b>Напишите любимое слово и нажмите кнопку Отправить (никакие Скрытое поле <form action="handler. php" method="post"> <p><b>Напишите любимое слово и нажмите кнопку Отправить (никакие](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-39.jpg)
Скрытое поле <form action="handler. php" method="post"> <p><b>Напишите любимое слово и нажмите кнопку Отправить (никакие данные не будут передаваться на сервер!): </b></p> <p><input size="25" name="word"> <input type="hidden" name="name" value="Vasya"> <input type="hidden" name="password" value="pupkin"></p> <p><input type="submit" value="Отправить"></p> </form>
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-40.jpg)
![Группирование элементов форм <form> <fieldset> <legend>Вход на сайт</legend> <p>Логин: <input name="login"></p> <p>Пароль: <input type="password" Группирование элементов форм <form> <fieldset> <legend>Вход на сайт</legend> <p>Логин: <input name="login"></p> <p>Пароль: <input type="password"](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-41.jpg)
Группирование элементов форм <form> <fieldset> <legend>Вход на сайт</legend> <p>Логин: <input name="login"></p> <p>Пароль: <input type="password" name="pass"></p> <p><input type="submit" value="Вход"></p> </fieldset> </form>
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-42.jpg)
![](http://slidetodoc.com/presentation_image_h/28d718cfcac69429edca9bc7eeb0f86d/image-43.jpg)
- Slides: 43