SlideShare a Scribd company logo
HTML Forms
• HTML Forms are required when you want to
collect some data from the site visitor. For
example registration information: name, email
address, credit card, etc.
• A form will take input from the site visitor and
then will post your back-end application such as
CGI, ASP Script or PHP script etc. Then your back-
end application will do required processing on
that data in whatever way you like.
• Form elements are like text fields, textarea fields,
drop-down menus, radio buttons, checkboxes,
etc. which are used to take information from the
user.
Syntax of using <form>
<form action="back-end script"
method="posting method"> form elements
like input, textarea etc.
</form>
Form attributes
• name: This is the name of the form.
• action: Here you will specify any script
URL which will receive uploaded data.
• method: Here you will specify method to
be used to upload data. It can take
various values but most frequently used
are GET and POST.
There are different types of form controls that
you can use to collect data from a visitor to
your site.
• Text input controls
• Buttons
• Checkboxes and radio buttons
• Select boxes
• File select boxes
• Hidden controls
• Submit and reset button
HTML Forms - Text Input
• Single-line text input controls are created using an <input>
element whose type attribute has a value of text.
list of attributes for <input> tag.
• type: Indicates the type of input control you want to create.
This element is also used to create other form controls such
as radio buttons and checkboxes.
• name: Used to give the name part of the name/value pair
that is sent to the server, representing each form control
and the value the user entered.
• value: Provides an initial value for the text input control that
the user will see when the form loads.
• size: Allows you to specify the width of the text-input
control in terms of characters.
• maxlength: Allows you to specify the maximum number of
characters a user can enter into the text box.
Password input controls
• This is also a form of single-line text input
controls are created using an <input> element
whose type attribute has a value of password.
• <input type=“password“>
Multiple-Line Text Input Control
• If you want to allow a visitor to your site to enter
more than one line of text, you should create a
multiple-line text input control using the
<textarea> element
Attributes for <textarea> tag.
• name: The name of the control. This is used in
the name/value pair that is sent to the server.
• rows: Indicates the number of rows of text area
box.
• cols: Indicates the number of columns of text
area box.
<!DOCTYPE html>
<html>
<body>
<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</body>
</html>
HTML Forms - Creating Button
• There are various ways in HTML to create
clickable buttons. You can create clickable
button using <input> tag.
• When you use the <input> element to create a
button, the type of button you create is
specified using the type attribute.
• There are various ways in HTML to create
clickable buttons. You can create clickable
button using <input> tag.
• When you use the <input> element to create a
button, the type of button you create is
specified using the type attribute
Button Type
• submit: This creates a button that
automatically submits a form.
• reset: This creates a button that automatically
resets form controls to their initial values.
• button: This creates a button that is used to
trigger a client-side script when the user clicks
that button.
HTML Forms - Checkboxes Control
• Checkboxes are used when more than one option
is required to be selected.
Checkbox Attributes
• type: Indicates that you want to create a
checkbox.
• name: Name of the control.
• value: The value that will be used if the checkbox
is selected. More than one checkbox should share
the same name only if you want to allow users to
select several items from the same list.
<!DOCTYPE html>
<html>
<body>
<form action="">
<input type="checkbox" name="vehicle"
value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle"
value="Car">I have a car
</form>
</body>
</html>
HTML Forms - Raidobox Control:
• Radio Buttons are used when only one option
is required to be selected.
Radiobox attributes:
• type: Indicates that you want to create a
radiobox.
• name: Name of the control.
• value: Used to indicate the value that will be
sent to the server if this option is selected.
<!DOCTYPE html>
<html>
<body>
<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
<p><b>Note:</b> When a user clicks on a radio-button, it
becomes checked, and all other radio-buttons with
equal name become unchecked.</p>
</body>
</html>
HTML Forms - Select box Control
• Drop Down Box is used when we have many
options available to be selected but only one will
be selected.
Attributes of <select>:
• name: This is the name for the control.
• size: This can be used to present a scrolling list
box.
• multiple: If set to "multiple" then allows a user to
select multiple items from the menu
• value: The value that is sent to the server if this
option is selected
<!DOCTYPE html>
<html>
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
HTML Forms - File Select Boxes
• If you want to allow a user to upload a file to
your web site from his computer, you will
need to use a file upload box, also known as a
file select box. This is also created using the
<input type=“file”> element.

