SlideShare a Scribd company logo
1 of 17
Guess the different form uses base on the
images
Guess the different
form uses base on
the images
Guess the different form uses base on the images
Guess the different form uses base on the images
Guess the different form uses base on the images
HTML Form Elements
Lesson Objectives
At the end of the lesson, the student should be able to:
•Insert different form tags such asText,TextArea, Radio
Button, Check Box, Selection, and Buttons.
HTML 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:
The <form> element is a container for different types of input
elements, such as: text fields, checkboxes, radio buttons,
submit buttons, etc.
The <input> Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the
type attribute.
Here are some examples:
Text Fields
The <input type="text"> defines a single-line input field for text input.
LetsTry It
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.
HTML Form Elements Guide - Learn Different Form Tags Like Text, TextArea, Radio Buttons, Checkboxes and More

More Related Content

What's hot

AutoCorrect - Excel 2013 Tutorial
AutoCorrect - Excel 2013 TutorialAutoCorrect - Excel 2013 Tutorial
AutoCorrect - Excel 2013 TutorialSpreadsheetTrainer
 
Oracle 10g Forms Lesson 9
Oracle 10g Forms Lesson 9Oracle 10g Forms Lesson 9
Oracle 10g Forms Lesson 9KAMA3
 
Classifications in IBM Maximo Asset Management
Classifications in IBM Maximo Asset ManagementClassifications in IBM Maximo Asset Management
Classifications in IBM Maximo Asset ManagementRobert Zientara
 
Using InDesign and Acrobat to Create Interactive, Submittable, Forms
Using InDesign and Acrobat to Create Interactive, Submittable, FormsUsing InDesign and Acrobat to Create Interactive, Submittable, Forms
Using InDesign and Acrobat to Create Interactive, Submittable, Formsjpakrash
 
Apply Bold, Italic and Underline to Selected Text in a RichtextBox using Visu...
Apply Bold, Italic and Underline to Selected Text in a RichtextBox using Visu...Apply Bold, Italic and Underline to Selected Text in a RichtextBox using Visu...
Apply Bold, Italic and Underline to Selected Text in a RichtextBox using Visu...Daniel DotNet
 
Apply Bold, Italic and Underline to Selected Text in a RichtextBox using Visu...
Apply Bold, Italic and Underline to Selected Text in a RichtextBox using Visu...Apply Bold, Italic and Underline to Selected Text in a RichtextBox using Visu...
Apply Bold, Italic and Underline to Selected Text in a RichtextBox using Visu...Daniel DotNet
 
Oracle 10g Forms Lesson 8
Oracle 10g Forms Lesson 8Oracle 10g Forms Lesson 8
Oracle 10g Forms Lesson 8KAMA3
 
Basic Functions - Excel 2013 Tutorial
Basic Functions - Excel 2013 TutorialBasic Functions - Excel 2013 Tutorial
Basic Functions - Excel 2013 TutorialSpreadsheetTrainer
 
How to build accessible UI components
How to build accessible UI componentsHow to build accessible UI components
How to build accessible UI componentsRuss Weakley
 
Accessible states in Design Systems
Accessible states in Design SystemsAccessible states in Design Systems
Accessible states in Design SystemsRuss Weakley
 
Entering Data - Excel 2013 Tutorial
Entering Data - Excel 2013 TutorialEntering Data - Excel 2013 Tutorial
Entering Data - Excel 2013 TutorialSpreadsheetTrainer
 

What's hot (20)

AutoCorrect - Excel 2013 Tutorial
AutoCorrect - Excel 2013 TutorialAutoCorrect - Excel 2013 Tutorial
AutoCorrect - Excel 2013 Tutorial
 
Oracle 10g Forms Lesson 9
Oracle 10g Forms Lesson 9Oracle 10g Forms Lesson 9
Oracle 10g Forms Lesson 9
 
Classifications in IBM Maximo Asset Management
Classifications in IBM Maximo Asset ManagementClassifications in IBM Maximo Asset Management
Classifications in IBM Maximo Asset Management
 
Using InDesign and Acrobat to Create Interactive, Submittable, Forms
Using InDesign and Acrobat to Create Interactive, Submittable, FormsUsing InDesign and Acrobat to Create Interactive, Submittable, Forms
Using InDesign and Acrobat to Create Interactive, Submittable, Forms
 
Visual Logic Project - 1
Visual Logic Project - 1Visual Logic Project - 1
Visual Logic Project - 1
 
Excel mod 5 PowerPoint
Excel mod 5 PowerPointExcel mod 5 PowerPoint
Excel mod 5 PowerPoint
 
Office session 10
Office session 10Office session 10
Office session 10
 
Mop excel proj 1 power point
Mop excel proj 1   power pointMop excel proj 1   power point
Mop excel proj 1 power point
 
Apply Bold, Italic and Underline to Selected Text in a RichtextBox using Visu...
Apply Bold, Italic and Underline to Selected Text in a RichtextBox using Visu...Apply Bold, Italic and Underline to Selected Text in a RichtextBox using Visu...
Apply Bold, Italic and Underline to Selected Text in a RichtextBox using Visu...
 
java
javajava
java
 
Apply Bold, Italic and Underline to Selected Text in a RichtextBox using Visu...
Apply Bold, Italic and Underline to Selected Text in a RichtextBox using Visu...Apply Bold, Italic and Underline to Selected Text in a RichtextBox using Visu...
Apply Bold, Italic and Underline to Selected Text in a RichtextBox using Visu...
 
Prg 211 prg211
Prg 211 prg211Prg 211 prg211
Prg 211 prg211
 
