"Формы в HTML-документе" презентация

Тақырып бойынша 11 материал табылды

"Формы в HTML-документе" презентация

Материал туралы қысқаша түсінік
Материал знакомит учащихся с методами организации форм в НТМL - документах
Материалдың қысқаша нұсқасы
img_page_1
Жүктеу
bolisu
Бөлісу
ЖИ арқылы жасау
Слайдтың жеке беттері

#1 слайд

1 слайд

Форма — это инструмент, с помощью которого HTML -документ может отправить информацию в заранее определенную точку внешне

#2 слайд
Форма — это инструмент, с помощью которого HTML -документ может отправить информацию в заранее определенную точку внешнего мира. Формы применяются для опроса посетителей, покупки чего-либо, отправки электронной почты. Формы размещаются между тегами < FORM ></ FORM >. HTML -документ может содержать в себе несколько форм, но они не должны находиться одна внутри другой. Тег < FORM > может содержать следующие атрибуты: 1. Тег < INPUT> : используется для внесения информации пользователем в форму. Это и есть поля, в которые пользователь вводит информацию. Каждый элемент < INPUT > включает атрибут NAME , определяющий имя данного поля (идентификатор). Далее перечислены основные типы, применяемых элементов < INPUT >:

2 слайд

Форма — это инструмент, с помощью которого HTML -документ может отправить информацию в заранее определенную точку внешнего мира. Формы применяются для опроса посетителей, покупки чего-либо, отправки электронной почты. Формы размещаются между тегами < FORM ></ FORM >. HTML -документ может содержать в себе несколько форм, но они не должны находиться одна внутри другой. Тег < FORM > может содержать следующие атрибуты: 1. Тег < INPUT> : используется для внесения информации пользователем в форму. Это и есть поля, в которые пользователь вводит информацию. Каждый элемент < INPUT > включает атрибут NAME , определяющий имя данного поля (идентификатор). Далее перечислены основные типы, применяемых элементов < INPUT >:

1. TYPE = text . Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE =число (ширина о

#3 слайд
1. TYPE = text . Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE =число (ширина окна ввода в символах) и MAXLENGTH =число (максимально допустимая длина вводимой строки в символах): Например , <INPUT TYPE=text SIZE=20 NAME=User VALUE=" Привет "> Определяет окно шириной 20 символов для ввода текста. По умолчанию в окне находится текст «Привет», который пользователь может изменить. 2. TYPE = password . Определяет окно для ввода пароля. Абсолютно аналогичен типу text , только вместо символов вводимого текста показывает на экране звездочки (*):

3 слайд

1. TYPE = text . Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE =число (ширина окна ввода в символах) и MAXLENGTH =число (максимально допустимая длина вводимой строки в символах): Например , <INPUT TYPE=text SIZE=20 NAME=User VALUE=" Привет "> Определяет окно шириной 20 символов для ввода текста. По умолчанию в окне находится текст «Привет», который пользователь может изменить. 2. TYPE = password . Определяет окно для ввода пароля. Абсолютно аналогичен типу text , только вместо символов вводимого текста показывает на экране звездочки (*):

3. TYPE = radio . Определяет радиокнопку. Может содержать дополнительный атрибут CHECKED (показывает, что кнопка отмече

#4 слайд
3. TYPE = radio . Определяет радиокнопку. Может содержать дополнительный атрибут CHECKED (показывает, что кнопка отмечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка: Пример, <INPUT TYPE=radio NAME=Question VALUE="Yes" CHECKED> Да <INPUT TYPE=radio NAME=Question VALUE="No"> Нет <INPUT TYPE=radio NAME=Question VALUE="Possible"> Возможно Определяет группу из трех радиокнопок. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная Question со значением Yes . Если пользователь отметит другую кнопку, обработчику будет передана переменная Question со значением No или Possible .

4 слайд

3. TYPE = radio . Определяет радиокнопку. Может содержать дополнительный атрибут CHECKED (показывает, что кнопка отмечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка: Пример, <INPUT TYPE=radio NAME=Question VALUE="Yes" CHECKED> Да <INPUT TYPE=radio NAME=Question VALUE="No"> Нет <INPUT TYPE=radio NAME=Question VALUE="Possible"> Возможно Определяет группу из трех радиокнопок. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная Question со значением Yes . Если пользователь отметит другую кнопку, обработчику будет передана переменная Question со значением No или Possible .

4. TYPE = checkbox . Определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут

#5 слайд
4. TYPE = checkbox . Определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут CHECKED ( показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов: Пример, <INPUT TYPE=checkbox NAME=Comp VALUE="CPU"> Процессоры <INPUT TYPE=checkbox NAME=Comp VALUE="Video" CHECKED> Видеоадаптеры <INPUT TYPE=checkbox NAME=Comp VALUE="Scan"> Сканеры <INPUT TYPE=checkbox NAME=Comp VALUE="Modem" CHECKED> Модемы Определяет группу из четырех квадратов. Первоначально помечены второй и четвертый квадраты. Если пользователь не произведет изменений, обработчику будут переданы две переменные : Comp = Video и Comp = Modem .

5 слайд

4. TYPE = checkbox . Определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут CHECKED ( показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов: Пример, <INPUT TYPE=checkbox NAME=Comp VALUE="CPU"> Процессоры <INPUT TYPE=checkbox NAME=Comp VALUE="Video" CHECKED> Видеоадаптеры <INPUT TYPE=checkbox NAME=Comp VALUE="Scan"> Сканеры <INPUT TYPE=checkbox NAME=Comp VALUE="Modem" CHECKED> Модемы Определяет группу из четырех квадратов. Первоначально помечены второй и четвертый квадраты. Если пользователь не произведет изменений, обработчику будут переданы две переменные : Comp = Video и Comp = Modem .

5. TYPE = hidden . Определяет скрытый элемент данных, который не виден пользователю при заполнении формы и передается об

#6 слайд
5. TYPE = hidden . Определяет скрытый элемент данных, который не виден пользователю при заполнении формы и передается обработчику без изменений. Такой элемент иногда полезно иметь в форме, которая время от времени подвергается переработке, чтобы обработчик мог знать, с какой версией формы он имеет дело. Пример, <INPUT TYPE=hidden NAME=version VALUE="1.1"> Определяет скрытую переменную version , которая передается обработчику со значением 1.1. 6. TYPE = submit Определяет кнопку, при нажатии на которую запускается процесс передачи данных из формы обработчику: Пример, <INPUT TYPE=submit VALUE="Отправить"> 7. TYPE = reset . Определяет кнопку, при нажатии на которую очищаются поля формы. Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name : Пример, <INPUT TYPE=reset VALUE=" Сброс "> .

6 слайд

5. TYPE = hidden . Определяет скрытый элемент данных, который не виден пользователю при заполнении формы и передается обработчику без изменений. Такой элемент иногда полезно иметь в форме, которая время от времени подвергается переработке, чтобы обработчик мог знать, с какой версией формы он имеет дело. Пример, <INPUT TYPE=hidden NAME=version VALUE="1.1"> Определяет скрытую переменную version , которая передается обработчику со значением 1.1. 6. TYPE = submit Определяет кнопку, при нажатии на которую запускается процесс передачи данных из формы обработчику: Пример, <INPUT TYPE=submit VALUE="Отправить"> 7. TYPE = reset . Определяет кнопку, при нажатии на которую очищаются поля формы. Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name : Пример, <INPUT TYPE=reset VALUE=" Сброс "> .

Тег Тег TEXTAREATEXTAREA Формы могут содержать поля для ввода большого текста < TEXTAREA >: Пример, <TEXTAREA NAME=address

#7 слайд
Тег Тег TEXTAREATEXTAREA Формы могут содержать поля для ввода большого текста < TEXTAREA >: Пример, <TEXTAREA NAME=address ROWS=5 COLS=50> Наберите здесь сообщение</TEXTAREA> . Атрибут NAME определяет имя, под которым содержимое окна будет передано обработчику. Атрибут ROWS устанавливает высоту окна в строках. Атрибут COLS устанавливает ширину окна в символах. Текст, размещенный между тегами < TEXTAREA ></ TEXTAREA > , представляет собой содержимое окна по умолчанию. Пользователь может его отредактировать или просто стереть.

7 слайд

Тег Тег TEXTAREATEXTAREA Формы могут содержать поля для ввода большого текста < TEXTAREA >: Пример, <TEXTAREA NAME=address ROWS=5 COLS=50> Наберите здесь сообщение</TEXTAREA> . Атрибут NAME определяет имя, под которым содержимое окна будет передано обработчику. Атрибут ROWS устанавливает высоту окна в строках. Атрибут COLS устанавливает ширину окна в символах. Текст, размещенный между тегами < TEXTAREA ></ TEXTAREA > , представляет собой содержимое окна по умолчанию. Пользователь может его отредактировать или просто стереть.

Тег Тег <SELECT><SELECT> Кроме всего этого формы могут содержать меню выбора, которое начинается открывающимся тег

#8 слайд
Тег Тег <SELECT><SELECT> Кроме всего этого формы могут содержать меню выбора, которое начинается открывающимся тегом < SELECT > (содержит обязательный атрибут NAME , определяющий имя меню) и завершается закрывающимся </ SELECT >. Между ними находятся теги < OPTION >, определяющие элемент меню. Обязательный атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Тег < OPTION > может включать атрибут selected , показывающий, что данный элемент выбран/отмечен по умолчанию. Пример , <SELECT NAME="имя"> <OPTION VALUE="option_1" selected>текст 1 <OPTION VALUE="option_2">текст 2 <OPTION VALUE="option_n">текст n </ SELECT > текст 1 текст 2 текст n Тег < SELECT > может также содержать атрибут MULTIPLE , присутствие которого показывает, что из меню можно выбрать несколько элементов. Большинство Обозревателей показывают меню < SELECT MULTIPLE > в виде окна, в котором находятся элементы меню. Высоту окна в строках можно задать атрибутом SIZE =число . Пример , < SELECT MULTIPLE SIZE =3 NAME ="имя"> <OPTION VALUE="option_1" selected>текст 1 <OPTION VALUE="option_2">текст 2 <OPTION VALUE="option_n">текст n </SELECT>

8 слайд

Тег Тег <SELECT><SELECT> Кроме всего этого формы могут содержать меню выбора, которое начинается открывающимся тегом < SELECT > (содержит обязательный атрибут NAME , определяющий имя меню) и завершается закрывающимся </ SELECT >. Между ними находятся теги < OPTION >, определяющие элемент меню. Обязательный атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Тег < OPTION > может включать атрибут selected , показывающий, что данный элемент выбран/отмечен по умолчанию. Пример , <SELECT NAME="имя"> <OPTION VALUE="option_1" selected>текст 1 <OPTION VALUE="option_2">текст 2 <OPTION VALUE="option_n">текст n </ SELECT > текст 1 текст 2 текст n Тег < SELECT > может также содержать атрибут MULTIPLE , присутствие которого показывает, что из меню можно выбрать несколько элементов. Большинство Обозревателей показывают меню < SELECT MULTIPLE > в виде окна, в котором находятся элементы меню. Высоту окна в строках можно задать атрибутом SIZE =число . Пример , < SELECT MULTIPLE SIZE =3 NAME ="имя"> <OPTION VALUE="option_1" selected>текст 1 <OPTION VALUE="option_2">текст 2 <OPTION VALUE="option_n">текст n </SELECT>

Файл форматы:
ppt
23.05.2019
400
Жүктеу
ЖИ арқылы жасау
Бұл материалды қолданушы жариялаған. Ustaz Tilegi ақпаратты жеткізуші ғана болып табылады. Жарияланған материалдың мазмұны мен авторлық құқық толықтай автордың жауапкершілігінде. Егер материал авторлық құқықты бұзады немесе сайттан алынуы тиіс деп есептесеңіз,
шағым қалдыра аласыз
Қазақстандағы ең үлкен материалдар базасынан іздеу
Сіз үшін 400 000 ұстаздардың еңбегі мен тәжірибесін біріктіріп, ең үлкен материалдар базасын жасадық. Төменде керек материалды іздеп, жүктеп алып сабағыңызға қолдана аласыз
Материал жариялап, аттестацияға 100% жарамды сертификатты тегін алыңыз!
Ustaz tilegi журналы министірліктің тізіміне енген. Qr коды мен тіркеу номері беріледі. Материал жариялаған соң сертификат тегін бірден беріледі.
Оқу-ағарту министірлігінің ресми жауабы
Сайтқа 5 материал жариялап, тегін АЛҒЫС ХАТ алыңыз!
Қазақстан Республикасының білім беру жүйесін дамытуға қосқан жеке үлесі үшін және де Республика деңгейінде «Ustaz tilegi» Республикалық ғылыми – әдістемелік журналының желілік басылымына өз авторлық материалыңызбен бөлісіп, белсенді болғаныңыз үшін алғыс білдіреміз!
Сайтқа 25 материал жариялап, тегін ҚҰРМЕТ ГРОМАТАСЫН алыңыз!
Тәуелсіз Қазақстанның білім беру жүйесін дамытуға және білім беру сапасын арттыру мақсатында Республика деңгейінде «Ustaz tilegi» Республикалық ғылыми – әдістемелік журналының желілік басылымына өз авторлық жұмысын жариялағаны үшін марапатталасыз!
Министірлікпен келісілген курстар тізімі