More Related Content

What's hot

Building html forms
Building html formsBuilding html forms
Building html forms
ice es
 
HTML5 - Forms
HTML5 - FormsHTML5 - Forms
HTML5 - Formstina1357
 
20 html-forms
20 html-forms20 html-forms
20 html-formsKumar
 
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.
 
HTML Forms
HTML FormsHTML Forms
HTML Forms
Nisa Soomro
 
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
Mustafa Kamel Mohammadi
 
Form using html and java script validation
Form using html and java script validationForm using html and java script validation
Form using html and java script validation
Maitree Patel
 
Anand june-2012
Anand june-2012Anand june-2012
Anand june-2012
Anand Doshi
 
Html forms
Html formsHtml forms
Forms in html5
Forms in html5Forms in html5
Forms in html5
hrisi87
 
Html tables, forms and audio video
Html tables, forms and audio videoHtml tables, forms and audio video
Html tables, forms and audio video
Saad Sheikh
 
HTML 5 Basics Part Three
HTML 5 Basics Part ThreeHTML 5 Basics Part Three
HTML 5 Basics Part Three
M Ashraful Islam Jewel
 
Lect15
Lect15Lect15
Html forms
Html formsHtml forms
Html forms
nobel mujuji
 
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
 
ASP.NET Session 10
ASP.NET Session 10ASP.NET Session 10
ASP.NET Session 10Sisir Ghosh
 

What's hot (20)

Building html forms
Building html formsBuilding html forms
Building html forms
 
HTML5 - Forms
HTML5 - FormsHTML5 - Forms
HTML5 - Forms
 
20 html-forms
20 html-forms20 html-forms
20 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
 
HTML Forms
HTML FormsHTML Forms
HTML Forms
 
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
 
Tut 06 (forms)
Tut 06 (forms)Tut 06 (forms)
Tut 06 (forms)
 
2. HTML forms
2. HTML forms2. HTML forms
2. HTML forms
 
Form using html and java script validation
Form using html and java script validationForm using html and java script validation
Form using html and java script validation
 
Anand june-2012
Anand june-2012Anand june-2012
Anand june-2012
 
Html forms
Html formsHtml forms
Html forms
 
Forms in html5
Forms in html5Forms in html5
Forms in html5
 
Html tables, forms and audio video
Html tables, forms and audio videoHtml tables, forms and audio video
Html tables, forms and audio video
 
HTML 5 Basics Part Three
HTML 5 Basics Part ThreeHTML 5 Basics Part Three
HTML 5 Basics Part Three
 
Lect15
Lect15Lect15
Lect15
 
Html forms
Html formsHtml forms
Html forms
 
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
 
Form Validation
Form ValidationForm Validation
Form Validation
 
ASP.NET Session 10
ASP.NET Session 10ASP.NET Session 10
ASP.NET Session 10
 

Viewers also liked

Forever i will sing
Forever i will singForever i will sing
Forever i will singAbel Parlan
 
Dot Net Mobile
Dot Net MobileDot Net Mobile
Dot Net Mobile
Chris Boyles
 
UNO Interaktiv målvæg
UNO Interaktiv målvægUNO Interaktiv målvæg
UNO Interaktiv målvæg
Uno Koncept
 
Jaco piadas
Jaco piadasJaco piadas
Jaco piadas
Patrick Pacheco
 
Los blog´s trabajos
Los blog´s trabajosLos blog´s trabajos
Los blog´s trabajos
diegoalejandro900210
 
Vi tri quang cao nghe an honda 2016 - uniqueads
Vi tri quang cao nghe an   honda 2016 - uniqueadsVi tri quang cao nghe an   honda 2016 - uniqueads
Vi tri quang cao nghe an honda 2016 - uniqueads
minhnghiemunique
 
