SlideShare ist ein Scribd-Unternehmen logo
1 von 8
• HTML Forms
• HTML forms are used to pass data to a server.
• An HTML form can contain input elements like text fields,
checkboxes, radio-buttons, submit buttons and more. A form can
also contain select lists, textarea, fieldset, legend, and label
elements.
• The <form> tag is used to create an HTML form:
• <form>
.
input elements
.
</form>
•
•
•
•
•
•
•
•
•

•
•
•
•
•
•
•
•

HTML Forms - The Input Element
The most important form element is the <input> element.
The <input> element is used to select user information.
An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type
text field, checkbox, password, radio button, submit button, and more.
The most common input types are described below.
Text Fields
<input type="text"> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
How the HTML code above looks in a browser:
First name:
Last name: Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.
Password Field
<input type="password"> defines a password field:
<form>
Password: <input type="password" name="pwd">
</form>
How the HTML code above looks in a browser:
Password: Note: The characters in a password field are masked (shown as asterisks or circles).
• Radio Buttons
• <input type="radio"> defines a radio button. Radio buttons
let a user select ONLY ONE of a limited number of choices:
• <form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
• How the HTML code above looks in a browser:
• Male
Female
• Checkboxes
• <input type="checkbox"> defines a checkbox. Checkboxes
let a user select ZERO or MORE options of a limited number
of choices.
• <form>
<input type="checkbox" name="vehicle" value="Bike">I
have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I
have a car
</form>
• How the HTML code above looks in a browser:
• I have a bike
I have a car
• Submit Button
• <input type="submit"> defines a submit button.
• A submit button is used to send form data to a server.
The data is sent to the page specified in the form's
action attribute. The file defined in the action attribute
usually does something with the received input:
• <form name="input" action="html_form_action.asp"
method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
New : New tags in HTML5.

Tag

Description

<form>

Defines an HTML form for user
input

<input>

Defines an input control

<textarea>

Defines a multiline input control
(text area)

<label>

Defines a label for an <input>
element

<fieldset>

Groups related elements in a
form

<legend>

Defines a caption for a
<fieldset> element

<select>

Defines a drop-down list

<optgroup>

Defines a group of related
options in a drop-down list

<option>

Defines an option in a dropdown list

<button>

Defines a clickable button

<datalist>New

Specifies a list of pre-defined
options for input controls

<keygen>New

Defines a key-pair generator
field (for forms)

<output>New

Defines the result of a
calculation
Forms

Weitere ähnliche Inhalte

Andere mochten auch (20)

Views
ViewsViews
Views
 
Jdbc workflow
Jdbc workflowJdbc workflow
Jdbc workflow
 
2 jdbc drivers
2 jdbc drivers2 jdbc drivers
2 jdbc drivers
 
Hibernate example1
Hibernate example1Hibernate example1
Hibernate example1
 
Css
CssCss
Css
 
3 jdbc api
3 jdbc api3 jdbc api
3 jdbc api
 
Exceptions
ExceptionsExceptions
Exceptions
 
Different waysconnect
Different waysconnectDifferent waysconnect
Different waysconnect
 
Class
ClassClass
Class
 
Interface connection
Interface connectionInterface connection
Interface connection
 
3. elements
3. elements3. elements
3. elements
 
Get excelsheet
Get excelsheetGet excelsheet
Get excelsheet
 
Class
ClassClass
Class
 
Class
ClassClass
Class
 
Internal
InternalInternal
Internal
 
Get data
Get dataGet data
Get data
 
1 introduction to html
1 introduction to html1 introduction to html
1 introduction to html
 
Headings
HeadingsHeadings
Headings
 
Record store
Record storeRecord store
Record store
 
Wr ex2
Wr ex2Wr ex2
Wr ex2
 

Ähnlich wie Forms

Ähnlich wie Forms (20)

Html4
Html4Html4
Html4
 
HTML_Forms_.ppt
HTML_Forms_.pptHTML_Forms_.ppt
HTML_Forms_.ppt
 
uptu web technology unit 2 html
uptu web technology unit 2 htmluptu web technology unit 2 html
uptu web technology unit 2 html
 
