SlideShare une entreprise Scribd logo
1  sur  9
Forms
A form is an area that can contain form elements.
Form elements
Form elements are elements that allow the user to
enter information (like text fields, textarea fields,
drop-down menus, radio buttons, checkboxes, etc.)
in a form.
A form is defined with the <form> tag. Like
<form>
.
input elements
.
</form>
Example
<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>
Input Elements and the INPUT tag
The most used form tag is the <input>
tag. The type of input is specified with
the type attribute.
The available types are
•Text Fields
•Radio Buttons
•Checkboxes
•Submit Buttons
•Reset Buttons
Text Fields
Text fields are used when you want the user to type
letters, numbers, etc. in a form.
Example

<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>
Radio Buttons
Radio Buttons are used when you want the user to
select one of a limited number of choices.
Example
<form>
<input type="radio" name="sex" value="male" />
Male
<br />
<input type="radio" name="sex" value="female" />
Female
</form>
Checkboxes
Checkboxes are used when you want the user to select one or
more options of a limited number of choices.
Example

<form>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
</form>
Submit Buttons
Submit buttons are used when you want the user to submit the
content of the form to the Server.
Example
<form name="input" action="html_form_submit.asp"
method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

Note
The form's action attribute defines the name of the file to send the
content to. The file defined in the action attribute usually does
something with the received input.
Reset Buttons
Reset buttons are used when you want the user to
clear the content of the form
Example
<form name="input"
action="html_form_submit.asp" method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
<input type=“Reset" value=“Reset" />
</form>
The Select list Element and the “SELECT” Tag
Select Lists (Drop Down lists ) are used when
you want the user to select one of a limited
number of choices.
Example
<form>
Gender
<SELECT NAME=“gender”>
<OPTION>Male
<OPTION>Female
</SELECT>
</form>

Contenu connexe

Tendances

