Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo
HTML Form Elements
• The <select> Element
• The <select> element defines a drop-down list
• <select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Form Option
• The <option> elements defines an option that
can be selected.
• By default, the first item in the drop-down list
is selected.
• To define a pre-selected option, add the
selected attribute to the option:
The <textarea> Element
• The <textarea> element defines a multi-line
input field (a text area):
• The rows attribute specifies the visible
number of lines in a text area.
• The cols attribute specifies the visible width of
a text area.
The <button> Element
• The <button> element defines a clickable
button:
<button type="button">Click Me!</button>
HTML5 Form Elements
HTML5 added the following form elements:
• <datalist>
• <keygen>
• <output>
Note: Browsers do not display unknown
elements. New elements that are not
supported in older browsers will not "destroy"
your web page.
HTML5 <datalist> Element
• The <datalist> element specifies a list of pre-
defined options for an <input> element.
• Users will see a drop-down list of the pre-
defined options as they input data.
• The list attribute of the <input> element, must
refer to the id attribute of the <datalist>
element.
HTML5 <keygen> Element
• The purpose of the <keygen> element is to
provide a secure way to authenticate users.
• The <keygen> element specifies a key-pair
generator field in a form.
• When the form is submitted, two keys are
generated, one private and one public.
• The private key is stored locally, and the public
key is sent to the server.
• The public key could be used to generate a client
certificate to authenticate the user in the future
HTML Marquees
• An HTML marquee is a scrolling piece of text
displayed either horizontally across or vertically
down your webpage depending on the settings.
This is created by using HTML <marquees> tag.
***Note: The HTML <marquee> tag may not be
supported by various browsers so its not
recommended to rely on this tag, instead you can
use Javascript and CSS to create such effects.
Thanks

More Related Content

Similar to HTML 5 Basics Part Three

Forms
FormsForms
Forms
myrajendra
 
HTML introduction for beginners Slides .pptx
HTML introduction for beginners Slides .pptxHTML introduction for beginners Slides .pptx
HTML introduction for beginners Slides .pptx
wewit44414
 
Html forms
Html formsHtml forms
Html forms
Himanshu Pathak
 
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
Nuzhat Memon
 
CSS_Forms.pdf
CSS_Forms.pdfCSS_Forms.pdf
CSS_Forms.pdf
gunjansingh599205
 
The Complete HTML
The Complete HTMLThe Complete HTML
The Complete HTML
Rohit Buddabathina
 
HTML Forms
HTML FormsHTML Forms
HTML Forms
Nisa Soomro
 
Html form
Html formHtml form
Html form
Jaya Kumari
 
Html5 ppt
Html5 pptHtml5 ppt
Html5 ppt
Rahul Gupta
 
Introduction to Web Development.pptx
Introduction to Web Development.pptxIntroduction to Web Development.pptx
Introduction to Web Development.pptx
Alisha Kamat
 
Introduction to Web Development.pptx
Introduction to Web Development.pptxIntroduction to Web Development.pptx
Introduction to Web Development.pptx
GDSCVJTI
 
Introduction to Web Development.pptx
Introduction to Web Development.pptxIntroduction to Web Development.pptx
Introduction to Web Development.pptx
Alisha Kamat
 
Html Guide
Html GuideHtml Guide
Html Guide
Jspider - Noida
 
Frames.ppt
Frames.pptFrames.ppt
Html4
Html4Html4
HTML5 Refresher
HTML5 RefresherHTML5 Refresher
HTML5 Refresher
Ivano Malavolta
 
Gitika html ppt
Gitika html pptGitika html ppt
Gitika html ppt
gitika -
 
web-lab2 for computer science html tss css java
web-lab2 for computer science html tss css javaweb-lab2 for computer science html tss css java
web-lab2 for computer science html tss css java
shereifhany
 
5. Frames & Forms.pdf
5. Frames & Forms.pdf5. Frames & Forms.pdf
5. Frames & Forms.pdf
qwertyuiop154709
 
HTML5 - Quick Guide
HTML5 - Quick GuideHTML5 - Quick Guide
HTML5 - Quick Guide
Bhaumik Patel
 

Similar to HTML 5 Basics Part Three (20)

Forms
FormsForms
Forms
 
HTML introduction for beginners Slides .pptx
HTML introduction for beginners Slides .pptxHTML introduction for beginners Slides .pptx
HTML introduction for beginners Slides .pptx
 
Html forms
Html formsHtml forms
Html forms
 
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
 
