HTML Forms презентация

Agenda
Semantic Elements
HTML Form
Form elements

Semantic Elements
What are Semantic Elements?
A semantic element clearly describes its meaning to both the browser and the developer.
Examples of non-semantic elements:
and
- Tells nothing about its content.
Examples of semantic elements:
, , and
- Clearly defines its content.
etc.
Слайд 4
Elements
tag is used to group related elements in a form.
tag defines
a caption for the
element.
tag defines a label for an
element.
element is used to create a drop-down list.
is used to group related options in a drop-down list.
tags inside the
element define the available options in the list.
Слайд 5
HTML Form
An HTML form can contain input elements like text fields, checkboxes, radio-buttons,
submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.
The tag is used to create an HTML form:
input elements
The
element is used to select user information.
An
element can vary in many ways, depending on the type attribute. An
element can be of type text field, checkbox, password, radio button, submit button, and more.
Слайд 6
The
tag
The ... tag encloses form elements (and probably
other elements as well)
The arguments to form tell what to do with the user input
action="url" (required)
Specifies where to send the data when the Submit button is clicked
method="get" (default)
Form data is sent as a URL with ?form_data info appended to the end
Can be used only if data is all ASCII and not more than 100 characters
method="post"
Form data is sent in the body of the URL request
Cannot be bookmarked by most browsers
target="target"
Tells where to open the page sent as a result of the request
target= _blank means open in a new window
target= _top means use the same window
Слайд 7
The
tag
Most, but not all, form elements use the input tag, with
a type="..." argument to tell which kind of element it is
type can be text, checkbox, radio, password, hidden, submit, reset, button, file, or image
Other common input tag arguments include:
name: the name of the element
id: a unique identifier for the element
value: the “value” of the element; used in different ways for different values of type
readonly: the value cannot be changed
disabled: the user can’t do anything with this element
Other arguments are defined for the input tag but have meaning only for certain values of type
Слайд 8
Text input
A text field:
A
multi-line text field
Hello
A password field:
• Note that two of these use the input tag, but one uses textarea
Слайд 9
Buttons
A submit button:
A reset button:
name="Submit2" value="Reset" />
A plain button:
submit: send data
reset: restore all form elements to their initial state
button: take some action as specified by JavaScript
• Note that the type is input, not “button”
Слайд 10
The
Element
The
element defines a clickable button:
Click
me!
The result:
Слайд 11
Radio buttons
Radio buttons:
male
female
If two
or more radio buttons have the same name, the user can only select one of them at a time
This is how you make a radio button “group”
If you ask for the value of that name, you will get the value specified for the selected radio button
As with checkboxes, radio buttons do not contain any text
Слайд 12
Labels
In many cases, the labels for controls are not part of the control
type="radio" name="gender" value="m" />male
In this case, clicking on the word “male” has no effect
A label tag will bind the text to the control
male
Clicking on the word “male” now clicks the radio button
w3schools says that you should use the for attribute:
Last Name:
In my testing (Firefox and Opera), this isn’t necessary, but it may be for some browsers
Labels also help page readers read the page correctly
Some browsers may render labels differently
Слайд 13
Checkboxes
A checkbox:
type: "checkbox"
name: used to reference this form
element from JavaScript
value: value to be returned when element is checked
Note that there is no text associated with the checkbox
Unless you use a label tag, only clicking on the box itself has any effect
Слайд 14
Drop-down menu or list
A menu or list:
red
green
value="BLUE">blue
Additional arguments:
size: the number of items visible in the list (default is "1")
multiple
if set to "true" (or just about anything else), any number of items may be selected
if omitted, only one item may be selected
if set to "false", behavior depends on the particular browser
Слайд 15
Hidden fields
<-- right there, don't you see it?
What good
is this?
All input fields are sent back to the server, including hidden fields
This is a way to include information that the user doesn’t need to see (or that you don’t want her to see)
The value of a hidden field can be set programmatically (by JavaScript) before the form is submitted
Слайд 16
A complete example
Get Identity
Who are you?
Name:
type="text" name="textfield">
Gender:
Male
Female
Имя файла: HTML-Forms.pptx
Количество просмотров: 25
Количество скачиваний: 0
Скачать
- Предыдущая
Каркасно-панельное домостроение в России и за рубежом
Следующая -
Война 1812 года
Похожие презентации
Использование MS Office для автоматизации профессиональной деятельности. Microsoft Word. Microsoft Office XP. ч.3
Экструдирование и подразделение в Blender
Кодирование данных. Тема 2
Введение в облачные платформы. Разбираемся с IaaS, SaaS и PaaS
час звена Психоактивные вещества
Программы Microsoft Office: PowerPoint 2010, Word 2010
VoIP – это просто
конкурсная работа по проведению акции Час Кода
Комплексное предложение по UX для сайта yard-imperial.ru
Вставка объектов в документ
Interconnect delay. (Chapter 7)
Поисковые системы
Структура, адресация и протоколы передачи информации в сети Интернет
Обработка информации
Сортування й фільтрація даних в електронній таблиці
Алгоритм создания мультимедийной презентации
Сравнительный анализ СЭД на основе пользовательских оценок
Тест з ЗНО
Носители информации
Как стать хакером
Бағдарламалық жасақтама
Операционная система Windows Vista
Алгоритми сортування. Частина 2
Учебно-исследовательская практика. Иностранный язык
Місце Інформатики в житті
: Обработка ирнформации
DeepLight
Гиперссылки. Фреймы в HTML документе
Обратная связь
Email:
Нажмите что бы посмотреть
window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R){return {data:{meta:{result:{meta:{h1:m,main_text:a,main_title:n,main_description:o,main_keywords:p,main_image:a},app:{logo_image:q,logo_image_width:r,logo_image_height:s,logo_text:a,image_width_full:t,image_width_min:u,recaptcha_key:v,yandex_search:w,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:x,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:h,item_slide_header:y,item_images:z,item_images_tag:i,item_words_h3:d,item_words_tag:i,item_words_1:h,routing:A,item_slide_skipping:B,item_download_timeout:C,item_slider_width:D,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:k,header_bg:j,accent:j}},social:E}},item:{result:{id:344009,name:l,category:F,count:G,jpg:"jpg\u002F344009",hits:H,download:b,h1:"HTML Forms презентация",meta:{h1:l,title:l,description:"HTML Forms презентация на тему, доклад, Информатика",keywords:"HTML Forms, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему HTML Forms из раздела Информатика. Презентация на заданную тему содержит 17 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003EAgenda\u003Cbr\u003E\u003Cp\u003ESemantic Elements\u003Cbr\u003EHTML Form\u003Cbr\u003EForm elements\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E \u003Cp\u003ESemantic Elements\u003Cbr\u003E\u003Cp\u003EWhat are Semantic Elements?\u003Cbr\u003EA semantic element clearly describes its meaning to both the browser and the developer.\u003Cbr\u003EExamples of non-semantic elements: \u003Cdiv\u003E and \u003Cspan\u003E - Tells nothing about its content.\u003Cbr\u003EExamples of semantic elements: \u003Cform\u003E, \u003Ctable\u003E, and \u003Cimg\u003E - Clearly defines its content.\u003Cbr\u003E\u003Cheader\u003E\u003Cbr\u003E\u003Cfooter\u003E\u003Cbr\u003E\u003Cnav\u003E\u003Cbr\u003Eetc.\u003Cbr\u003E\u003Cbr\u003E",file:"HTML-Forms.pptx",texts:["\u003Cp\u003E \u003Cbr\u003E HTML Forms\u003Cbr\u003E","\u003Cp\u003EAgenda\u003Cbr\u003E\u003Cp\u003ESemantic Elements\u003Cbr\u003EHTML Form\u003Cbr\u003EForm elements\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003ESemantic Elements\u003Cbr\u003E\u003Cp\u003EWhat are Semantic Elements?\u003Cbr\u003EA semantic element clearly describes its meaning to both the browser and the developer.\u003Cbr\u003EExamples of non-semantic elements: \u003Cdiv\u003E and \u003Cspan\u003E - Tells nothing about its content.\u003Cbr\u003EExamples of semantic elements: \u003Cform\u003E, \u003Ctable\u003E, and \u003Cimg\u003E - Clearly defines its content.\u003Cbr\u003E\u003Cheader\u003E\u003Cbr\u003E\u003Cfooter\u003E\u003Cbr\u003E\u003Cnav\u003E\u003Cbr\u003Eetc.\u003Cbr\u003E","\u003Cp\u003EElements\u003Cbr\u003E\u003Cp\u003E\u003Cfieldset\u003E tag is used to group related elements in a form. \u003Cbr\u003E\u003Clegend\u003E tag defines a caption for the \u003Cfieldset\u003E element. \u003Cbr\u003E\u003Clabel\u003E tag defines a label for an \u003Cinput\u003E element. \u003Cbr\u003E\u003Cselect\u003E element is used to create a drop-down list. \u003Cbr\u003E\u003Coptgroup\u003E is used to group related options in a drop-down list.\u003Cbr\u003E \u003Coption\u003E tags inside the \u003Cselect\u003E element define the available options in the list.\u003Cbr\u003E","\u003Cp\u003E\r\n\r\nHTML Form\r\n\u003Cbr\u003E\u003Cp\u003EAn HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.\u003Cbr\u003EThe \u003Cform\u003E tag is used to create an HTML form:\u003Cbr\u003E \u003Cform\u003E\r\n\r\ninput elements\r\n\r\n\u003C\u002Fform\u003E \u003Cbr\u003EThe \u003Cinput\u003E element is used to select user information.\u003Cbr\u003EAn \u003Cinput\u003E element can vary in many ways, depending on the type attribute. An \u003Cinput\u003E element can be of type text field, checkbox, password, radio button, submit button, and more.\u003Cbr\u003E","\u003Cp\u003EThe \u003Cform\u003E tag\u003Cbr\u003E\u003Cp\u003EThe \u003Cform arguments\u003E ... \u003C\u002Fform\u003E tag encloses form elements (and probably other elements as well)\u003Cbr\u003EThe arguments to form tell what to do with the user input\u003Cbr\u003Eaction=\"url\"\t(required)\u003Cbr\u003ESpecifies where to send the data when the Submit button is clicked\u003Cbr\u003Emethod=\"get\"\t(default)\u003Cbr\u003EForm data is sent as a URL with ?form_data info appended to the end\u003Cbr\u003ECan be used only if data is all ASCII and not more than 100 characters\u003Cbr\u003Emethod=\"post\"\u003Cbr\u003EForm data is sent in the body of the URL request\u003Cbr\u003ECannot be bookmarked by most browsers\u003Cbr\u003Etarget=\"target\"\u003Cbr\u003ETells where to open the page sent as a result of the request\u003Cbr\u003Etarget= _blank means open in a new window\u003Cbr\u003Etarget= _top means use the same window\u003Cbr\u003E","\u003Cp\u003EThe \u003Cinput\u003E tag\u003Cbr\u003E\u003Cp\u003EMost, but not all, form elements use the input tag, with a type=\"...\" argument to tell which kind of element it is\u003Cbr\u003Etype can be text, checkbox, radio, password, hidden, submit, reset, button, file, or image\u003Cbr\u003EOther common input tag arguments include:\u003Cbr\u003Ename: the name of the element\u003Cbr\u003Eid: a unique identifier for the element\u003Cbr\u003Evalue: the “value” of the element; used in different ways for different values of type \u003Cbr\u003Ereadonly: the value cannot be changed\u003Cbr\u003Edisabled: the user can’t do anything with this element\u003Cbr\u003EOther arguments are defined for the input tag but have meaning only for certain values of type \u003Cbr\u003E","\u003Cp\u003EText input\u003Cbr\u003E\u003Cp\u003EA text field: \u003Cbr\u003E \u003Cinput type=\"text\" name=\"textfield\" value=\"with an initial value\" \u002F\u003E\u003Cbr\u003E\u003Cp\u003EA multi-line text field \u003Cbr\u003E \u003Ctextarea name=\"textarea\" cols=\"24\" rows=\"2\"\u003EHello\u003C\u002Ftextarea\u003E\u003Cbr\u003E\u003Cp\u003EA password field: \u003Cbr\u003E \u003Cinput type=\"password\" name=\"textfield3\" value=\"secret\" \u002F\u003E\u003Cbr\u003E\u003Cp\u003E• Note that two of these use the input tag, but one uses textarea\u003Cbr\u003E","\u003Cp\u003EButtons\u003Cbr\u003E\u003Cp\u003E A submit button:\r\n \u003Cinput type=\"submit\" name=\"Submit\" value=\"Submit\" \u002F\u003E\u003Cbr\u003EA reset button:\r\n \u003Cinput type=\"reset\" name=\"Submit2\" value=\"Reset\" \u002F\u003E\u003Cbr\u003EA plain button:\r\n \u003Cinput type=\"button\" name=\"Submit3\" value=\"Push Me\" \u002F\u003E\r\n\u003Cbr\u003E\u003Cp\u003Esubmit: send data\r\n\u003Cbr\u003Ereset: restore all form elements to their initial state\u003Cbr\u003Ebutton: take some action as specified by JavaScript\u003Cbr\u003E\u003Cp\u003E• Note that the type is input, not “button”\u003Cbr\u003E","\u003Cp\u003EThe \u003Cbutton\u003E Element\u003Cbr\u003E\u003Cp\u003EThe \u003Cbutton\u003E element defines a clickable button:\u003Cbr\u003E\u003Cbutton type=“button” onclick=“alert(‘Hello World!’)”\u003E Click me! \u003C\u002Fbutton\u003E\u003Cbr\u003EThe result:\u003Cbr\u003E","\u003Cp\u003ERadio buttons\u003Cbr\u003E\u003Cp\u003ERadio buttons:\u003Cbr\u003E\r\n\u003Cinput type=\"radio\" name=\"radiobutton\" value=\"myValue1\" \u002F\u003E\r\nmale\u003Cbr\u003E\r\n\u003Cinput type=\"radio\" name=\"radiobutton\" value=\"myValue2”\r\n checked=\"checked\" \u002F\u003Efemale\u003Cbr\u003E\u003Cp\u003EIf two or more radio buttons have the same name, the user can only select one of them at a time\u003Cbr\u003EThis is how you make a radio button “group”\u003Cbr\u003EIf you ask for the value of that name, you will get the value specified for the selected radio button\u003Cbr\u003EAs with checkboxes, radio buttons do not contain any text\u003Cbr\u003E","\u003Cp\u003ELabels\u003Cbr\u003E\u003Cp\u003EIn many cases, the labels for controls are not part of the control\u003Cbr\u003E\u003Cinput type=\"radio\" name=\"gender\" value=\"m\" \u002F\u003Emale\u003Cbr\u003EIn this case, clicking on the word “male” has no effect\u003Cbr\u003EA label tag will bind the text to the control\u003Cbr\u003E\u003Clabel\u003E\u003Cinput type=\"radio\" name=\"gender\" value=\"m\" \u002F\u003Emale\u003C\u002Flabel\u003E\u003Cbr\u003EClicking on the word “male” now clicks the radio button\u003Cbr\u003Ew3schools says that you should use the for attribute:\u003Cbr\u003E\u003Clabel for=\"lname\"\u003ELast Name:\u003C\u002Flabel\u003E\r\n\u003Cinput type=\"text\" name=\"lastname\" id=\"lname\" \u002F\u003E\u003Cbr\u003EIn my testing (Firefox and Opera), this isn’t necessary, but it may be for some browsers\u003Cbr\u003ELabels also help page readers read the page correctly\u003Cbr\u003ESome browsers may render labels differently\u003Cbr\u003E","\u003Cp\u003ECheckboxes\u003Cbr\u003E\u003Cp\u003EA checkbox: \r\n \u003Cinput type=\"checkbox\" name=\"checkbox\"\r\n value=\"checkbox\" checked=\"checked\"\u003E\u003Cbr\u003E\u003Cp\u003Etype: \"checkbox\"\u003Cbr\u003Ename: used to reference this form element from JavaScript\u003Cbr\u003Evalue: value to be returned when element is checked\u003Cbr\u003ENote that there is no text associated with the checkbox\u003Cbr\u003EUnless you use a label tag, only clicking on the box itself has any effect\u003Cbr\u003E","\u003Cp\u003EDrop-down menu or list\u003Cbr\u003E\u003Cp\u003EA menu or list:\r\n\u003Cselect name=\"select\"\u003E\r\n \u003Coption value=\"red\"\u003Ered\u003C\u002Foption\u003E\r\n \u003Coption value=\"green\"\u003Egreen\u003C\u002Foption\u003E\r\n \u003Coption value=\"BLUE\"\u003Eblue\u003C\u002Foption\u003E\r\n\u003C\u002Fselect\u003E\u003Cbr\u003E\u003Cp\u003EAdditional arguments:\u003Cbr\u003Esize: the number of items visible in the list (default is \"1\")\u003Cbr\u003Emultiple\u003Cbr\u003Eif set to \"true\" (or just about anything else), any number of items may be selected\u003Cbr\u003Eif omitted, only one item may be selected\u003Cbr\u003Eif set to \"false\", behavior depends on the particular browser\u003Cbr\u003E","\u003Cp\u003EHidden fields\u003Cbr\u003E\u003Cp\u003E\u003Cinput type=\"hidden\" name=\"hiddenField\" value=\"nyah\"\u003E\r\n &lt;-- right there, don't you see it?\u003Cbr\u003E\u003Cp\u003EWhat good is this?\u003Cbr\u003EAll input fields are sent back to the server, including hidden fields\u003Cbr\u003EThis is a way to include information that the user doesn’t need to see (or that you don’t want her to see)\u003Cbr\u003EThe value of a hidden field can be set programmatically (by JavaScript) before the form is submitted\u003Cbr\u003E","\u003Cp\u003EA complete example\u003Cbr\u003E\u003Cp\u003E\u003Chtml\u003E\r\n\u003Chead\u003E\r\n\u003Ctitle\u003EGet Identity\u003C\u002Ftitle\u003E\r\n\u003Cmeta http-equiv=\"Content-Type\" content=\"text\u002Fhtml;\r\n charset=iso-8859-1\"\u003E\r\n\u003C\u002Fhead\u003E\r\n\u003Cbody\u003E\r\n\u003Cp\u003E\u003Cb\u003EWho are you?\u003C\u002Fb\u003E\u003C\u002Fp\u003E\r\n\u003Cform method=\"post\" action=\"\"\u003E\r\n \u003Cp\u003EName: \r\n \u003Cinput type=\"text\" name=\"textfield\"\u003E\r\n \u003C\u002Fp\u003E\r\n \u003Cp\u003EGender: \r\n \u003Clabel\u003E\u003Cinput type=\"radio\" name=\"gender\" value=\"m\" \u002F\u003EMale\u003Clabel\u003E\r\n \u003Clabel\u003E\u003Cinput type=\"radio\" name=\"gender\" value=\"f\" \u002F\u003EFemale\u003C\u002Flabel\u003E\r\n \u003C\u002Fp\u003E\r\n \u003C\u002Fform\u003E\r\n\u003C\u002Fbody\u003E\r\n\u003C\u002Fhtml\u003E\u003Cbr\u003E","\u003Cp\u003EThank you for your attention!\u003Cbr\u003E"],href:"\u002Finformatika\u002Fhtml-forms",href_category:"\u002Finformatika",date:1659205220,related:[{id:238897,name:"Использование MS Office для автоматизации профессиональной деятельности. Microsoft Word. Microsoft Office XP. ч.3",href:"\u002Finformatika\u002Fispolzovanie-ms-office-dlya-avtomatizatsii-professionalnoy",jpg:"jpg\u002F238897"},{id:296853,name:"Экструдирование и подразделение в Blender",href:"\u002Finformatika\u002Fekstrudirovanie-i-podrazdelenie-v-blender",jpg:"jpg\u002F296853"},{id:582856,name:"Кодирование данных. Тема 2",href:"\u002Finformatika\u002Fkodirovanie-dannyh-tema-2",jpg:"jpg\u002F582856"},{id:6676,name:"Введение в облачные платформы. Разбираемся с IaaS, SaaS и PaaS",href:"\u002Finformatika\u002Fvvedenie-v-oblachnye-platformy-razbiraemsya-s",jpg:"jpg\u002F6676"},{id:463077,name:"час звена Психоактивные вещества",href:"\u002Finformatika\u002Fchas-zvena-psihoaktivnye-veshchestva-1",jpg:"jpg\u002F463077"},{id:197288,name:"Программы Microsoft Office: PowerPoint 2010, Word 2010",href:"\u002Finformatika\u002Fprogrammy-microsoft-office-powerpoint-2010-word",jpg:"jpg\u002F197288"},{id:128816,name:"VoIP – это просто",href:"\u002Finformatika\u002Fvoip--eto-prosto-1",jpg:"jpg\u002F128816"},{id:470188,name:"конкурсная работа по проведению акции Час Кода",href:"\u002Finformatika\u002Fkonkursnaya-rabota-po-provedeniyu-aktsii-chas",jpg:"jpg\u002F470188"},{id:134046,name:"Комплексное предложение по UX для сайта yard-imperial.ru",href:"\u002Finformatika\u002Fkompleksnoe-predlozhenie-po-ux-dlya-sayta",jpg:"jpg\u002F134046"},{id:169150,name:"Вставка объектов в документ",href:"\u002Finformatika\u002Fvstavka-obektov-v-dokument",jpg:"jpg\u002F169150"},{id:383388,name:"Interconnect delay. (Chapter 7)",href:"\u002Finformatika\u002Finterconnect-delay-chapter-7",jpg:"jpg\u002F383388"},{id:141753,name:"Поисковые системы",href:"\u002Finformatika\u002Fpoiskovye-sistemy-3",jpg:"jpg\u002F141753"},{id:197621,name:"Структура, адресация и протоколы передачи информации в сети Интернет",href:"\u002Finformatika\u002Fstruktura-adresatsiya-i-protokoly-peredachi-informatsii",jpg:"jpg\u002F197621"},{id:167491,name:"Обработка информации",href:"\u002Finformatika\u002Fobrabotka-informatsii-4",jpg:"jpg\u002F167491"},{id:432556,name:"Сортування й фільтрація даних в електронній таблиці",href:"\u002Finformatika\u002Fsortuvannya-y-fltratsya-danih-v-elektronny",jpg:"jpg\u002F432556"},{id:307746,name:"Алгоритм создания мультимедийной презентации",href:"\u002Finformatika\u002Falgoritm-sozdaniya-multimediynoy-prezentatsii",jpg:"jpg\u002F307746"},{id:338021,name:"Сравнительный анализ СЭД на основе пользовательских оценок",href:"\u002Finformatika\u002Fsravnitelnyy-analiz-sed-na-osnove-polzovatelskih",jpg:"jpg\u002F338021"},{id:24072,name:"Тест з ЗНО",href:"\u002Finformatika\u002Ftest-z-zno",jpg:"jpg\u002F24072"},{id:561963,name:"Носители информации",href:"\u002Finformatika\u002Fnositeli-informatsii-21",jpg:"jpg\u002F561963"},{id:369060,name:"Как стать хакером",href:"\u002Finformatika\u002Fkak-stat-hakerom",jpg:"jpg\u002F369060"},{id:284725,name:"Бағдарламалық жасақтама",href:"\u002Finformatika\u002Fbadarlamaly-zhasatama-1",jpg:"jpg\u002F284725"},{id:207283,name:"Операционная система Windows Vista",href:"\u002Finformatika\u002Foperatsionnaya-sistema-windows-vista",jpg:"jpg\u002F207283"},{id:581134,name:"Алгоритми сортування. Частина 2",href:"\u002Finformatika\u002Falgoritmi-sortuvannya-chastina-2",jpg:"jpg\u002F581134"},{id:365680,name:"Учебно-исследовательская практика. Иностранный язык",href:"\u002Finformatika\u002Fuchebno-issledovatelskaya-praktika-inostrannyy-yazyk",jpg:"jpg\u002F365680"},{id:211187,name:"Місце Інформатики в житті",href:"\u002Finformatika\u002Fmstse-nformatiki-v-zhitt",jpg:"jpg\u002F211187"},{id:555573,name:": Обработка ирнформации",href:"\u002Finformatika\u002F-obrabotka-irnformatsii",jpg:"jpg\u002F555573"},{id:350027,name:"DeepLight",href:"\u002Finformatika\u002Fdeeplight",jpg:"jpg\u002F350027"},{id:293363,name:"Гиперссылки. Фреймы в HTML документе",href:"\u002Finformatika\u002Fgiperssylki-freymy-v-html-dokumente",jpg:"jpg\u002F293363"}],navigation:{next:"\u002Fliteratura\u002Fvoyna-1812-goda-1770",next_name:"Война 1812 года",prev:"\u002Funcategorized\u002Fkarkasno-panelnoe-domostroenie-v-rossii-i",prev_name:"Каркасно-панельное домостроение в России и за рубежом"}}},categories:{result:[{id:I,ordering:b,name:"Без категории",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:I,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:F,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:10,name:"Литература",pseudoname:"literatura"},{id:119,ordering:11,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:h,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:G,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:H,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]}},state:{},_errors:{},serverRendered:d,config:{public:{SITE_NAME:J,SITE_HOST:"mypreza.com",SITE_LANG:K,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:J,short_name:a,description:a,lang:K,start_url:"\u002F?standalone=true",display:"standalone",background_color:k,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:c,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:c,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:c,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:c,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:c,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:c,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:c,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:c,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:c,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:c,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:c,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:c,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:c,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:c,sizes:R,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:d,childIframe:e,clickmap:e,defer:e,useRuntimeConfig:d,trackHash:e,trackLinks:d,type:b,webvisor:e,triggerEvent:e,consoleLog:d,partytown:e,isDev:e}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:m,main_text:a,main_title:n,main_description:o,main_keywords:p,main_image:a},app:{logo_image:q,logo_image_width:r,logo_image_height:s,logo_text:a,image_width_full:t,image_width_min:u,recaptcha_key:v,yandex_search:w,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:x,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:h,item_slide_header:y,item_images:z,item_images_tag:i,item_words_h3:d,item_words_tag:i,item_words_1:h,routing:A,item_slide_skipping:B,item_download_timeout:C,item_slider_width:D,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:k,header_bg:j,accent:j}},social:E,token:a}}}}("",0,"image\u002Fpng",true,false,"any","maskable",13,"h3","#d53032","#ffffff","HTML Forms","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","div","images","category","both",80,800,"\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E","Информатика",17,25,1,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))

