SlideShare a Scribd company logo
1 of 5
Download to read offline
5
Web Development
HTML , CSS, JAVASCRIPT, BOOTSTRAP
Prepared by: Ghayour Abbas
Outline:
• Forms
Forms
An HTML form is used to collect user input. The user input is most often sent
to a server for processing.
The <form> Element
The HTML <form> element is used to create an HTML form for user input:
<form>
.
form elements
.
</form>
The <form> element is a container for different types of input elements, such as:
text fields, checkboxes, radio buttons, submit buttons, etc.
The <label> Element
Notice the use of the <label> element in the example above.
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because the screen-
reader will read out loud the label when the user focus on the input element.
The <label> element also help users who have difficulty clicking on very small
regions (such as radio buttons or checkboxes) - because when the user clicks
the text within the <label> element, it toggles the radio button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together.
Radio Buttons
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
Checkboxes
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of
choices.
The Submit Button
The <input type="submit"> defines a button for submitting the form data to a
form-handler.
The form-handler is typically a file on the server with a script for processing
input data.
The form-handler is specified in the form's action attribute.
The Name Attribute for <input>
Notice that each input field must have a name attribute to be submitted.
If the name attribute is omitted, the value of the input field will not be sent at all.
Task 1
Task 2

More Related Content

What's hot

Visual basic 6.0
Visual basic 6.0Visual basic 6.0
Visual basic 6.0sanket1996
 
Green Lantern Framework with Selenium IDE
Green Lantern Framework with Selenium IDEGreen Lantern Framework with Selenium IDE
Green Lantern Framework with Selenium IDESrilu Balla
 
Introduction to visual basic 6 (1)
Introduction to visual basic 6 (1)Introduction to visual basic 6 (1)
Introduction to visual basic 6 (1)Mark Vincent Cantero
 
Basic controls of Visual Basic 6.0
Basic controls of Visual Basic 6.0Basic controls of Visual Basic 6.0
Basic controls of Visual Basic 6.0Salim M
 
FDMEE script examples
FDMEE script examplesFDMEE script examples
FDMEE script examplesAmit Soni
 
Visual Programming
Visual ProgrammingVisual Programming
Visual ProgrammingBagzzz
 
Introduction to visual basic
Introduction to visual basicIntroduction to visual basic
Introduction to visual basicManav Khandelwal
 
LAYERS asp.net ppt
LAYERS asp.net pptLAYERS asp.net ppt
LAYERS asp.net pptIMEI
 
Having fun power apps components HandsOn - Power User Days Belgium 2019
Having fun power apps components HandsOn - Power User Days Belgium 2019Having fun power apps components HandsOn - Power User Days Belgium 2019
Having fun power apps components HandsOn - Power User Days Belgium 2019Rebekka Aalbers-de Jong
 
abap list viewer (alv)
abap list viewer (alv)abap list viewer (alv)
abap list viewer (alv)Kranthi Kumar
 
Having fun power apps components HandsOn - Power Platform World Tour Copenhag...
Having fun power apps components HandsOn - Power Platform World Tour Copenhag...Having fun power apps components HandsOn - Power Platform World Tour Copenhag...
Having fun power apps components HandsOn - Power Platform World Tour Copenhag...Rebekka Aalbers-de Jong
 
Salesforce connector Example
Salesforce connector ExampleSalesforce connector Example
Salesforce connector Exampleprudhvivreddy
 
Component interface
Component interfaceComponent interface
Component interfaceJAYAARC
 
Transforming Power Point Show with VBA
Transforming Power Point Show with VBATransforming Power Point Show with VBA
Transforming Power Point Show with VBADCPS
 

What's hot (20)

Visual basic 6.0
Visual basic 6.0Visual basic 6.0
Visual basic 6.0
 
Green Lantern Framework with Selenium IDE
Green Lantern Framework with Selenium IDEGreen Lantern Framework with Selenium IDE
Green Lantern Framework with Selenium IDE
 