CSS_Forms.pdf
CSS_Forms.pdfCSS_Forms.pdf
CSS_Forms.pdf
 
The Complete HTML
The Complete HTMLThe Complete HTML
The Complete HTML
 
HTML Forms
HTML FormsHTML Forms
HTML Forms
 
Html form
Html formHtml form
Html form
 
Html5 ppt
Html5 pptHtml5 ppt
Html5 ppt
 
Introduction to Web Development.pptx
Introduction to Web Development.pptxIntroduction to Web Development.pptx
Introduction to Web Development.pptx
 
Introduction to Web Development.pptx
Introduction to Web Development.pptxIntroduction to Web Development.pptx
Introduction to Web Development.pptx
 
Introduction to Web Development.pptx
Introduction to Web Development.pptxIntroduction to Web Development.pptx
Introduction to Web Development.pptx
 
Html Guide
Html GuideHtml Guide
Html Guide
 
Frames.ppt
Frames.pptFrames.ppt
Frames.ppt
 
Html4
Html4Html4
Html4
 
HTML5 Refresher
HTML5 RefresherHTML5 Refresher
HTML5 Refresher
 
Gitika html ppt
Gitika html pptGitika html ppt
Gitika html ppt
 
web-lab2 for computer science html tss css java
web-lab2 for computer science html tss css javaweb-lab2 for computer science html tss css java
web-lab2 for computer science html tss css java
 
5. Frames & Forms.pdf
5. Frames & Forms.pdf5. Frames & Forms.pdf
5. Frames & Forms.pdf
 
HTML5 - Quick Guide
HTML5 - Quick GuideHTML5 - Quick Guide
HTML5 - Quick Guide
 

Recently uploaded

(T.L.E.) Agriculture: Essentials of Gardening
(T.L.E.) Agriculture: Essentials of Gardening(T.L.E.) Agriculture: Essentials of Gardening
(T.L.E.) Agriculture: Essentials of Gardening
MJDuyan
 
How to Show Sample Data in Tree and Kanban View in Odoo 17
How to Show Sample Data in Tree and Kanban View in Odoo 17How to Show Sample Data in Tree and Kanban View in Odoo 17
How to Show Sample Data in Tree and Kanban View in Odoo 17
Celine George
 
ENGLISH-7-CURRICULUM MAP- MATATAG CURRICULUM
ENGLISH-7-CURRICULUM MAP- MATATAG CURRICULUMENGLISH-7-CURRICULUM MAP- MATATAG CURRICULUM
ENGLISH-7-CURRICULUM MAP- MATATAG CURRICULUM
HappieMontevirgenCas
 
L1 L2- NLC PPT for Grade 10 intervention
L1 L2- NLC PPT for Grade 10 interventionL1 L2- NLC PPT for Grade 10 intervention
L1 L2- NLC PPT for Grade 10 intervention
RHODAJANEAURESTILA
 
AI_in_HR_Presentation Part 1 2024 0703.pdf
AI_in_HR_Presentation Part 1 2024 0703.pdfAI_in_HR_Presentation Part 1 2024 0703.pdf
AI_in_HR_Presentation Part 1 2024 0703.pdf
SrimanigandanMadurai
 
Views in Odoo - Advanced Views - Pivot View in Odoo 17
Views in Odoo - Advanced Views - Pivot View in Odoo 17Views in Odoo - Advanced Views - Pivot View in Odoo 17
Views in Odoo - Advanced Views - Pivot View in Odoo 17
Celine George
 
The basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxThe basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptx
heathfieldcps1
 
Beyond the Advance Presentation for By the Book 9
Beyond the Advance Presentation for By the Book 9Beyond the Advance Presentation for By the Book 9
Beyond the Advance Presentation for By the Book 9
John Rodzvilla
 
BRIGADA ESKWELA OPENING PROGRAM KICK OFF.pptx
BRIGADA ESKWELA OPENING PROGRAM KICK OFF.pptxBRIGADA ESKWELA OPENING PROGRAM KICK OFF.pptx
BRIGADA ESKWELA OPENING PROGRAM KICK OFF.pptx
kambal1234567890
 
Righteous among Nations - eTwinning e-book (1).pdf
Righteous among Nations - eTwinning e-book (1).pdfRighteous among Nations - eTwinning e-book (1).pdf
Righteous among Nations - eTwinning e-book (1).pdf
Zuzana Mészárosová
 
Bedok NEWater Photostory - COM322 Assessment (Story 2)
Bedok NEWater Photostory - COM322 Assessment (Story 2)Bedok NEWater Photostory - COM322 Assessment (Story 2)
Bedok NEWater Photostory - COM322 Assessment (Story 2)
Liyana Rozaini
 