Sochi hexitex manchester 10 dec 2008 presentation
Sochi hexitex  manchester 10 dec 2008 presentationSochi hexitex  manchester 10 dec 2008 presentation
Sochi hexitex manchester 10 dec 2008 presentation
Taha Sochi
 
Billboards unique ads 1.2016
Billboards   unique ads 1.2016Billboards   unique ads 1.2016
Billboards unique ads 1.2016
minhnghiemunique
 
Presentació informàtica
Presentació informàticaPresentació informàtica
Presentació informàtica
Àlex Franch Pareja
 
Internet of Things and smart cities: towards a sustainable future
Internet of Things and smart cities: towards a sustainable futureInternet of Things and smart cities: towards a sustainable future
Internet of Things and smart cities: towards a sustainable future
Greenapps&web
 
Taller de vladimir
Taller de vladimirTaller de vladimir
Taller de vladimir
Miguel Gallego
 
Deep learning for large scale biodiversity monitoring
Deep learning for large scale biodiversity monitoringDeep learning for large scale biodiversity monitoring
Deep learning for large scale biodiversity monitoring
Greenapps&web
 
Trabajo. el tutor y la familia
Trabajo. el tutor y la familiaTrabajo. el tutor y la familia
Trabajo. el tutor y la familia
TeresaIzq
 
JavaScript, VBScript, AJAX, CGI
JavaScript, VBScript, AJAX, CGIJavaScript, VBScript, AJAX, CGI
JavaScript, VBScript, AJAX, CGI
Aashish Jain
 
HTML, CSS and XML
HTML, CSS and XMLHTML, CSS and XML
HTML, CSS and XML
Aashish Jain
 

Viewers also liked (17)

Little Shilpa
Little ShilpaLittle Shilpa
Little Shilpa
 
Forever i will sing
Forever i will singForever i will sing
Forever i will sing
 
Dot Net Mobile
Dot Net MobileDot Net Mobile
Dot Net Mobile
 
UNO Interaktiv målvæg
UNO Interaktiv målvægUNO Interaktiv målvæg
UNO Interaktiv målvæg
 
Jaco piadas
Jaco piadasJaco piadas
Jaco piadas
 
Los blog´s trabajos
Los blog´s trabajosLos blog´s trabajos
Los blog´s trabajos
 
Vi tri quang cao nghe an honda 2016 - uniqueads
Vi tri quang cao nghe an   honda 2016 - uniqueadsVi tri quang cao nghe an   honda 2016 - uniqueads
Vi tri quang cao nghe an honda 2016 - uniqueads
 
Sochi hexitex manchester 10 dec 2008 presentation
Sochi hexitex  manchester 10 dec 2008 presentationSochi hexitex  manchester 10 dec 2008 presentation
Sochi hexitex manchester 10 dec 2008 presentation
 
Billboards unique ads 1.2016
Billboards   unique ads 1.2016Billboards   unique ads 1.2016
Billboards unique ads 1.2016
 
Presentació informàtica
Presentació informàticaPresentació informàtica
Presentació informàtica
 
Unit 2.2
Unit 2.2Unit 2.2
Unit 2.2
 
Internet of Things and smart cities: towards a sustainable future
Internet of Things and smart cities: towards a sustainable futureInternet of Things and smart cities: towards a sustainable future
Internet of Things and smart cities: towards a sustainable future
 
Taller de vladimir
Taller de vladimirTaller de vladimir
Taller de vladimir
 
Deep learning for large scale biodiversity monitoring
Deep learning for large scale biodiversity monitoringDeep learning for large scale biodiversity monitoring
Deep learning for large scale biodiversity monitoring
 
Trabajo. el tutor y la familia
Trabajo. el tutor y la familiaTrabajo. el tutor y la familia
Trabajo. el tutor y la familia
 
JavaScript, VBScript, AJAX, CGI
JavaScript, VBScript, AJAX, CGIJavaScript, VBScript, AJAX, CGI
JavaScript, VBScript, AJAX, CGI
 
