Форма в HTML
презентация к уроку по информатике и икт (10, 11 класс)

Слайд 1

Форма в HTML © МБОУ СОШ №3 Гороховецкого района Владимирской области, 2023 © Зарубина О.Б., к.т.н., 2023

Слайд 2

Форма в HTML Форма является замечательным средством обратной связи разработчиков сайтов с пользователями их программных продуктов.

Слайд 3

Форма в HTML Перед размещением формы на странице браузеру необходимо сообщить о наличии формы и однозначно ее идентифицировать в коде с помощью тэга

< / form> .

Слайд 4

Параметры формы задаются при помощи следующих атрибутов: Name - идентифицирует форму ; Method – определяет способ передачи введенных в форму данных (может принимать значение GET или POST ; Action – указывает URL программы-обработчика данных формы;

Слайд 5

Параметры формы задаются при помощи следующих атрибутов: Enctype - задает тип данных (метод кодирования) формы, если используется метод отправки POST ; по умолчанию имеет значение « application/x-www-form-urlencoded »; при необходимости передачи файлов используется « multipart/form-data »;

Слайд 6

Параметры формы задаются при помощи следующих атрибутов: Accept-charset - задает типы допустимых кодировок ; Accept – описывает типы файлов, передаваемых серверу.  Если два последних атрибута не указаны, то серверное приложение должно само уметь определить типы передаваемых файлов и кодировку.

Слайд 7

Теперь пример: …..

Форма, имеющая имя « form1 », предназначена для отправки по адресу электронной почты ivanov . mail.ru .

Слайд 8

Основные элементы Поля формы находятся внутри контейнера

< / form> . …………… .

…. ….. ….

Слайд 9

Основные элементы Универсальным элементом для создания полей формы является , который не имеет конечного тэга. Все параметры задаются при помощи атрибутов.  С помощью можно задать простое текстовое поле, поле для ввода пароля, флажки, переключатели, кнопки и другие поля формы.

Слайд 10

Параметры полей формы задаются при помощи атрибутов: Type – определяет тип элемента формы: Text однострочное текстовое поле Password текстовое поле со скрываемым содержимым (вместо букв – знак * ) Radio переключатель Checkbox элемент управления «флажок» File поле выбора файла

Слайд 11

Параметры полей формы задаются при помощи атрибутов: Type – определяет тип элемента формы: Image изображение-ссылка (при нажатии- отправка формы браузером) Button кнопка Submit кнопка отправки формы Reset кнопка очистки формы Hidden скрытый элемент управления (не показывается пользователю, но отправляется на сервер)

Слайд 12

Параметры полей формы задаются при помощи атрибутов: Name – определяет имя элемента формы, однозначно его идентифицирует; Value – начальное значение для полей ввода и кнопок, положение флажков и переключателей по умолчанию; Disabled – запрещает пользователю работать с элементом управления;

Слайд 13

Параметры полей формы задаются при помощи атрибутов: Size – задает размер элемента (в разных единицах измерения); Maxlenth – задает максимальную длину текста для полей ввода; Align – определяет горизонтальное выравнивание для элемента;

Слайд 14

Параметры полей формы задаются при помощи атрибутов: Checked – задает положение флажка или переключателя; Title – описывает элемент (всплывающая подсказка); Tabindex – определяет номер элемента при навигации с помощью табуляции; Accesskey – задает горячую клавишу для элемента ( Alt+ клавиша).

Слайд 15

Теперь несколько примеров: Текстовое поле, имеющее имя « Log » и размер - 30 букв (данного шрифта), предназначено для ввода информации. Максимальное количество знаков в тексте – 30. По умолчанию введен текст «Введите Login ». Применен стиль с именем « Style ».

Слайд 16

Следующий пример: Женский Переключатель. Имеет смысл использовать как минимум два переключателя с одним именем (в примере - Sex ( Пол)), объединенных в группу. Тогда у пользователя появится возможность выбора одного из элементов. По умолчанию выбран переключатель «Мужской».

Слайд 18

Следующий пример: Гражданин РФ Поле «флажок», имеющее имя « Gr ». Задавать значение атрибута Value нужно обязательно, так как именно это значение отправляется серверу, если флажок установлен (в данном примере – по умолчанию).

Слайд 19

Следующий пример: Кнопка с надписью «Отослать», при нажатии которой браузер отправит форму по указанному адресу.

Слайд 20

Следующий пример: Кнопка с надписью «Очистить», при нажатии которой значения всех элементов управления будут заменены значениями по умолчанию.

Слайд 21

Основные элементы Кнопки можно задать не только c помощью универсального элемента , но и используя отдельные тэги , . Все параметры задаются при помощи атрибутов.

Слайд 22

Приведем пример: Такие кнопки разработчик формы использует,
когда ему не хватает возможностей
обычных командных кнопок.
Можно вставить рисунок, таблицу и т.п.

Слайд 23

Основные элементы Для задания многострочного текстового поля можно использовать тэг . Его размеры задаются при помощи атрибутов rows ( количество строк без прокрутки) и cols (количество символов в строке без переноса).

Слайд 24

Приведен пример: Адрес: <textarea name="formtextarea" cols="45" rows="3" class=«style"> Введите адрес</ textarea> Текстовое поле, имеющее имя « Formtextarea » и размер - 45 букв (данного шрифта) в строке, всего видны 3 строки. По умолчанию введен текст «Введите адрес». Применен стиль с именем « Style ».</p><p class='slide-number'>Слайд 25</p><p>Основные элементы Меню (список параметров) является очень удобным элементом управления, позволяющим выбрать один или несколько элементов списка. Сам элемент задается тэгом <SELECT> </SELECT> , а отдельные его элементы – <OPTION></OPTION> .</p><p class='slide-number'>Слайд 26</p><p><SELECT> <SELECT> поддерживает следующие атрибуты: Name - имя меню, название параметра при отправке формы ; Size – количество строк одновременно видимых пользователем; Multiple – разрешает выделение нескольких пунктов меню .  Остальные атрибуты аналогичны атрибутам <INPUT> .</p><p class='slide-number'>Слайд 27</p><p><OPTION> <Option> поддерживает следующие атрибуты: Value - текст, который будет отправлен с формой при выборе пункта меню ; Selected – выделяет данный пункт по умолчанию .  Остальные атрибуты аналогичны атрибутам <INPUT> .</p><p class='slide-number'>Слайд 28</p><p><SELECT> Пример: Образование <select name="Obr" size="1" class=«style"> <option value=" Начальное“ selected >Начальное</ option> <option value=" Неполное среднее">Неполное среднее</ option> <option value=" Среднее">Среднее</ option> <option value=" Среднее профессиональное">Среднее профессиональное</ option> <option value=" Неполное высшее"> Неполное высшее</ option> <option value=" Высшее"> Высшее</ option> <option value=" Послевузовское"> Послевузовское</ option> </select></p><p class='slide-number'>Слайд 29</p><p>Основные элементы Надписи полей формы удобно задавать тэгом <Label>. <FORM> …………… . </FORM> <LABEL> </LABEL> <BUTTON> ….. </BUTTON> <LABEL> </LABEL> <INPUT> …. </INPUT> <LABEL> </LABEL> <INPUT> …. </INPUT></p><p class='slide-number'>Слайд 30</p><p><FORM> Поля формы выравнивают по вертикали или по горизонтали. Так форма выглядит опрятнее. Используйте   ; пробел, например. Можно вписать форму в геометрическую фигуру. Сложную форму можно выровнять, поместив ее поля в ячейки таблицы.</p><p class='slide-number'>Слайд 31</p><p>ПОМНИТЕ, форма должна выглядеть достойно: выравнивайте поля формы; при задании подписей к полям используйте тэг <Label> ; применяйте стили для украшения текста; не применяйте экзотические шрифты. Не забывайте о пользователях сайта, уважайте их!</p><p class='slide-number'>Слайд 32</p><p>Практическое задание Создать файл c регистрационной анкетой гостя и сохранить его в папке сайта с именем ANK . html . Создать файл Style . css со стилями для формы (табл.1). Применить указанные стили. Создать по приведенному образцу поля формы и подписи к ним (табл.2). Создать три горизонтальные линии длиной 600 px и шириной 3 px , выровнять их по левому краю. Цвет выбрать в соответствие со стилем сайта. Создать гиперссылку на созданную страницу с домашней страницы сайта ( index . html ).</p><p class='slide-number'>Слайд 33</p><p>Практическое задание</p><p class='slide-number'>Слайд 34</p><p>Практическое задание Конечный результат ( примерный )</p><p class='slide-number'>Слайд 35</p><p>ЛИТЕРАТУРА Кириленко А. Самоучитель HTML. СПб., "Питер", 2006. -272 с. Гончаров А.Ю. Web-дизайн: HTML, JavaScript и CSS.- М.: КУДИЦ-ПРЕСС, 2007. - 320 с. Молли Э. Хольцшлаг. Использование HTML и ХHTML. - М.: Вильямс, 2004. Молли Э. Хольцшлаг. 250 секретов HTML и Web-дизайна. - М.: НТ Пресс, 2006. - 496 с. Венц К., Хаузер Т. Как создать свой сайт.- М.: НТ Пресс, 2006. - 320 с. Создай свой сайт.: Мультимедийный учебник. - М.: "Мультимедиа Технологии и Дис-танционное обучение", 2007. Создание Web-страниц и Web-сайтов. Самоучитель: Учебное пособие/ под.ред. В.Н. Печникова. - М.: Издательство "ТРИУМФ", 2006.- 464 с. Web-мастеринг без посторонней помощи : Учебное пособие / под.ред. Б. Артанова. - М.: 100 книг, 2006. - 336 с. Создание интерактивного web-сайта: учебный курс / Д. Лещев. - СПб.: Питер, 2003. - 544 с. © МБОУ СОШ №3 Гороховецкого района Владимирской области, 2011 © Зарубина О.Б., к.т.н., 2011</p><p class='slide-number'>Слайд 36</p><p>Удачи в работе и спасибо за внимание ! © МБОУ СОШ №3 Гороховецкого района Владимирской области, 2011 © Зарубина О.Б., к.т.н., 2011</p></div></div></div></div></div><br><div class="block marina-gradient-rounded-corners marina-title-rounded-green"><div class="inner clearfix"><div class="inner-wrapper"><div class="inner-inner"><h2 class="title block-title">По теме: методические разработки, презентации и конспекты</h2><div class="others"><h6><a href="/shkola/informatika-i-ikt/library/2011/12/04/yazyk-gipertekstovoy-razmetki-html">Язык гипертекстовой разметки HTML</a></h6><p class="search-excerpt">В презентации отражена история создания Интернета, приведены схемы организации Web-страниц. Подробно разобраны самые основные дескрипторы языка HTML....</p></div><div class="others"><h6><a href="/shkola/informatika-i-ikt/library/2012/01/30/osnovy-html-razrabotka-web-sayta-shest-urovney">Основы HTML. Разработка Web-сайта Шесть уровней ворженности (модуль) 11 класс</a></h6><p class="search-excerpt">Урок с использованием модульной технологии.На мой взгляд, использование модульной технологии позволяет: • повысить мотивацию учащихся в освоении не только знаний, но и ключевых компетенций; • строит...</p></div><div class="others"><h6><a href="/shkola/informatika-i-ikt/library/2012/02/03/rabochaya-programma-elektivnogo-kursa-k-proektu-cherez">Рабочая программа элективного курса "К проекту чeрез HTML"</a></h6><p class="search-excerpt">Данная рабочая программа составлена на основе авторской программы элективного  курса Т.М. Смирновой «К проекту через HTML». Программа имеет рецензию   Регионального экспертного совета...</p></div><div class="others"><h6><a href="/shkola/informatika-i-ikt/library/2012/03/20/uchebnaya-prezentatsiya-po-teme-yazyk-html-tablitsy">Учебная презентация по теме " Язык HTML (таблицы, создание форм)"</a></h6><p class="search-excerpt">ТаблицыСоздание форм...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2014/06/01/picture-453407-1401628874.jpg"><h6><a href="/shkola/informatika-i-ikt/library/2014/06/01/laboratornye-raboty">Формы языка программирования HTML</a></h6><p class="search-excerpt">Материал для практического выполнения на ПК....</p></div><div class="others"><h6><a href="/shkola/istoriya/library/2015/06/06/httpwww-prodlenka-orgmetodichkamypage-html-httpvideouroki">http://www.prodlenka.org/metodichka/mypage.html http://videouroki.net/filecom.php?fileid=98712464 http://videouroki.net/filecom.php?fileid=98711040 http://www.prodlenka.org/svidetelstvo.html http://videouroki.net/filecom.php?fileid=98710201 http://www.pro</a></h6><p class="search-excerpt">http://www.prodlenka.org/metodichka/mypage.htmlhttp://videouroki.net/filecom.php?fileid=98712464http://videouroki.net/filecom.php?fileid=98711040http://www.prodlenka.org/svidetelstvo.htmlhttp://videou...</p></div><div class="others"><h6><a href="/shkola/geografiya/library/2022/11/01/ssylki-na-moi-stati-i-publikatsii-v-zhivom-zhurnale-livejournal">Ссылки на мои статьи и публикации в Живом Журнале (LIVEJOURNAL): - 1. https://vladimir-shkola.livejournal.com/376.html 2. https://vladimir-shkola.livejournal.com/919.html</a></h6><p class="search-excerpt">Ссылки на мои  статьи и публикации в Живом Журнале (LIVEJOURNAL):https://vladimir-shkola.livejournal.com/376.htmlhttps://vladimir-shkola.livejournal.com/919.html...</p></div></div></div></div></div><br><div id="poisk-materialov" data-1="657"></div> <ul class="links inline"><li class="flag-like first last"><span><span class='like-tooltip flag-like'><a href='#'>Мне нравится</a><span class='flag-throbber'> </span></span></span></li> </ul> <div class="share_buttons clearfix">Поделиться:<div class="ya-share2" data-services="vkontakte,odnoklassniki,telegram,moimir" data-url="https://nsportal.ru/shkola/informatika-i-ikt/library/2023/05/03/forma-v-html" data-title="форма в html" data-image="https://nsportal.ru/sites/default/files/pictures/2013/09/09/picture-293577-1378755096.jpg"></div></div>  <div class="add-new-comment-button my-button-large"></div> </div> </div> </div> </div> </div> </div> </div><!-- /content-inner --> </div><!-- /content --> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div id="user_relationships_popup_form" class="user_relationships_ui_popup_form"></div><script src="/sites/default/files/advagg_js/js__S3bm1c7u9YzJnRE6QrV-HsLzADKLeupchfbrYg22kRU__S91yqV9ubUDMxzCK2GLBYdp1SFL3v48MFVTVZ3OSXjc__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script> <script src="/sites/default/files/advagg_js/js__hxOxF7aEdhvlSyCfiIODtjKmufwiFkLnYBgfAc3JU2U__Zvl8DJBWOfPQpMnqpLsqpzRLZD7C0PqUDMlY8RRkYVw__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script> <script src="/sites/default/files/advagg_js/js__c1zZbhXAByh0V-pY3W2l6b4e6e6URcR4okOH_epIox4__oVrjkf1Udl7K9Xgwtl5J3lSmv-cR7ynKeNmPgrmULSU__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script> <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script> </body> </html> <!-- Page cached by Boost @ 2024-11-16 01:57:53, expires @ 2025-03-08 01:57:53, lifetime 3 месяца 3 недели --> <!-- cache/normal/nsportal.ru/shkola/informatika-i-ikt/library/2023/05/03/forma-v-html_ -->