Visual Logic Project - 1
Visual Logic Project - 1Visual Logic Project - 1
Visual Logic Project - 1
 
Introduction to visual basic 6 (1)
Introduction to visual basic 6 (1)Introduction to visual basic 6 (1)
Introduction to visual basic 6 (1)
 
Basic controls of Visual Basic 6.0
Basic controls of Visual Basic 6.0Basic controls of Visual Basic 6.0
Basic controls of Visual Basic 6.0
 
FDMEE script examples
FDMEE script examplesFDMEE script examples
FDMEE script examples
 
Chapter03 Ppt
Chapter03 PptChapter03 Ppt
Chapter03 Ppt
 
Visual Programming
Visual ProgrammingVisual Programming
Visual Programming
 
Prg 211 prg211
Prg 211 prg211Prg 211 prg211
Prg 211 prg211
 
Introduction to visual basic
Introduction to visual basicIntroduction to visual basic
Introduction to visual basic
 
LAYERS asp.net ppt
LAYERS asp.net pptLAYERS asp.net ppt
LAYERS asp.net ppt
 
oracle-reports6i
oracle-reports6ioracle-reports6i
oracle-reports6i
 
Having fun power apps components HandsOn - Power User Days Belgium 2019
Having fun power apps components HandsOn - Power User Days Belgium 2019Having fun power apps components HandsOn - Power User Days Belgium 2019
Having fun power apps components HandsOn - Power User Days Belgium 2019
 
abap list viewer (alv)
abap list viewer (alv)abap list viewer (alv)
abap list viewer (alv)
 
Sap scripts
Sap scriptsSap scripts
Sap scripts
 
Having fun power apps components HandsOn - Power Platform World Tour Copenhag...
Having fun power apps components HandsOn - Power Platform World Tour Copenhag...Having fun power apps components HandsOn - Power Platform World Tour Copenhag...
Having fun power apps components HandsOn - Power Platform World Tour Copenhag...
 
Gokul bok
Gokul bokGokul bok
Gokul bok
 
Salesforce connector Example
Salesforce connector ExampleSalesforce connector Example
Salesforce connector Example
 
Component interface
Component interfaceComponent interface
Component interface
 
Transforming Power Point Show with VBA
Transforming Power Point Show with VBATransforming Power Point Show with VBA
Transforming Power Point Show with VBA
 

Similar to Web Development 5

Web topic 20 1 html forms
Web topic 20 1  html formsWeb topic 20 1  html forms
Web topic 20 1 html formsCK Yang
 
Web topic 20 2 html forms
Web topic 20 2  html formsWeb topic 20 2  html forms
Web topic 20 2 html formsCK Yang
 
HtmlForms- basic HTML forms description.
HtmlForms- basic HTML forms description.HtmlForms- basic HTML forms description.
HtmlForms- basic HTML forms description.MohammadRafsunIslam
 
Web forms and html lecture Number 4
Web forms and html lecture Number 4Web forms and html lecture Number 4
Web forms and html lecture Number 4Mudasir Syed
 
Designing web pages html forms and input
Designing web pages html  forms and inputDesigning web pages html  forms and input
Designing web pages html forms and inputJesus Obenita Jr.
 
20-html-forms.ppt
20-html-forms.ppt20-html-forms.ppt
20-html-forms.pptKarenCato1
 
Std 12 Computer Chapter 1 Creating Html Forms Using KompoZer
Std 12 Computer Chapter 1 Creating Html Forms Using KompoZerStd 12 Computer Chapter 1 Creating Html Forms Using KompoZer
Std 12 Computer Chapter 1 Creating Html Forms Using KompoZerNuzhat Memon
 
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: FormsHTML Foundations, pt 3: Forms
HTML Foundations, pt 3: FormsShawn Calvert
 
HTML - FORMS.pptx
HTML - FORMS.pptxHTML - FORMS.pptx
HTML - FORMS.pptxNyssakotian
 
Html tables, forms and audio video
Html tables, forms and audio videoHtml tables, forms and audio video
Html tables, forms and audio videoSaad Sheikh
 