Oracle 10g Forms Lesson 8
Oracle 10g Forms Lesson 8Oracle 10g Forms Lesson 8
Oracle 10g Forms Lesson 8
 
Basic Functions - Excel 2013 Tutorial
Basic Functions - Excel 2013 TutorialBasic Functions - Excel 2013 Tutorial
Basic Functions - Excel 2013 Tutorial
 
How to build accessible UI components
How to build accessible UI componentsHow to build accessible UI components
How to build accessible UI components
 
Cati tutorial
Cati tutorialCati tutorial
Cati tutorial
 
Accessible states in Design Systems
Accessible states in Design SystemsAccessible states in Design Systems
Accessible states in Design Systems
 
Spreadsheet-Software
Spreadsheet-SoftwareSpreadsheet-Software
Spreadsheet-Software
 
Entering Data - Excel 2013 Tutorial
Entering Data - Excel 2013 TutorialEntering Data - Excel 2013 Tutorial
Entering Data - Excel 2013 Tutorial
 
Excel vba
Excel vbaExcel vba
Excel vba
 

Similar to HTML Form Elements Guide - Learn Different Form Tags Like Text, TextArea, Radio Buttons, Checkboxes and More

Similar to HTML Form Elements Guide - Learn Different Form Tags Like Text, TextArea, Radio Buttons, Checkboxes and More (20)

Forms.pptx
Forms.pptxForms.pptx
Forms.pptx
 
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
 
CSS_Forms.pdf
CSS_Forms.pdfCSS_Forms.pdf
CSS_Forms.pdf
 
Html forms
Html formsHtml forms
Html forms
 
11-html-forms.ppt
11-html-forms.ppt11-html-forms.ppt
11-html-forms.ppt
 
HtmlForms- basic HTML forms description.
HtmlForms- basic HTML forms description.HtmlForms- basic HTML forms description.
HtmlForms- basic HTML forms description.
 
html forms
html formshtml forms
html forms
 
Html forms
Html formsHtml forms
Html forms
 
2. HTML forms
2. HTML forms2. HTML forms
2. HTML forms
 
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
 
20-html-forms.ppt
20-html-forms.ppt20-html-forms.ppt
20-html-forms.ppt
 
Web input forms.pptx
Web input forms.pptxWeb input forms.pptx
Web input forms.pptx
 
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: FormsHTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
 
HTML Form
HTML FormHTML Form
HTML Form
 
Html class-04
Html class-04Html class-04
Html class-04
 
Html tables, forms and audio video
Html tables, forms and audio videoHtml tables, forms and audio video
Html tables, forms and audio video
 
Html Xhtml And Xml 3e Tutorial 6
Html Xhtml And Xml 3e Tutorial 6Html Xhtml And Xml 3e Tutorial 6
Html Xhtml And Xml 3e Tutorial 6
 
Forms and buttons
Forms and buttonsForms and buttons
Forms and buttons
 
Building html forms
Building html formsBuilding html forms
Building html forms
 

Recently uploaded

Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104misteraugie
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxSayali Powar
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfciinovamais
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Krashi Coaching
 
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
 
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
 
Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3JemimahLaneBuaron
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDThiyagu K
 
The byproduct of sericulture in different industries.pptx
The byproduct of sericulture in different industries.pptxThe byproduct of sericulture in different industries.pptx
The byproduct of sericulture in different industries.pptxShobhayan Kirtania
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdfQucHHunhnh
 
mini mental status format.docx
mini    mental       status     format.docxmini    mental       status     format.docx
mini mental status format.docxPoojaSen20
 
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
 
social pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajansocial pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajanpragatimahajan3
 
JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...
JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...
JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...anjaliyadav012327
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptxVS Mahajan Coaching Centre
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingTechSoup
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Celine George
 

Recently uploaded (20)

Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
 
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 ...
 
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
 
Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
 
The byproduct of sericulture in different industries.pptx
The byproduct of sericulture in different industries.pptxThe byproduct of sericulture in different industries.pptx
The byproduct of sericulture in different industries.pptx
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
mini mental status format.docx
mini    mental       status     format.docxmini    mental       status     format.docx
mini mental status format.docx
 
Advance Mobile Application Development class 07
Advance Mobile Application Development class 07Advance Mobile Application Development class 07
Advance Mobile Application Development class 07
 
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
 
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
 
social pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajansocial pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajan
 
JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...
JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...
JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 

HTML Form Elements Guide - Learn Different Form Tags Like Text, TextArea, Radio Buttons, Checkboxes and More

  • 1. Guess the different form uses base on the images
  • 2. Guess the different form uses base on the images
  • 3. Guess the different form uses base on the images
  • 4. Guess the different form uses base on the images
  • 5. Guess the different form uses base on the images
  • 7. Lesson Objectives At the end of the lesson, the student should be able to: •Insert different form tags such asText,TextArea, Radio Button, Check Box, Selection, and Buttons.
  • 8. HTML Forms An HTML form is used to collect user input.The user input is most often sent to a server for processing.
  • 9. The <form> Element The HTML <form> element is used to create an HTML form for user input: The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.
  • 10. The <input> Element The HTML <input> element is the most used form element. An <input> element can be displayed in many ways, depending on the type attribute. Here are some examples:
  • 11. Text Fields The <input type="text"> defines a single-line input field for text input. LetsTry It
  • 12. 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.`
  • 13. Radio Buttons The <input type="radio"> defines a radio button. Radio buttons let a user select ONE of a limited number of choices
  • 14. Checkboxes The <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.
  • 15. 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.
  • 16. 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.