SlideShare a Scribd company logo
Gitika html ppt
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

More Related Content

PPTX
Html forms
PPTX
HTML-5 New Input Types
PDF
Html forms
PPSX
HTML5 - Forms
PPTX
Html form tag
PPTX
HTML Forms
PPTX
HTML Forms
Html forms
HTML-5 New Input Types
Html forms
HTML5 - Forms
Html form tag
HTML Forms
HTML Forms

What's hot (20)

PPTX
Web design - Working with forms in HTML
PPTX
uptu web technology unit 2 html
PDF
2. HTML forms
PPTX
Web engineering - HTML Form
PDF
[Basic HTML/CSS] 4. html - form tags
PPTX
Entering User Data from a Web Page HTML Forms
DOCX
ODP
Tut 06 (forms)
PPTX
Html tables, forms and audio video
PPTX
Html forms
PPTX
PPTX
Html 5 Forms
PPTX
Lesson 2 Starting with the basics
PPTX
MTA html5 organization, input, and validation
PPTX
Php and web forms
PPT
PDF
Lesson 15
PPTX
HTML frames and HTML forms
Web design - Working with forms in HTML
uptu web technology unit 2 html
2. HTML forms
Web engineering - HTML Form
[Basic HTML/CSS] 4. html - form tags
Entering User Data from a Web Page HTML Forms
Tut 06 (forms)
Html tables, forms and audio video
Html forms
Html 5 Forms
Lesson 2 Starting with the basics
MTA html5 organization, input, and validation
Php and web forms
Lesson 15
HTML frames and HTML forms
Ad

Similar to Gitika html ppt (20)

PPT
Web forms and html (lect 4)
PPTX
Html5
PPTX
Std 12 Computer Chapter 1 Creating Html Forms Using KompoZer
PPTX
Html form
PPTX
The Complete HTML
PPTX
Html Forms
PPTX
Presentation1
PPTX
unit2_HTML_Forms fundamentals of html and crore concepts.pptx
PPTX
lecture9-10-160807085530.pptx dgdg fdgdfv ds
PPSX
HTML Comprehensive Overview
PPTX
E-Commerce and Web Designing BCOM second year 3rd semester students
PDF
CSS_Forms.pdf
PPTX
Forms Part 1
PDF
HTML-Forms
PPTX
HTML 5 Basics Part Three
PPT
3. HTML Forms.ppt
PPTX
Html Xhtml And Xml 3e Tutorial 6
PDF
5. Frames & Forms.pdf
PPTX
Forms
PPTX
Web forms and html (lect 4)
Html5
Std 12 Computer Chapter 1 Creating Html Forms Using KompoZer
Html form
The Complete HTML
Html Forms
Presentation1
unit2_HTML_Forms fundamentals of html and crore concepts.pptx
lecture9-10-160807085530.pptx dgdg fdgdfv ds
HTML Comprehensive Overview
E-Commerce and Web Designing BCOM second year 3rd semester students
CSS_Forms.pdf
Forms Part 1
HTML-Forms
HTML 5 Basics Part Three
3. HTML Forms.ppt
Html Xhtml And Xml 3e Tutorial 6
5. Frames & Forms.pdf
Forms
Ad

More from gitika - (6)

PPTX
Programming tools
PPT
management
PPTX
Women empowerment
PPTX
Representation of Entity relationship diagram in data base managemnet system
PPTX
Online furniture
PPTX
Introduction to queue
Programming tools
management
Women empowerment
Representation of Entity relationship diagram in data base managemnet system
Online furniture
Introduction to queue

Recently uploaded (20)

PDF
English Language Teaching from Post-.pdf
PDF
PSYCHOLOGY IN EDUCATION.pdf ( nice pdf ...)
PPTX
Cell Structure & Organelles in detailed.
PDF
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
PPTX
human mycosis Human fungal infections are called human mycosis..pptx
PDF
Origin of periodic table-Mendeleev’s Periodic-Modern Periodic table
PDF
Pre independence Education in Inndia.pdf
PPTX
The Healthy Child – Unit II | Child Health Nursing I | B.Sc Nursing 5th Semester
PDF
From loneliness to social connection charting
PDF
BÀI TẬP BỔ TRỢ 4 KỸ NĂNG TIẾNG ANH 9 GLOBAL SUCCESS - CẢ NĂM - BÁM SÁT FORM Đ...
PDF
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
PDF
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf
PPTX
UNDER FIVE CLINICS OR WELL BABY CLINICS.pptx
PPTX
Introduction and Scope of Bichemistry.pptx
PDF
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
PPTX
Pharma ospi slides which help in ospi learning
PDF
Abdominal Access Techniques with Prof. Dr. R K Mishra
PDF
grade 11-chemistry_fetena_net_5883.pdf teacher guide for all student
PPTX
Onica Farming 24rsclub profitable farm business
PDF
Business Ethics Teaching Materials for college
English Language Teaching from Post-.pdf
PSYCHOLOGY IN EDUCATION.pdf ( nice pdf ...)
Cell Structure & Organelles in detailed.
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
human mycosis Human fungal infections are called human mycosis..pptx
Origin of periodic table-Mendeleev’s Periodic-Modern Periodic table
Pre independence Education in Inndia.pdf
The Healthy Child – Unit II | Child Health Nursing I | B.Sc Nursing 5th Semester
From loneliness to social connection charting
BÀI TẬP BỔ TRỢ 4 KỸ NĂNG TIẾNG ANH 9 GLOBAL SUCCESS - CẢ NĂM - BÁM SÁT FORM Đ...
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf
UNDER FIVE CLINICS OR WELL BABY CLINICS.pptx
Introduction and Scope of Bichemistry.pptx
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
Pharma ospi slides which help in ospi learning
Abdominal Access Techniques with Prof. Dr. R K Mishra
grade 11-chemistry_fetena_net_5883.pdf teacher guide for all student
Onica Farming 24rsclub profitable farm business
Business Ethics Teaching Materials for college

Gitika html ppt

  • 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