Similar to Web Development 5 (20)

Web topic 20 1 html forms
Web topic 20 1  html formsWeb topic 20 1  html forms
Web topic 20 1 html forms
 
Web topic 20 2 html forms
Web topic 20 2  html formsWeb topic 20 2  html forms
Web topic 20 2 html forms
 
Html forms
Html formsHtml forms
Html forms
 
M02 un11 p01
M02 un11 p01M02 un11 p01
M02 un11 p01
 
Forms.pptx
Forms.pptxForms.pptx
Forms.pptx
 
CSS_Forms.pdf
CSS_Forms.pdfCSS_Forms.pdf
CSS_Forms.pdf
 
HtmlForms- basic HTML forms description.
HtmlForms- basic HTML forms description.HtmlForms- basic HTML forms description.
HtmlForms- basic HTML forms description.
 
Web forms and html lecture Number 4
Web forms and html lecture Number 4Web forms and html lecture Number 4
Web forms and html lecture Number 4
 
Designing web pages html forms and input
Designing web pages html  forms and inputDesigning web pages html  forms and input
Designing web pages html forms and input
 
Web input forms.pptx
Web input forms.pptxWeb input forms.pptx
Web input forms.pptx
 
Html forms
Html formsHtml forms
Html forms
 
11-html-forms.ppt
11-html-forms.ppt11-html-forms.ppt
11-html-forms.ppt
 
html forms
html formshtml forms
html forms
 
Html form
Html formHtml form
Html form
 
20-html-forms.ppt
20-html-forms.ppt20-html-forms.ppt
20-html-forms.ppt
 
Std 12 Computer Chapter 1 Creating Html Forms Using KompoZer
Std 12 Computer Chapter 1 Creating Html Forms Using KompoZerStd 12 Computer Chapter 1 Creating Html Forms Using KompoZer
Std 12 Computer Chapter 1 Creating Html Forms Using KompoZer
 
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: FormsHTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
 
2. HTML forms
2. HTML forms2. HTML forms
2. HTML forms
 
HTML - FORMS.pptx
HTML - FORMS.pptxHTML - FORMS.pptx
HTML - FORMS.pptx
 
Html tables, forms and audio video
Html tables, forms and audio videoHtml tables, forms and audio video
Html tables, forms and audio video
 

More from ghayour abbas

Web Development 4 (HTML & CSS)
Web Development 4 (HTML & CSS)Web Development 4 (HTML & CSS)
Web Development 4 (HTML & CSS)ghayour abbas
 
Web Development 3 (HTML & CSS)
Web Development 3  (HTML & CSS)Web Development 3  (HTML & CSS)
Web Development 3 (HTML & CSS)ghayour abbas
 
Web Development 2 (HTML & CSS)
Web Development 2 (HTML & CSS)Web Development 2 (HTML & CSS)
Web Development 2 (HTML & CSS)ghayour abbas
 
Web Development 1 (HTML & CSS)
Web Development 1 (HTML & CSS)Web Development 1 (HTML & CSS)
Web Development 1 (HTML & CSS)ghayour abbas
 
CSI-503 - 13. Scheduler and Dispatcher
CSI-503 - 13. Scheduler and Dispatcher CSI-503 - 13. Scheduler and Dispatcher
CSI-503 - 13. Scheduler and Dispatcher ghayour abbas
 
CSI-503 - 11.Distributed Operating System
CSI-503 - 11.Distributed Operating SystemCSI-503 - 11.Distributed Operating System
CSI-503 - 11.Distributed Operating Systemghayour abbas
 
SWE-401 - 10. Software Testing Overview
SWE-401 - 10. Software Testing OverviewSWE-401 - 10. Software Testing Overview
SWE-401 - 10. Software Testing Overviewghayour abbas
 
SWE-401 - 9. Software Implementation
SWE-401 - 9. Software ImplementationSWE-401 - 9. Software Implementation
SWE-401 - 9. Software Implementationghayour abbas
 