Elements
tag is used to group related elements in a form.
tag defines a caption for the
element.
tag defines a label for an
element.
element is used to create a drop-down list.
is used to group related options in a drop-down list.
tags inside the
element define the available options in the list.

HTML Form
An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.
The tag is used to create an HTML form:
input elements
The
element is used to select user information.
An
element can vary in many ways, depending on the type attribute. An
element can be of type text field, checkbox, password, radio button, submit button, and more.

The
tag
The ... tag encloses form elements (and probably other elements as well)
The arguments to form tell what to do with the user input
action="url" (required)
Specifies where to send the data when the Submit button is clicked
method="get" (default)
Form data is sent as a URL with ?form_data info appended to the end
Can be used only if data is all ASCII and not more than 100 characters
method="post"
Form data is sent in the body of the URL request
Cannot be bookmarked by most browsers
target="target"
Tells where to open the page sent as a result of the request
target= _blank means open in a new window
target= _top means use the same window

The
tag
Most, but not all, form elements use the input tag, with a type="..." argument to tell which kind of element it is
type can be text, checkbox, radio, password, hidden, submit, reset, button, file, or image
Other common input tag arguments include:
name: the name of the element
id: a unique identifier for the element
value: the “value” of the element; used in different ways for different values of type
readonly: the value cannot be changed
disabled: the user can’t do anything with this element
Other arguments are defined for the input tag but have meaning only for certain values of type

