SlideShare ist ein Scribd-Unternehmen logo
1 von 34
2
3
• HTML tags are the
hidden keywords within a web
page that define how the browser
must format and display the
content.
• Most tags must have two parts, an
opening and a closing part. For
example, <html> is the opening
tag and </html> is the closing tag.
4
HTML tags follow a simple but strict
syntax:
• Opening angle bracket (<)
• Tag Name
• Attributes (optional): First a space, then the
attribute name, an equal sign (=), and a value
enclosed in double quotes ("").
• Closing angle bracket (>)
5
Form allow you to type
information into fields on a
browser screen and submit that
information to a web server.
6
Html form tags are used to create html
forms.
Syntax:
<form action=“script URL” method= get |
post>form elements like input , text area
etc.</form>
7
• Action :
background script ready to process or
passed data
• Target:
Specify target window or frame where the
result of script will be displayed.
8
Method:
GET -- this is the default method and causes
the fill-out form contents to be appended to
the URL. Use only when submit has no
effect. e.g. pure query.
POST -- this method causes the fill-out form
contents to be sent to the server in a data
body rather than as part of the URL.
9
•Enctype:
Specifies how the browser
encodes data before it send it to
server
10
There are different types of form controls that
you can use to collect data using HTML form:
• Text Input Controls
• Checkboxes Controls
• Radio Box Controls
• Select Box Controls
• File Select boxes
• Hidden Controls
• Clickable Buttons
• Submit and Reset Button
11
Text Input Controls
There are three types of text input used on
forms:
• Single-line text input controls - This control is used for items
that require only one line of user input, such as search boxes
or names. They are created using HTML<input> tag.
• Password input controls - This is also a single-line text input
but it masks the character as soon as a user enters it. They are
also created using HTML <input> tag.
• Multi-line text input controls - This is used when the user is
required to give details that may be longer than a single
sentence. Multi-line input controls are created using
HTML <text area> tag.
12
• Basic example of a single-line text input used
to take first name and last
name
13
output
14
Password input controls
This is also a single-line text input but it masks the
character as soon as a user enters it. They are
also created using HTML <input> tag but type
attribute is set to password.
Attributes :
• Types
• Name
• Value
• Size
• Max length
15
16
• basic example of a single-line password
input used to take user password:
output
17
Checkbox Control
• Checkboxes are used when more than one
option is required to be selected. They are
also created using HTML <input> tag but type
attribute is set to checkbox.
• Attributes:
• Type
• Name
• Value
• check
18
• an example HTML code for a form with two
checkboxes:
19
Output
20
Radio Button Control
Radio buttons are used when out of many
options, just one option is required to be
selected. They are also created using HTML
<input> tag but type attribute is set to radio.
• Attributes
• Type
• Name
• Value
• checked
21
Select Box Control
• A select box, also called drop down box which
provides option to list down various options in
the form of drop down list, from where a user
can select one or more options.
• attributes
• Name.
• Size.
• Multiple.
22
23
example HTML code for a form with one drop down box
output
24
File Upload Box
If you want to allow a user to upload a file to
your web site, you will need to use a file
upload box, also known as a file select box.
This is also created using the <input> element
but type attribute is set to file.
Attributes:
• Name
• accept
25
Example HTML code for a form with one file upload box:
26
output
27
Button Controls
• There are various ways in HTML to create
clickable buttons. You can also create a
clickable button using <input> tag by setting
its type attribute to button.
• Attributes:
• Submit
• Reset
• Button
• image 28
example HTML code for a form with three types of
buttons:
29
output
30
Registration form using main form tags:
31
Contd….
32
output
33
34

Weitere ähnliche Inhalte

Was ist angesagt? (20)

Html4
Html4Html4
Html4
 
Web design - Working with forms in HTML
Web design - Working with forms in HTMLWeb design - Working with forms in HTML
Web design - Working with forms in HTML
 
uptu web technology unit 2 html
uptu web technology unit 2 htmluptu web technology unit 2 html
uptu web technology unit 2 html
 
2. HTML forms
2. HTML forms2. HTML forms
2. HTML forms
 
Web engineering - HTML Form
Web engineering -  HTML FormWeb engineering -  HTML Form
Web engineering - HTML Form
 