Traces of the Holocaust in our communities in Levice Sovakia and Constanta Ro...
Traces of the Holocaust in our communities in Levice Sovakia and Constanta Ro...Traces of the Holocaust in our communities in Levice Sovakia and Constanta Ro...
Traces of the Holocaust in our communities in Levice Sovakia and Constanta Ro...
Zuzana Mészárosová
 
The Jewish Trinity : Sabbath,Shekinah and Sanctuary 4.pdf
The Jewish Trinity : Sabbath,Shekinah and Sanctuary 4.pdfThe Jewish Trinity : Sabbath,Shekinah and Sanctuary 4.pdf
The Jewish Trinity : Sabbath,Shekinah and Sanctuary 4.pdf
JackieSparrow3
 
Ardra Nakshatra (आर्द्रा): Understanding its Effects and Remedies
Ardra Nakshatra (आर्द्रा): Understanding its Effects and RemediesArdra Nakshatra (आर्द्रा): Understanding its Effects and Remedies
Ardra Nakshatra (आर्द्रा): Understanding its Effects and Remedies
Astro Pathshala
 
How to Add Colour Kanban Records in Odoo 17 Notebook
How to Add Colour Kanban Records in Odoo 17 NotebookHow to Add Colour Kanban Records in Odoo 17 Notebook
How to Add Colour Kanban Records in Odoo 17 Notebook
Celine George
 
NLC Grade 3.................................... ppt.pptx
NLC Grade 3.................................... ppt.pptxNLC Grade 3.................................... ppt.pptx
NLC Grade 3.................................... ppt.pptx
MichelleDeLaCruz93
 
2024 KWL Back 2 School Summer Conference
2024 KWL Back 2 School Summer Conference2024 KWL Back 2 School Summer Conference
2024 KWL Back 2 School Summer Conference
KlettWorldLanguages
 
Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...
Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...
Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...
Neny Isharyanti
 
Capitol Doctoral Presentation -June 2024v2.pptx
Capitol Doctoral Presentation -June 2024v2.pptxCapitol Doctoral Presentation -June 2024v2.pptx
Capitol Doctoral Presentation -June 2024v2.pptx
CapitolTechU
 
How to Store Data on the Odoo 17 Website
How to Store Data on the Odoo 17 WebsiteHow to Store Data on the Odoo 17 Website
How to Store Data on the Odoo 17 Website
Celine George
 

Recently uploaded (20)

(T.L.E.) Agriculture: Essentials of Gardening
(T.L.E.) Agriculture: Essentials of Gardening(T.L.E.) Agriculture: Essentials of Gardening
(T.L.E.) Agriculture: Essentials of Gardening
 
How to Show Sample Data in Tree and Kanban View in Odoo 17
How to Show Sample Data in Tree and Kanban View in Odoo 17How to Show Sample Data in Tree and Kanban View in Odoo 17
How to Show Sample Data in Tree and Kanban View in Odoo 17
 
ENGLISH-7-CURRICULUM MAP- MATATAG CURRICULUM
ENGLISH-7-CURRICULUM MAP- MATATAG CURRICULUMENGLISH-7-CURRICULUM MAP- MATATAG CURRICULUM
ENGLISH-7-CURRICULUM MAP- MATATAG CURRICULUM
 
L1 L2- NLC PPT for Grade 10 intervention
L1 L2- NLC PPT for Grade 10 interventionL1 L2- NLC PPT for Grade 10 intervention
L1 L2- NLC PPT for Grade 10 intervention
 
AI_in_HR_Presentation Part 1 2024 0703.pdf
AI_in_HR_Presentation Part 1 2024 0703.pdfAI_in_HR_Presentation Part 1 2024 0703.pdf
AI_in_HR_Presentation Part 1 2024 0703.pdf
 
Views in Odoo - Advanced Views - Pivot View in Odoo 17
Views in Odoo - Advanced Views - Pivot View in Odoo 17Views in Odoo - Advanced Views - Pivot View in Odoo 17
Views in Odoo - Advanced Views - Pivot View in Odoo 17
 
The basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxThe basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptx
 
Beyond the Advance Presentation for By the Book 9
Beyond the Advance Presentation for By the Book 9Beyond the Advance Presentation for By the Book 9
Beyond the Advance Presentation for By the Book 9
 