Text input
A text field:
A multi-line text field
Hello
A password field:
• Note that two of these use the input tag, but one uses textarea

Buttons
A submit button:
A reset button: name="Submit2" value="Reset" />
A plain button:
submit: send data
reset: restore all form elements to their initial state
button: take some action as specified by JavaScript
• Note that the type is input, not “button”

The
Element
The
element defines a clickable button:
Click me!
The result:

Radio buttons
Radio buttons:
male
female
If two or more radio buttons have the same name, the user can only select one of them at a time
This is how you make a radio button “group”
If you ask for the value of that name, you will get the value specified for the selected radio button
As with checkboxes, radio buttons do not contain any text

Labels
In many cases, the labels for controls are not part of the control type="radio" name="gender" value="m" />male
In this case, clicking on the word “male” has no effect
A label tag will bind the text to the control
male
Clicking on the word “male” now clicks the radio button
w3schools says that you should use the for attribute:
Last Name:
In my testing (Firefox and Opera), this isn’t necessary, but it may be for some browsers
Labels also help page readers read the page correctly
Some browsers may render labels differently

Checkboxes
A checkbox:
type: "checkbox"
name: used to reference this form element from JavaScript
value: value to be returned when element is checked
Note that there is no text associated with the checkbox
Unless you use a label tag, only clicking on the box itself has any effect

Drop-down menu or list
A menu or list:
red
green
value="BLUE">blue
Additional arguments:
size: the number of items visible in the list (default is "1")
multiple
if set to "true" (or just about anything else), any number of items may be selected
if omitted, only one item may be selected
if set to "false", behavior depends on the particular browser value="BLUE">blue

Hidden fields
<-- right there, don't you see it?
What good is this?
All input fields are sent back to the server, including hidden fields
This is a way to include information that the user doesn’t need to see (or that you don’t want her to see)
The value of a hidden field can be set programmatically (by JavaScript) before the form is submitted

A complete example
Get Identity
Who are you?
Name: type="text" name="textfield">
Gender:
Male
Female