[Basic HTML/CSS] 4. html - form tags
[Basic HTML/CSS] 4. html - form tags[Basic HTML/CSS] 4. html - form tags
[Basic HTML/CSS] 4. html - form tags
 
Entering User Data from a Web Page HTML Forms
Entering User Data from a Web Page HTML FormsEntering User Data from a Web Page HTML Forms
Entering User Data from a Web Page HTML Forms
 
Html forms
Html formsHtml forms
Html forms
 
Tut 06 (forms)
Tut 06 (forms)Tut 06 (forms)
Tut 06 (forms)
 
Html tables, forms and audio video
Html tables, forms and audio videoHtml tables, forms and audio video
Html tables, forms and audio video
 
Html forms
Html formsHtml forms
Html forms
 
Html forms
Html formsHtml forms
Html forms
 
Html 5 Forms
Html 5 FormsHtml 5 Forms
Html 5 Forms
 
Lesson 2 Starting with the basics
Lesson 2 Starting with the basicsLesson 2 Starting with the basics
Lesson 2 Starting with the basics
 
MTA html5 organization, input, and validation
MTA html5 organization, input, and validationMTA html5 organization, input, and validation
MTA html5 organization, input, and validation
 
Php and web forms
Php and web formsPhp and web forms
Php and web forms
 
Html forms
Html formsHtml forms
Html forms
 
Lesson 15
Lesson 15Lesson 15
Lesson 15
 
Html Form Controls
Html Form ControlsHtml Form Controls
Html Form Controls
 
HTML frames and HTML forms
HTML frames and HTML formsHTML frames and HTML forms
HTML frames and HTML forms
 

Ähnlich wie Gitika html ppt

Ähnlich wie Gitika html ppt (20)

Web forms and html (lect 4)
Web forms and html (lect 4)Web forms and html (lect 4)
Web forms and html (lect 4)
 
Html5
Html5 Html5
Html5
 
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 form
Html formHtml form
Html form
 
The Complete HTML
The Complete HTMLThe Complete HTML
The Complete HTML
 
Html Forms
Html FormsHtml Forms
Html Forms
 
Presentation1
Presentation1Presentation1
Presentation1
 
HTML Comprehensive Overview
HTML Comprehensive OverviewHTML Comprehensive Overview
HTML Comprehensive Overview
 
CSS_Forms.pdf
CSS_Forms.pdfCSS_Forms.pdf
CSS_Forms.pdf
 
Forms Part 1
Forms Part 1Forms Part 1
Forms Part 1
 
HTML-Forms
HTML-FormsHTML-Forms
HTML-Forms
 
HTML 5 Basics Part Three
HTML 5 Basics Part ThreeHTML 5 Basics Part Three
HTML 5 Basics Part Three
 
3. HTML Forms.ppt
3. HTML Forms.ppt3. HTML Forms.ppt
3. HTML Forms.ppt
 
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
 
5. Frames & Forms.pdf
5. Frames & Forms.pdf5. Frames & Forms.pdf
5. Frames & Forms.pdf
 
Forms
FormsForms
Forms
 
Html basic
Html basicHtml basic
Html basic
 
Chapter 9: Forms
Chapter 9: FormsChapter 9: Forms
Chapter 9: Forms
 
Html5ppt
Html5pptHtml5ppt
Html5ppt
 
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
 

Mehr von gitika -

Programming tools
Programming toolsProgramming tools
Programming toolsgitika -
 
management
management management
management gitika -
 
Women empowerment
Women empowermentWomen empowerment
Women empowermentgitika -
 
Representation of Entity relationship diagram in data base managemnet system
Representation of Entity relationship diagram in data base managemnet systemRepresentation of Entity relationship diagram in data base managemnet system
Representation of Entity relationship diagram in data base managemnet systemgitika -
 
Online furniture
Online furnitureOnline furniture
Online furnituregitika -
 
Introduction to queue
Introduction to queueIntroduction to queue
Introduction to queuegitika -
 

Mehr von gitika - (6)

Programming tools
Programming toolsProgramming tools
Programming tools
 
management
management management
management
 
Women empowerment
Women empowermentWomen empowerment
Women empowerment
 