HTML, CSS and XML
HTML, CSS and XMLHTML, CSS and XML
HTML, CSS and XML
 

Similar to Html4

Chapter 9: Forms
Chapter 9: FormsChapter 9: Forms
Chapter 9: Forms
Steve Guinan
 
Web forms and html (lect 4)
Web forms and html (lect 4)Web forms and html (lect 4)
Web forms and html (lect 4)
Salman Memon
 
Gitika html ppt
Gitika html pptGitika html ppt
Gitika html ppt
gitika -
 
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
 
Html Form Controls
Html Form ControlsHtml Form Controls
CSS_Forms.pdf
CSS_Forms.pdfCSS_Forms.pdf
CSS_Forms.pdf
gunjansingh599205
 
HTML Forms
HTML FormsHTML Forms
HTML Forms
Ravinder Kamboj
 
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
Mudasir Syed
 
Forms Part 1
Forms Part 1Forms Part 1
Forms Part 1
kjkleindorfer
 
HTML - FORMS.pptx
HTML - FORMS.pptxHTML - FORMS.pptx
HTML - FORMS.pptx
Nyssakotian
 
Html forms
Html formsHtml forms
Html forms
KoreshPadhi
 
HTML_Forms_.ppt
HTML_Forms_.pptHTML_Forms_.ppt
HTML_Forms_.ppt
nivedita murugan
 
HTML-Forms
HTML-FormsHTML-Forms
HTML-Forms
Ahmed Saihood
 
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
 
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 6larsonsb
 
HTML Forms Basics by Kamran Solangi.pptx
HTML Forms Basics by Kamran Solangi.pptxHTML Forms Basics by Kamran Solangi.pptx
HTML Forms Basics by Kamran Solangi.pptx
KamranSolangi1
 
Chapter 2 class power point
Chapter 2 class power pointChapter 2 class power point
Chapter 2 class power point
cmurphysvhs
 
Creating web form(For College Seminars)
Creating web form(For College Seminars)Creating web form(For College Seminars)
Creating web form(For College Seminars)
Naman Joshi
 
html forms
html formshtml forms
html forms
ikram niaz
 

Similar to Html4 (20)

Forms
FormsForms
Forms
 
Chapter 9: Forms
Chapter 9: FormsChapter 9: Forms
Chapter 9: Forms
 
Web forms and html (lect 4)
Web forms and html (lect 4)Web forms and html (lect 4)
Web forms and html (lect 4)
 
Gitika html ppt
Gitika html pptGitika html ppt
Gitika html 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 Form Controls
Html Form ControlsHtml Form Controls
Html Form Controls
 
CSS_Forms.pdf
CSS_Forms.pdfCSS_Forms.pdf
CSS_Forms.pdf
 
HTML Forms
HTML FormsHTML Forms
HTML Forms
 
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
 
Forms Part 1
Forms Part 1Forms Part 1
Forms Part 1
 
HTML - FORMS.pptx
HTML - FORMS.pptxHTML - FORMS.pptx
HTML - FORMS.pptx
 
Html forms
Html formsHtml forms
Html forms
 
HTML_Forms_.ppt
HTML_Forms_.pptHTML_Forms_.ppt
HTML_Forms_.ppt
 
HTML-Forms
HTML-FormsHTML-Forms
HTML-Forms
 
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
 
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
 
HTML Forms Basics by Kamran Solangi.pptx
HTML Forms Basics by Kamran Solangi.pptxHTML Forms Basics by Kamran Solangi.pptx
HTML Forms Basics by Kamran Solangi.pptx
 
Chapter 2 class power point
Chapter 2 class power pointChapter 2 class power point
Chapter 2 class power point
 
Creating web form(For College Seminars)
Creating web form(For College Seminars)Creating web form(For College Seminars)
Creating web form(For College Seminars)
 
html forms
html formshtml forms
html forms
 

More from Abhishek Kesharwani

uptu web technology unit 2 html
uptu web technology unit 2 htmluptu web technology unit 2 html
uptu web technology unit 2 html
Abhishek Kesharwani
 