SWE-401 - 8. Software User Interface Design
SWE-401 - 8. Software User Interface DesignSWE-401 - 8. Software User Interface Design
SWE-401 - 8. Software User Interface Designghayour abbas
 
SWE-401 - 7. Software Design Strategies
SWE-401 - 7. Software Design StrategiesSWE-401 - 7. Software Design Strategies
SWE-401 - 7. Software Design Strategiesghayour abbas
 
SWE-401 - 5. Software Design Basics
SWE-401 - 5. Software Design BasicsSWE-401 - 5. Software Design Basics
SWE-401 - 5. Software Design Basicsghayour abbas
 
SWE-401 - 6. Software Analysis and Design Tools
SWE-401 - 6. Software Analysis and Design ToolsSWE-401 - 6. Software Analysis and Design Tools
SWE-401 - 6. Software Analysis and Design Toolsghayour abbas
 
SWE-401 - 4. Software Requirement Specifications
SWE-401 - 4. Software Requirement Specifications SWE-401 - 4. Software Requirement Specifications
SWE-401 - 4. Software Requirement Specifications ghayour abbas
 
SWE-401 - 3. Software Project Management
SWE-401 - 3. Software Project ManagementSWE-401 - 3. Software Project Management
SWE-401 - 3. Software Project Managementghayour abbas
 
CSI-503 - 6. Memory Management
CSI-503 - 6. Memory Management CSI-503 - 6. Memory Management
CSI-503 - 6. Memory Management ghayour abbas
 
CSI-503 - 4. Process synchronization
CSI-503 - 4. Process synchronizationCSI-503 - 4. Process synchronization
CSI-503 - 4. Process synchronizationghayour abbas
 
CSI-503 - 3. Process Scheduling
CSI-503 - 3. Process SchedulingCSI-503 - 3. Process Scheduling
CSI-503 - 3. Process Schedulingghayour abbas
 

More from ghayour abbas (20)

TCP/IP & UDP
TCP/IP & UDPTCP/IP & UDP
TCP/IP & UDP
 
Web Development 4
Web Development 4Web Development 4
Web Development 4
 
Web Development 4 (HTML & CSS)
Web Development 4 (HTML & CSS)Web Development 4 (HTML & CSS)
Web Development 4 (HTML & CSS)
 
Web Development 3 (HTML & CSS)
Web Development 3  (HTML & CSS)Web Development 3  (HTML & CSS)
Web Development 3 (HTML & CSS)
 
Lab Manual CSI-321
Lab Manual CSI-321Lab Manual CSI-321
Lab Manual CSI-321
 
Web Development 2 (HTML & CSS)
Web Development 2 (HTML & CSS)Web Development 2 (HTML & CSS)
Web Development 2 (HTML & CSS)
 
Web Development 1 (HTML & CSS)
Web Development 1 (HTML & CSS)Web Development 1 (HTML & CSS)
Web Development 1 (HTML & CSS)
 
CSI-503 - 13. Scheduler and Dispatcher
CSI-503 - 13. Scheduler and Dispatcher CSI-503 - 13. Scheduler and Dispatcher
CSI-503 - 13. Scheduler and Dispatcher
 
CSI-503 - 11.Distributed Operating System
CSI-503 - 11.Distributed Operating SystemCSI-503 - 11.Distributed Operating System
CSI-503 - 11.Distributed Operating System
 
SWE-401 - 10. Software Testing Overview
SWE-401 - 10. Software Testing OverviewSWE-401 - 10. Software Testing Overview
SWE-401 - 10. Software Testing Overview
 
SWE-401 - 9. Software Implementation
SWE-401 - 9. Software ImplementationSWE-401 - 9. Software Implementation
SWE-401 - 9. Software Implementation
 
SWE-401 - 8. Software User Interface Design
SWE-401 - 8. Software User Interface DesignSWE-401 - 8. Software User Interface Design
SWE-401 - 8. Software User Interface Design
 