Representation of Entity relationship diagram in data base managemnet system
Representation of Entity relationship diagram in data base managemnet systemRepresentation of Entity relationship diagram in data base managemnet system
Representation of Entity relationship diagram in data base managemnet system
 
Online furniture
Online furnitureOnline furniture
Online furniture
 
Introduction to queue
Introduction to queueIntroduction to queue
Introduction to queue
 

Kürzlich hochgeladen

How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSCeline George
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Jisc
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Pooja Bhuva
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfagholdier
 
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...Amil baba
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxheathfieldcps1
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfAdmir Softic
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxDr. Sarita Anand
 
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptxOn_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptxPooja Bhuva
 
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxExploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxPooja Bhuva
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and ModificationsMJDuyan
 
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdfUnit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdfDr Vijay Vishwakarma
 
REMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxREMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxDr. Ravikiran H M Gowda
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibitjbellavia9
 
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxannathomasp01
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - Englishneillewis46
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentationcamerronhm
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structuredhanjurrannsibayan2
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfNirmal Dwivedi
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxDenish Jangid
 

Kürzlich hochgeladen (20)

How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptxOn_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
 
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxExploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdfUnit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
 
REMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxREMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptx
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 

Gitika html ppt

  • 1.
  • 2. 2
  • 3. 3
  • 4. • HTML tags are the hidden keywords within a web page that define how the browser must format and display the content. • Most tags must have two parts, an opening and a closing part. For example, <html> is the opening tag and </html> is the closing tag. 4
  • 5. HTML tags follow a simple but strict syntax: • Opening angle bracket (<) • Tag Name • Attributes (optional): First a space, then the attribute name, an equal sign (=), and a value enclosed in double quotes (""). • Closing angle bracket (>) 5
  • 6. Form allow you to type information into fields on a browser screen and submit that information to a web server. 6
  • 7. Html form tags are used to create html forms. Syntax: <form action=“script URL” method= get | post>form elements like input , text area etc.</form> 7
  • 8. • Action : background script ready to process or passed data • Target: Specify target window or frame where the result of script will be displayed. 8
  • 9. Method: GET -- this is the default method and causes the fill-out form contents to be appended to the URL. Use only when submit has no effect. e.g. pure query. POST -- this method causes the fill-out form contents to be sent to the server in a data body rather than as part of the URL. 9
  • 10. •Enctype: Specifies how the browser encodes data before it send it to server 10
  • 11. There are different types of form controls that you can use to collect data using HTML form: • Text Input Controls • Checkboxes Controls • Radio Box Controls • Select Box Controls • File Select boxes • Hidden Controls • Clickable Buttons • Submit and Reset Button 11
  • 12. Text Input Controls There are three types of text input used on forms: • Single-line text input controls - This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML<input> tag. • Password input controls - This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTML <input> tag. • Multi-line text input controls - This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <text area> tag. 12
  • 13. • Basic example of a single-line text input used to take first name and last name 13
  • 15. Password input controls This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTML <input> tag but type attribute is set to password. Attributes : • Types • Name • Value • Size • Max length 15
  • 16. 16 • basic example of a single-line password input used to take user password:
  • 18. Checkbox Control • Checkboxes are used when more than one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to checkbox. • Attributes: • Type • Name • Value • check 18
  • 19. • an example HTML code for a form with two checkboxes: 19
  • 21. Radio Button Control Radio buttons are used when out of many options, just one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to radio. • Attributes • Type • Name • Value • checked 21
  • 22. Select Box Control • A select box, also called drop down box which provides option to list down various options in the form of drop down list, from where a user can select one or more options. • attributes • Name. • Size. • Multiple. 22
  • 23. 23 example HTML code for a form with one drop down box
  • 25. File Upload Box If you want to allow a user to upload a file to your web site, you will need to use a file upload box, also known as a file select box. This is also created using the <input> element but type attribute is set to file. Attributes: • Name • accept 25
  • 26. Example HTML code for a form with one file upload box: 26
  • 28. Button Controls • There are various ways in HTML to create clickable buttons. You can also create a clickable button using <input> tag by setting its type attribute to button. • Attributes: • Submit • Reset • Button • image 28
  • 29. example HTML code for a form with three types of buttons: 29
  • 31. Registration form using main form tags: 31
  • 34. 34