uptu web technology unit 2 html
uptu web technology unit 2 htmluptu web technology unit 2 html
uptu web technology unit 2 html
Abhishek Kesharwani
 
uptu web technology unit 2 html
uptu web technology unit 2 htmluptu web technology unit 2 html
uptu web technology unit 2 html
Abhishek Kesharwani
 
uptu web technology unit 2 html
uptu web technology unit 2 htmluptu web technology unit 2 html
uptu web technology unit 2 html
Abhishek Kesharwani
 
uptu web technology unit 2 Css
uptu web technology unit 2 Cssuptu web technology unit 2 Css
uptu web technology unit 2 Css
Abhishek Kesharwani
 
uptu web technology unit 2 Css
uptu web technology unit 2 Cssuptu web technology unit 2 Css
uptu web technology unit 2 Css
Abhishek Kesharwani
 
uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2
Abhishek Kesharwani
 
uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2
Abhishek Kesharwani
 
uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2
Abhishek Kesharwani
 
uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2
Abhishek Kesharwani
 
Unit 1 web technology uptu slide
Unit 1 web technology uptu slideUnit 1 web technology uptu slide
Unit 1 web technology uptu slide
Abhishek Kesharwani
 
Unit1 Web Technology UPTU UNIT 1
Unit1 Web Technology UPTU UNIT 1 Unit1 Web Technology UPTU UNIT 1
Unit1 Web Technology UPTU UNIT 1
Abhishek Kesharwani
 
Unit1 2
Unit1 2 Unit1 2
Web Technology UPTU UNIT 1
Web Technology UPTU UNIT 1 Web Technology UPTU UNIT 1
Web Technology UPTU UNIT 1
Abhishek Kesharwani
 
Mtech syllabus computer science uptu
Mtech syllabus computer science uptu Mtech syllabus computer science uptu
Mtech syllabus computer science uptu
Abhishek Kesharwani
 

More from Abhishek Kesharwani (20)

uptu web technology unit 2 html
uptu web technology unit 2 htmluptu web technology unit 2 html
uptu web technology unit 2 html
 
uptu web technology unit 2 html
uptu web technology unit 2 htmluptu web technology unit 2 html
uptu web technology unit 2 html
 
uptu web technology unit 2 html
uptu web technology unit 2 htmluptu web technology unit 2 html
uptu web technology unit 2 html
 
uptu web technology unit 2 html
uptu web technology unit 2 htmluptu web technology unit 2 html
uptu web technology unit 2 html
 
uptu web technology unit 2 Css
uptu web technology unit 2 Cssuptu web technology unit 2 Css
uptu web technology unit 2 Css
 
uptu web technology unit 2 Css
uptu web technology unit 2 Cssuptu web technology unit 2 Css
uptu web technology unit 2 Css
 
uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2
 
uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2
 
uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2
 
uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2
 
Unit 1 web technology uptu slide
Unit 1 web technology uptu slideUnit 1 web technology uptu slide
Unit 1 web technology uptu slide
 
Unit1 Web Technology UPTU UNIT 1
Unit1 Web Technology UPTU UNIT 1 Unit1 Web Technology UPTU UNIT 1
Unit1 Web Technology UPTU UNIT 1
 
Unit1 2
Unit1 2 Unit1 2
Unit1 2
 
Web Technology UPTU UNIT 1
Web Technology UPTU UNIT 1 Web Technology UPTU UNIT 1
Web Technology UPTU UNIT 1
 
Mtech syllabus computer science uptu
Mtech syllabus computer science uptu Mtech syllabus computer science uptu
Mtech syllabus computer science uptu
 
Wi max tutorial
Wi max tutorialWi max tutorial
Wi max tutorial
 
Virtual lan
Virtual lanVirtual lan
Virtual lan
 
Virtual lan
Virtual lanVirtual lan
Virtual lan
 
Tcp traffic control and red ecn
Tcp traffic control and red ecnTcp traffic control and red ecn
Tcp traffic control and red ecn
 
Schedulling
SchedullingSchedulling
Schedulling
 