Html forms
Html formsHtml forms
Html forms
 
Html tables, forms and audio video
Html tables, forms and audio videoHtml tables, forms and audio video
Html tables, forms and audio video
 
Html4
Html4Html4
Html4
 
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
 
Web forms and html (lect 4)
Web forms and html (lect 4)Web forms and html (lect 4)
Web forms and html (lect 4)
 
Getting Information through HTML Forms
Getting Information through HTML FormsGetting Information through HTML Forms
Getting Information through HTML Forms
 
Higher - HTML forms
Higher - HTML formsHigher - HTML forms
Higher - HTML forms
 
CSS_Forms.pdf
CSS_Forms.pdfCSS_Forms.pdf
CSS_Forms.pdf
 
HTML 5 Basics Part Three
HTML 5 Basics Part ThreeHTML 5 Basics Part Three
HTML 5 Basics Part Three
 
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
 
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 9: Forms
Chapter 9: FormsChapter 9: Forms
Chapter 9: 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
 
Html form tag
Html form tagHtml form tag
Html form tag
 
HTML Forms
HTML FormsHTML Forms
HTML Forms
 
Html forms
Html formsHtml forms
Html forms
 

Mehr von myrajendra

Mehr von myrajendra (14)

Fundamentals
FundamentalsFundamentals
Fundamentals
 
Data type
Data typeData type
Data type
 
4 jdbc step1
4 jdbc step14 jdbc step1
4 jdbc step1
 
Dao example
Dao exampleDao example
Dao example
 
2. attributes
2. attributes2. attributes
2. attributes
 
Views
ViewsViews
Views
 
Starting jdbc
Starting jdbcStarting jdbc
Starting jdbc
 
Properties
PropertiesProperties
Properties
 
Java.sql package
Java.sql packageJava.sql package
Java.sql package
 
Interface callable statement
Interface callable statementInterface callable statement
Interface callable statement
 
Interface result set
Interface result setInterface result set
Interface result set
 
Interface database metadata
Interface database metadataInterface database metadata
Interface database metadata
 
Indexing
IndexingIndexing
Indexing
 
Driver
DriverDriver
Driver
 

Kürzlich hochgeladen

Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitecturePixlogix Infotech
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptxLBM Solutions
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 

Kürzlich hochgeladen (20)

Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptx
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 

Forms

  • 1.
  • 2. • HTML Forms • HTML forms are used to pass data to a server. • An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. • The <form> tag is used to create an HTML form: • <form> . input elements . </form> •
  • 3. • • • • • • • • • • • • • • • • HTML Forms - The Input Element The most important form element is the <input> element. The <input> element is used to select user information. An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button, and more. The most common input types are described below. Text Fields <input type="text"> defines a one-line input field that a user can enter text into: <form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form> How the HTML code above looks in a browser: First name: Last name: Note: The form itself is not visible. Also note that the default width of a text field is 20 characters. Password Field <input type="password"> defines a password field: <form> Password: <input type="password" name="pwd"> </form> How the HTML code above looks in a browser: Password: Note: The characters in a password field are masked (shown as asterisks or circles).
  • 4. • Radio Buttons • <input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices: • <form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form> • How the HTML code above looks in a browser: • Male Female
  • 5. • Checkboxes • <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices. • <form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form> • How the HTML code above looks in a browser: • I have a bike I have a car
  • 6. • Submit Button • <input type="submit"> defines a submit button. • A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input: • <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
  • 7. New : New tags in HTML5. Tag Description <form> Defines an HTML form for user input <input> Defines an input control <textarea> Defines a multiline input control (text area) <label> Defines a label for an <input> element <fieldset> Groups related elements in a form <legend> Defines a caption for a <fieldset> element <select> Defines a drop-down list <optgroup> Defines a group of related options in a drop-down list <option> Defines an option in a dropdown list <button> Defines a clickable button <datalist>New Specifies a list of pre-defined options for input controls <keygen>New Defines a key-pair generator field (for forms) <output>New Defines the result of a calculation