BRIGADA ESKWELA OPENING PROGRAM KICK OFF.pptx
BRIGADA ESKWELA OPENING PROGRAM KICK OFF.pptxBRIGADA ESKWELA OPENING PROGRAM KICK OFF.pptx
BRIGADA ESKWELA OPENING PROGRAM KICK OFF.pptx
 
Righteous among Nations - eTwinning e-book (1).pdf
Righteous among Nations - eTwinning e-book (1).pdfRighteous among Nations - eTwinning e-book (1).pdf
Righteous among Nations - eTwinning e-book (1).pdf
 
Bedok NEWater Photostory - COM322 Assessment (Story 2)
Bedok NEWater Photostory - COM322 Assessment (Story 2)Bedok NEWater Photostory - COM322 Assessment (Story 2)
Bedok NEWater Photostory - COM322 Assessment (Story 2)
 
Traces of the Holocaust in our communities in Levice Sovakia and Constanta Ro...
Traces of the Holocaust in our communities in Levice Sovakia and Constanta Ro...Traces of the Holocaust in our communities in Levice Sovakia and Constanta Ro...
Traces of the Holocaust in our communities in Levice Sovakia and Constanta Ro...
 
The Jewish Trinity : Sabbath,Shekinah and Sanctuary 4.pdf
The Jewish Trinity : Sabbath,Shekinah and Sanctuary 4.pdfThe Jewish Trinity : Sabbath,Shekinah and Sanctuary 4.pdf
The Jewish Trinity : Sabbath,Shekinah and Sanctuary 4.pdf
 
Ardra Nakshatra (आर्द्रा): Understanding its Effects and Remedies
Ardra Nakshatra (आर्द्रा): Understanding its Effects and RemediesArdra Nakshatra (आर्द्रा): Understanding its Effects and Remedies
Ardra Nakshatra (आर्द्रा): Understanding its Effects and Remedies
 
How to Add Colour Kanban Records in Odoo 17 Notebook
How to Add Colour Kanban Records in Odoo 17 NotebookHow to Add Colour Kanban Records in Odoo 17 Notebook
How to Add Colour Kanban Records in Odoo 17 Notebook
 
NLC Grade 3.................................... ppt.pptx
NLC Grade 3.................................... ppt.pptxNLC Grade 3.................................... ppt.pptx
NLC Grade 3.................................... ppt.pptx
 
2024 KWL Back 2 School Summer Conference
2024 KWL Back 2 School Summer Conference2024 KWL Back 2 School Summer Conference
2024 KWL Back 2 School Summer Conference
 
Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...
Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...
Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...
 
Capitol Doctoral Presentation -June 2024v2.pptx
Capitol Doctoral Presentation -June 2024v2.pptxCapitol Doctoral Presentation -June 2024v2.pptx
Capitol Doctoral Presentation -June 2024v2.pptx
 
How to Store Data on the Odoo 17 Website
How to Store Data on the Odoo 17 WebsiteHow to Store Data on the Odoo 17 Website
How to Store Data on the Odoo 17 Website
 

HTML 5 Basics Part Three

  • 1. HTML Form Elements • The <select> Element • The <select> element defines a drop-down list • <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>
  • 2. Form Option • The <option> elements defines an option that can be selected. • By default, the first item in the drop-down list is selected. • To define a pre-selected option, add the selected attribute to the option:
  • 3. The <textarea> Element • The <textarea> element defines a multi-line input field (a text area): • The rows attribute specifies the visible number of lines in a text area. • The cols attribute specifies the visible width of a text area.
  • 4. The <button> Element • The <button> element defines a clickable button: <button type="button">Click Me!</button>
  • 5. HTML5 Form Elements HTML5 added the following form elements: • <datalist> • <keygen> • <output> Note: Browsers do not display unknown elements. New elements that are not supported in older browsers will not "destroy" your web page.
  • 6. HTML5 <datalist> Element • The <datalist> element specifies a list of pre- defined options for an <input> element. • Users will see a drop-down list of the pre- defined options as they input data. • The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.
  • 7. HTML5 <keygen> Element • The purpose of the <keygen> element is to provide a secure way to authenticate users. • The <keygen> element specifies a key-pair generator field in a form. • When the form is submitted, two keys are generated, one private and one public. • The private key is stored locally, and the public key is sent to the server. • The public key could be used to generate a client certificate to authenticate the user in the future
  • 8. HTML Marquees • An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically down your webpage depending on the settings. This is created by using HTML <marquees> tag. ***Note: The HTML <marquee> tag may not be supported by various browsers so its not recommended to rely on this tag, instead you can use Javascript and CSS to create such effects.