[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
Hyejin Oh
 

Tendances (20)

html forms
html formshtml forms
html forms
 
HTML Forms
HTML FormsHTML Forms
HTML Forms
 
Html forms
Html formsHtml forms
Html forms
 
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 Tutorial
HTML Forms TutorialHTML Forms Tutorial
HTML Forms Tutorial
 
2. HTML forms
2. HTML forms2. HTML forms
2. HTML forms
 
HTML-5 New Input Types
HTML-5 New Input TypesHTML-5 New Input Types
HTML-5 New Input Types
 
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 new form attribute
html 5 new form attributehtml 5 new form attribute
html 5 new form attribute
 
HTML Forms
HTML FormsHTML Forms
HTML Forms
 
HTML Forms
HTML FormsHTML Forms
HTML Forms
 
Tut 06 (forms)
Tut 06 (forms)Tut 06 (forms)
Tut 06 (forms)
 
Forms in html5
Forms in html5Forms in html5
Forms in html5
 
New Form Element in HTML5
New Form Element in HTML5New Form Element in HTML5
New Form Element in HTML5
 
Forms with html5 (1)
Forms with html5 (1)Forms with html5 (1)
Forms with html5 (1)
 
Html forms
Html formsHtml forms
Html forms
 
Forms
FormsForms
Forms
 
[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
 
Html4
Html4Html4
Html4
 
Html class-04
Html class-04Html class-04
Html class-04
 

En vedette (8)

Human Resource Management Strategy for Danube Ethno Village- The University o...
Human Resource Management Strategy for Danube Ethno Village- The University o...Human Resource Management Strategy for Danube Ethno Village- The University o...
Human Resource Management Strategy for Danube Ethno Village- The University o...
 
Workshop 31 maart 2013 twit
Workshop 31 maart 2013 twitWorkshop 31 maart 2013 twit
Workshop 31 maart 2013 twit
 
Construction Progress for TechTown 1st Floor Renovation | Aug 1 - Aug 31
Construction Progress for TechTown 1st Floor Renovation | Aug 1 - Aug 31Construction Progress for TechTown 1st Floor Renovation | Aug 1 - Aug 31
Construction Progress for TechTown 1st Floor Renovation | Aug 1 - Aug 31
 
Tno instrumenten ci syntens clicknl
Tno instrumenten ci syntens clicknlTno instrumenten ci syntens clicknl
Tno instrumenten ci syntens clicknl
 
Bob read
Bob readBob read
Bob read
 
La naturaleza
La naturalezaLa naturaleza
La naturaleza
 
La Naturaleza
La NaturalezaLa Naturaleza
La Naturaleza
 
La naturaleza (diapositivas)
La naturaleza (diapositivas)La naturaleza (diapositivas)
La naturaleza (diapositivas)
 

Similaire à Lectures-web

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
Jesus Obenita Jr.
 
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: FormsHTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
Shawn Calvert
 
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
 
Html basics 10 form
Html basics 10 formHtml basics 10 form
Html basics 10 form
H K
 
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
 

Similaire à Lectures-web (20)

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.pptx
HTML FORMS.pptxHTML FORMS.pptx
HTML FORMS.pptx
 
Higher - HTML forms
Higher - HTML formsHigher - HTML forms
Higher - HTML forms
 
Forms.pptx
Forms.pptxForms.pptx
Forms.pptx
 
HTML_Forms_.ppt
HTML_Forms_.pptHTML_Forms_.ppt
HTML_Forms_.ppt
 
CSS_Forms.pdf
CSS_Forms.pdfCSS_Forms.pdf
CSS_Forms.pdf
 
HTML 5 Simple Tutorial Part 4
HTML 5 Simple Tutorial Part 4HTML 5 Simple Tutorial Part 4
HTML 5 Simple Tutorial Part 4
 
HTML Forms
HTML FormsHTML Forms
HTML Forms
 
Forms and buttons
Forms and buttonsForms and buttons
Forms and buttons
 
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: FormsHTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
 
Html Form Controls
Html Form ControlsHtml Form Controls
Html Form Controls
 
HTML
HTML HTML
HTML
 
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
 
Html 4
Html   4Html   4
Html 4
 
Html 4
Html   4Html   4
Html 4
 
Html basics 10 form
Html basics 10 formHtml basics 10 form
Html basics 10 form
 
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
 
11-html-forms.ppt
11-html-forms.ppt11-html-forms.ppt
11-html-forms.ppt
 
Chapter 9: Forms
Chapter 9: FormsChapter 9: Forms
Chapter 9: Forms
 
Forms,Frames.ppt
Forms,Frames.pptForms,Frames.ppt
Forms,Frames.ppt
 

Dernier

ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
saipriyacoool
 
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
eeanqy
 
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
wpkuukw
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
nirzagarg
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
instagramfab782445
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
balqisyamutia
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
nirzagarg
 
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
drmarathore
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
Isadora Agency
 

Dernier (20)

ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
 
Essential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive GuideEssential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive Guide
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptx
 
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
 
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
 
Furniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptxFurniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptx
 
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for FriendshipRaebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
 
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
 
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime PondicherryPondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
 
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service AvailableCall Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
 
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEKLANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
 
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
 
Hackathon evaluation template_latest_uploadpdf
Hackathon evaluation template_latest_uploadpdfHackathon evaluation template_latest_uploadpdf
Hackathon evaluation template_latest_uploadpdf
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
 
How to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdfHow to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdf
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
 

Lectures-web

  • 1. Forms A form is an area that can contain form elements. Form elements Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.
  • 2. A form is defined with the <form> tag. Like <form> . input elements . </form> Example <form> First name: <input type="text" name="firstname" /> <br /> Last name: <input type="text" name="lastname" /> </form>
  • 3. Input Elements and the INPUT tag The most used form tag is the <input> tag. The type of input is specified with the type attribute. The available types are •Text Fields •Radio Buttons •Checkboxes •Submit Buttons •Reset Buttons
  • 4. Text Fields Text fields are used when you want the user to type letters, numbers, etc. in a form. Example <form> First name: <input type="text" name="firstname" /> <br /> Last name: <input type="text" name="lastname" /> </form>
  • 5. Radio Buttons Radio Buttons are used when you want the user to select one of a limited number of choices. Example <form> <input type="radio" name="sex" value="male" /> Male <br /> <input type="radio" name="sex" value="female" /> Female </form>
  • 6. Checkboxes Checkboxes are used when you want the user to select one or more options of a limited number of choices. Example <form> I have a bike: <input type="checkbox" name="vehicle" value="Bike" /> <br /> I have a car: <input type="checkbox" name="vehicle" value="Car" /> <br /> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /> </form>
  • 7. Submit Buttons Submit buttons are used when you want the user to submit the content of the form to the Server. Example <form name="input" action="html_form_submit.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form> Note The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.
  • 8. Reset Buttons Reset buttons are used when you want the user to clear the content of the form Example <form name="input" action="html_form_submit.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> <input type=“Reset" value=“Reset" /> </form>
  • 9. The Select list Element and the “SELECT” Tag Select Lists (Drop Down lists ) are used when you want the user to select one of a limited number of choices. Example <form> Gender <SELECT NAME=“gender”> <OPTION>Male <OPTION>Female </SELECT> </form>