SWE-401 - 7. Software Design Strategies
SWE-401 - 7. Software Design StrategiesSWE-401 - 7. Software Design Strategies
SWE-401 - 7. Software Design Strategies
 
SWE-401 - 5. Software Design Basics
SWE-401 - 5. Software Design BasicsSWE-401 - 5. Software Design Basics
SWE-401 - 5. Software Design Basics
 
SWE-401 - 6. Software Analysis and Design Tools
SWE-401 - 6. Software Analysis and Design ToolsSWE-401 - 6. Software Analysis and Design Tools
SWE-401 - 6. Software Analysis and Design Tools
 
SWE-401 - 4. Software Requirement Specifications
SWE-401 - 4. Software Requirement Specifications SWE-401 - 4. Software Requirement Specifications
SWE-401 - 4. Software Requirement Specifications
 
SWE-401 - 3. Software Project Management
SWE-401 - 3. Software Project ManagementSWE-401 - 3. Software Project Management
SWE-401 - 3. Software Project Management
 
CSI-503 - 6. Memory Management
CSI-503 - 6. Memory Management CSI-503 - 6. Memory Management
CSI-503 - 6. Memory Management
 
CSI-503 - 4. Process synchronization
CSI-503 - 4. Process synchronizationCSI-503 - 4. Process synchronization
CSI-503 - 4. Process synchronization
 
CSI-503 - 3. Process Scheduling
CSI-503 - 3. Process SchedulingCSI-503 - 3. Process Scheduling
CSI-503 - 3. Process Scheduling
 

Recently uploaded

BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdfSoniaTolstoy
 
Mastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionMastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionSafetyChain Software
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxheathfieldcps1
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...EduSkills OECD
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdfssuser54595a
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)eniolaolutunde
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxNirmalaLoungPoorunde1
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactdawncurless
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Educationpboyjonauth
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxiammrhaywood
 
How to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxHow to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxmanuelaromero2013
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...Marc Dusseiller Dusjagr
 
Hybridoma Technology ( Production , Purification , and Application )
Hybridoma Technology  ( Production , Purification , and Application  ) Hybridoma Technology  ( Production , Purification , and Application  )
Hybridoma Technology ( Production , Purification , and Application ) Sakshi Ghasle
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformChameera Dedduwage
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityGeoBlogs
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introductionMaksud Ahmed
 
URLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website AppURLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website AppCeline George
 

Recently uploaded (20)

BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
 
Mastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionMastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory Inspection
 
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptx
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Education
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
How to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxHow to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptx
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
 
Hybridoma Technology ( Production , Purification , and Application )
Hybridoma Technology  ( Production , Purification , and Application  ) Hybridoma Technology  ( Production , Purification , and Application  )
Hybridoma Technology ( Production , Purification , and Application )
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
 
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdfTataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
 
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Bikash Puri  Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Bikash Puri  Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
URLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website AppURLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website App
 

Web Development 5

  • 1. 5 Web Development HTML , CSS, JAVASCRIPT, BOOTSTRAP Prepared by: Ghayour Abbas Outline: • Forms Forms An HTML form is used to collect user input. The user input is most often sent to a server for processing. The <form> Element The HTML <form> element is used to create an HTML form for user input: <form> . form elements . </form> The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.
  • 2. The <label> Element Notice the use of the <label> element in the example above. The <label> tag defines a label for many form elements. The <label> element is useful for screen-reader users, because the screen- reader will read out loud the label when the user focus on the input element. The <label> element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox. The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together. Radio Buttons The <input type="radio"> defines a radio button. Radio buttons let a user select ONE of a limited number of choices.
  • 3. Checkboxes The <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices. The Submit Button The <input type="submit"> defines a button for submitting the form data to a form-handler. The form-handler is typically a file on the server with a script for processing input data. The form-handler is specified in the form's action attribute.
  • 4. The Name Attribute for <input> Notice that each input field must have a name attribute to be submitted. If the name attribute is omitted, the value of the input field will not be sent at all. Task 1