Html4

  • 1. HTML Forms • HTML Forms are required when you want to collect some data from the site visitor. For example registration information: name, email address, credit card, etc. • A form will take input from the site visitor and then will post your back-end application such as CGI, ASP Script or PHP script etc. Then your back- end application will do required processing on that data in whatever way you like. • Form elements are like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc. which are used to take information from the user.
  • 2. Syntax of using <form> <form action="back-end script" method="posting method"> form elements like input, textarea etc. </form>
  • 3. Form attributes • name: This is the name of the form. • action: Here you will specify any script URL which will receive uploaded data. • method: Here you will specify method to be used to upload data. It can take various values but most frequently used are GET and POST.
  • 4. There are different types of form controls that you can use to collect data from a visitor to your site. • Text input controls • Buttons • Checkboxes and radio buttons • Select boxes • File select boxes • Hidden controls • Submit and reset button
  • 5. HTML Forms - Text Input • Single-line text input controls are created using an <input> element whose type attribute has a value of text. list of attributes for <input> tag. • type: Indicates the type of input control you want to create. This element is also used to create other form controls such as radio buttons and checkboxes. • name: Used to give the name part of the name/value pair that is sent to the server, representing each form control and the value the user entered. • value: Provides an initial value for the text input control that the user will see when the form loads. • size: Allows you to specify the width of the text-input control in terms of characters. • maxlength: Allows you to specify the maximum number of characters a user can enter into the text box.
  • 6. Password input controls • This is also a form of single-line text input controls are created using an <input> element whose type attribute has a value of password. • <input type=“password“>
  • 7. Multiple-Line Text Input Control • If you want to allow a visitor to your site to enter more than one line of text, you should create a multiple-line text input control using the <textarea> element Attributes for <textarea> tag. • name: The name of the control. This is used in the name/value pair that is sent to the server. • rows: Indicates the number of rows of text area box. • cols: Indicates the number of columns of text area box.
  • 8. <!DOCTYPE html> <html> <body> <textarea rows="10" cols="30"> The cat was playing in the garden. </textarea> </body> </html>
  • 9. HTML Forms - Creating Button • There are various ways in HTML to create clickable buttons. You can create clickable button using <input> tag. • When you use the <input> element to create a button, the type of button you create is specified using the type attribute. • There are various ways in HTML to create clickable buttons. You can create clickable button using <input> tag. • When you use the <input> element to create a button, the type of button you create is specified using the type attribute
  • 10. Button Type • submit: This creates a button that automatically submits a form. • reset: This creates a button that automatically resets form controls to their initial values. • button: This creates a button that is used to trigger a client-side script when the user clicks that button.
  • 11. HTML Forms - Checkboxes Control • Checkboxes are used when more than one option is required to be selected. Checkbox Attributes • type: Indicates that you want to create a checkbox. • name: Name of the control. • value: The value that will be used if the checkbox is selected. More than one checkbox should share the same name only if you want to allow users to select several items from the same list.
  • 12. <!DOCTYPE html> <html> <body> <form action=""> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form> </body> </html>
  • 13. HTML Forms - Raidobox Control: • Radio Buttons are used when only one option is required to be selected. Radiobox attributes: • type: Indicates that you want to create a radiobox. • name: Name of the control. • value: Used to indicate the value that will be sent to the server if this option is selected.
  • 14. <!DOCTYPE html> <html> <body> <form action=""> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form> <p><b>Note:</b> When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.</p> </body> </html>
  • 15. HTML Forms - Select box Control • Drop Down Box is used when we have many options available to be selected but only one will be selected. Attributes of <select>: • name: This is the name for the control. • size: This can be used to present a scrolling list box. • multiple: If set to "multiple" then allows a user to select multiple items from the menu • value: The value that is sent to the server if this option is selected
  • 16. <!DOCTYPE html> <html> <body> <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected>Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html>
  • 17. HTML Forms - File Select Boxes • If you want to allow a user to upload a file to your web site from his computer, you will need to use a file upload box, also known as a file select box. This is also created using the <input type=“file”> element.