SlideShare a Scribd company logo
1 of 33
HTML Forms
Presentation by Nobel Mujuji Bsc. Hons (WUA) 2009
introduction
In general, if you want to collect vital information about someone or something, the form is used.
What if you want to create a Web page which will collect data from the user? You can collect data
from the users of your Web site by using forms. For instance, you can ask users to fill out forms to
specify which products they want to order. You can also use forms to collect feedback about your
site.
HTML forms are placed on a web page using the <form></form> tag. This tag should encapsulate a
series of other form elements, identifying them as a single cohesive web form.
HTML form elements rely on action and method attributes to identify where to send the form data
for processing (action) and how to process the data (method). In the code above, we've inserted
some make-believe values to represent what a typical HTML form might look like behind the scenes.
Unfortunately, HTML alone is unable to process form data. A scripting language such as PHP, PERL,
and/or JavaScript must be used with HTML forms to process data captured by HTML form elements
The <input> Element
The <input> element is the most important form element. The <input>
element has many variations, depending on the type attribute.
types of input element
Type Description
text Defines normal text input
radio Defines radio button input (for selecting
one of many choices)
submit Defines a submit button (for submitting the
form)
Example
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
Radio Button Input
<input type="radio"> defines a radio button. Radio buttons let a user
select ONE of a limited number of choices:
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
checkbox forms
Setting the type attribute of an <input> tag to checkbox places a checkbox element onto the web page.
<form name="myWebForm" action="mailto:youremail@email.com" method="post">
<p>Please select every sport that you play.</p>
Soccer: <input type="checkbox" name="sports" value="soccer" /><br />
Football: <input type="checkbox" name="sports" value="football" /><br />
Baseball: <input type="checkbox" name="sports" value="baseball" /><br />
Basketball: <input type="checkbox" name="sports" value="basketball" />
</form>
Password Fields
HTML password fields are designed to capture user input, but disguise each character with an
asterisk (*) instead of displaying the entered digits. They offer a user on-screen privacy while he or
she is entering a password.
<form name="myWebForm" action="mailto:youremail@email.com" method="post">
Password: <input type="password" title="Please Enter Your Password" size="8" /><br />
<input type="submit" value="SUBMIT" />
</form>
<form name="myWebForm" action="mailto:youremail@email.com" method="post">
First: <input title="Please Enter Your First Name" id="first" name="first" type="text" size="12"
maxlength="12" /> Last: <input title="Please Enter Your Last Name" id="last" name="last" type="text"
size="18" maxlength="24" /><br />
Password: <input type="password" title="Please Enter Your Password" size="8" maxlength="8" /><br />
<input type="submit" value="SUBMIT" />
</form>
Cont….
Password fields offer a very thin layer of security by visually concealing passwords; they offer no
security whatsoever against maintaining the integrity of the password data. From data is processed
in plain text and can be readily sniffed by a hacker, unless HTTPS is used to encrypt the data.
reset buttons
A reset button allows users to basically clear their web form. It wipes values from
all fields by "resetting" the form to its default appearance.
upload forms
Upload fields provide the interface that allows users to select a local file and upload it to the web
server. An upload field renders as two parts -- an empty text field and a Browse button that opens
up a local window explorer on the user's computer. This allows them to quickly browse to the local
file and automatically fills in the file path inside of the text field.
HTML Upload Field Code:
<form name="myWebForm" action="mailto:youremail@email.com" method="post">
<input type="file" name="uploadField" />
</form>
HTML MAX_FILE_SIZE Code:
<form name="myWebForm" action="mailto:youremail@email.com" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="500" />
<input type="file" name="uploadField" />
</form
html - textareas
An HTML textarea is an oversized Text Field capable of capturing "blurb" type
information from a user. If you've ever posted on a forum or left feedback on your
favorite blog, you probably do so using an HTML textarea.
<textarea name="myTextArea"cols="20" rows="10">Please limit your response to 100 characters.</textarea><br />
<textarea name="myTextArea" cols="40" rows="2">Please limit your response to 200 characters.</textarea><br />
<textarea name="myTextArea" cols="45" rows="5">Please limit your response to 500 characters.</textarea><br />
html - textarea wrap
The wrap attribute refers to how the user input reacts when it reaches the end of each row in the
text field. Wrapping can be defined using one of three values:
1. soft
2. hard
3. off
HTML Text Area Word Wrap Code:
<textarea cols="20" rows="5" wrap="hard">
As you can see many times word wrapping is often the desired look for your textareas. Since it
makes everything nice and easy to read and preserves line breaks.
</textarea>
html - text areas: readonly
Setting a "yes" or "no" value for the readonly attribute determines whether or not a viewer has
permission to manipulate the text inside the text field.
HTML Readonly Attribute:
<textarea cols="20" rows="5" wrap="hard" readonly="yes">
As you can see many times word wrapping is often the desired look for your text areas. Since it makes everything nice and
easy to read.
</textarea>
html - text areas: disabled
Disabling the textarea altogether prevents the surfer from highlighting, copying, or modifying the
field in any way. To accomplish this, set the disabled property to "yes".
HTML Code:
<textarea cols="20" rows="5" wrap="hard" disabled="yes">
As you can see many times word wrapping is often the desired look for your text areas. Since it
makes everything nice and easy to read.
</textarea>
The Submit Button
<input type="submit"> defines a button for submitting a form to a form-handler. The form-handler
is typically a server page with a script for processing input data. The form-handler is specified in the
form's action attribute:
Example
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
The Action Attribute
The action attribute defines the action to be performed when the form is submitted. The common way to
submit a form to a server, is by using a submit button. Normally, the form is submitted to a web page on a web
server. In the example above, a server-side script is specified to handle the submitted form:
<form action="action_page.php">
If the action attribute is omitted, the action is set to the current page.
The Method Attribute
The method attribute specifies the HTTP method (GET or POST) to be used when submitting the
forms:
<form action="action_page.php" method="GET">
or:
<form action="action_page.php" method="POST">
When to Use GET?
You can use GET (the default method): If the form submission is passive (like a search engine query), and
without sensitive information. When you use GET, the form data will be visible in the page address:
action_page.php?firstname=Mickey&lastname=Mouse
GET is best suited to short amounts of data. Size limitations are set in your browser.
When to Use POST?
You should use POST: If the form is updating data, or includes sensitive information (password).
POST offers better security because the submitted data is not visible in the page address.
<form> attributes:
Attribute Description
accept-charset Specifies the charset used in the submitted form (default: the page
charset).
action Specifies an address (url) where to submit the form (default: the
submitting page).
autocomplete Specifies if the browser should autocomplete the form (default: on).
enctype Specifies the encoding of the submitted data (default: is url-
encoded).
method Specifies the HTTP method used when submitting the form (default:
GET).
name Specifies a name used to identify the form (for DOM usage:
document.forms.name).
novalidate Specifies that the browser should not validate the form.
target Specifies the target of the address in the action attribute (default:
_self).
The <select> Element (Drop-Down List)
The <select> element defines a drop-down list:
<select name="cars">
<option value="volvo">Volvo</option>
<option value=“hundai">hundai</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):
Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
The <button> Element
The <button> element defines a clickable button:
Example
<button type="button" 'Hello World!')">Click Me!</button>
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 pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.
<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<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.
<output> Element
The <output> element represents the result of a calculation (like one
performed by a script).
<form action="action_page.asp">0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
new 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 drop-down list
<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation

More Related Content

What's hot (20)

javascript objects
javascript objectsjavascript objects
javascript objects
 
Html forms
Html formsHtml forms
Html forms
 
2. HTML forms
2. HTML forms2. HTML forms
2. HTML forms
 
Php forms
Php formsPhp forms
Php forms
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Bootstrap PPT by Mukesh
Bootstrap PPT by MukeshBootstrap PPT by Mukesh
Bootstrap PPT by Mukesh
 
HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examples
 
Html introduction
Html introductionHtml introduction
Html introduction
 
Introduction to BOOTSTRAP
Introduction to BOOTSTRAPIntroduction to BOOTSTRAP
Introduction to BOOTSTRAP
 
Html
HtmlHtml
Html
 
Html frames
Html framesHtml frames
Html frames
 
JavaScript - Chapter 11 - Events
 JavaScript - Chapter 11 - Events  JavaScript - Chapter 11 - Events
JavaScript - Chapter 11 - Events
 
Practical file on web technology(html)
Practical file on web technology(html)Practical file on web technology(html)
Practical file on web technology(html)
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
Html 5-tables-forms-frames (1)
Html 5-tables-forms-frames (1)Html 5-tables-forms-frames (1)
Html 5-tables-forms-frames (1)
 
HTML: Tables and Forms
HTML: Tables and FormsHTML: Tables and Forms
HTML: Tables and Forms
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
Advance HTML
Advance HTMLAdvance HTML
Advance HTML
 
HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerHTML (Web) basics for a beginner
HTML (Web) basics for a beginner
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 

Viewers also liked

Tables and Forms in HTML
Tables and Forms in HTMLTables and Forms in HTML
Tables and Forms in HTMLMarlon Jamera
 
Tables and Forms in HTML
Tables and Forms in HTMLTables and Forms in HTML
Tables and Forms in HTMLDoncho Minkov
 
Html basics 8 frame
Html basics 8 frameHtml basics 8 frame
Html basics 8 frameH K
 
Javascript variables and datatypes
Javascript variables and datatypesJavascript variables and datatypes
Javascript variables and datatypesVarun C M
 
Javascript conditional statements
Javascript conditional statementsJavascript conditional statements
Javascript conditional statementsnobel mujuji
 
Open Source and Open Data in the Age of the Cloud
Open Source and Open Data in the Age of the CloudOpen Source and Open Data in the Age of the Cloud
Open Source and Open Data in the Age of the CloudTim O'Reilly
 
CSS Animations & Transitions
CSS Animations & TransitionsCSS Animations & Transitions
CSS Animations & TransitionsEdward Meehan
 
CSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and AnimationsCSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and AnimationsInayaili León
 
JavaScript: Operators and Expressions
JavaScript: Operators and ExpressionsJavaScript: Operators and Expressions
JavaScript: Operators and ExpressionsLearnNowOnline
 
JavaScript Functions
JavaScript FunctionsJavaScript Functions
JavaScript FunctionsColin DeCarlo
 
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016Rami Sayar
 
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations Rob LaPlaca
 

Viewers also liked (20)

Tables and Forms in HTML
Tables and Forms in HTMLTables and Forms in HTML
Tables and Forms in HTML
 
Session and cookies ,get and post methods
Session and cookies ,get and post methodsSession and cookies ,get and post methods
Session and cookies ,get and post methods
 
Tables and Forms in HTML
Tables and Forms in HTMLTables and Forms in HTML
Tables and Forms in HTML
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
Html basics 8 frame
Html basics 8 frameHtml basics 8 frame
Html basics 8 frame
 
JavaScript Data Types
JavaScript Data TypesJavaScript Data Types
JavaScript Data Types
 
Javascript variables and datatypes
Javascript variables and datatypesJavascript variables and datatypes
Javascript variables and datatypes
 
Javascript conditional statements
Javascript conditional statementsJavascript conditional statements
Javascript conditional statements
 
Open Source and Open Data in the Age of the Cloud
Open Source and Open Data in the Age of the CloudOpen Source and Open Data in the Age of the Cloud
Open Source and Open Data in the Age of the Cloud
 
CSS Animations & Transitions
CSS Animations & TransitionsCSS Animations & Transitions
CSS Animations & Transitions
 
CSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and AnimationsCSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and Animations
 
JavaScript: Operators and Expressions
JavaScript: Operators and ExpressionsJavaScript: Operators and Expressions
JavaScript: Operators and Expressions
 
JavaScript Functions
JavaScript FunctionsJavaScript Functions
JavaScript Functions
 
Basic css-tutorial
Basic css-tutorialBasic css-tutorial
Basic css-tutorial
 
JavaScript: Events Handling
JavaScript: Events HandlingJavaScript: Events Handling
JavaScript: Events Handling
 
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
 
CSS Tutorial
CSS TutorialCSS Tutorial
CSS Tutorial
 
Fundamental HTML5
Fundamental HTML5Fundamental HTML5
Fundamental HTML5
 
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
 
Flow of control ppt
Flow of control pptFlow of control ppt
Flow of control ppt
 

Similar to 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 inputJesus Obenita Jr.
 
HTML - hypertext markup language
HTML - hypertext markup languageHTML - hypertext markup language
HTML - hypertext markup languageBasmaa Mostafa
 
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 validationMaitree Patel
 
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 4Mudasir Syed
 
Getting Interactive: Chapter 14
Getting Interactive: Chapter 14Getting Interactive: Chapter 14
Getting Interactive: Chapter 14Gene Babon
 
Html advanced-reference-guide for creating web forms
Html advanced-reference-guide for creating web formsHtml advanced-reference-guide for creating web forms
Html advanced-reference-guide for creating web formssatish 486
 
Html5ppt
Html5pptHtml5ppt
Html5pptrecroup
 
HSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART III.pdf
HSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART III.pdfHSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART III.pdf
HSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART III.pdfAAFREEN SHAIKH
 
331592291-HTML-and-Cascading style sheet
331592291-HTML-and-Cascading style sheet331592291-HTML-and-Cascading style sheet
331592291-HTML-and-Cascading style sheetstephen972973
 

Similar to Html forms (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 - hypertext markup language
HTML - hypertext markup languageHTML - hypertext markup language
HTML - hypertext markup language
 
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
Html formHtml form
Html form
 
Chapter09
Chapter09Chapter09
Chapter09
 
CSS_Forms.pdf
CSS_Forms.pdfCSS_Forms.pdf
CSS_Forms.pdf
 
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
 
Getting Interactive: Chapter 14
Getting Interactive: Chapter 14Getting Interactive: Chapter 14
Getting Interactive: Chapter 14
 
Unit 2
Unit 2 Unit 2
Unit 2
 
Html advanced-reference-guide for creating web forms
Html advanced-reference-guide for creating web formsHtml advanced-reference-guide for creating web forms
Html advanced-reference-guide for creating web forms
 
Html5ppt
Html5pptHtml5ppt
Html5ppt
 
Spsl v unit - final
Spsl v unit - finalSpsl v unit - final
Spsl v unit - final
 
Intodcution to Html
Intodcution to HtmlIntodcution to Html
Intodcution to Html
 
Html Guide
Html GuideHtml Guide
Html Guide
 
Unit 2
Unit 2 Unit 2
Unit 2
 
Handout7 html forms
Handout7 html formsHandout7 html forms
Handout7 html forms
 
HSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART III.pdf
HSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART III.pdfHSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART III.pdf
HSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART III.pdf
 
331592291-HTML-and-Cascading style sheet
331592291-HTML-and-Cascading style sheet331592291-HTML-and-Cascading style sheet
331592291-HTML-and-Cascading style sheet
 
Html 4
Html   4Html   4
Html 4
 
Html 4
Html   4Html   4
Html 4
 

More from nobel mujuji

Table structure introduction
Table structure introductionTable structure introduction
Table structure introductionnobel mujuji
 
Inserting imagesin html
Inserting imagesin htmlInserting imagesin html
Inserting imagesin htmlnobel mujuji
 
Html images and html backgrounds
Html images and html backgroundsHtml images and html backgrounds
Html images and html backgroundsnobel mujuji
 
Html character entities
Html character entitiesHtml character entities
Html character entitiesnobel mujuji
 
Frames tables forms
Frames tables formsFrames tables forms
Frames tables formsnobel mujuji
 
Chapter 2 introduction to html5
Chapter 2 introduction to html5Chapter 2 introduction to html5
Chapter 2 introduction to html5nobel mujuji
 
Chapter 1 one html
Chapter 1 one htmlChapter 1 one html
Chapter 1 one htmlnobel mujuji
 
Adding text in html
Adding text in htmlAdding text in html
Adding text in htmlnobel mujuji
 

More from nobel mujuji (14)

Table structure introduction
Table structure introductionTable structure introduction
Table structure introduction
 
Positioning text
Positioning textPositioning text
Positioning text
 
Inserting imagesin html
Inserting imagesin htmlInserting imagesin html
Inserting imagesin html
 
Html images and html backgrounds
Html images and html backgroundsHtml images and html backgrounds
Html images and html backgrounds
 
Html hyperlinks
Html hyperlinksHtml hyperlinks
Html hyperlinks
 
Html frames
Html framesHtml frames
Html frames
 
Html character entities
Html character entitiesHtml character entities
Html character entities
 
Horizontal lines!
Horizontal lines!Horizontal lines!
Horizontal lines!
 
Frames tables forms
Frames tables formsFrames tables forms
Frames tables forms
 
Creating lists
Creating listsCreating lists
Creating lists
 
Chapter 2 introduction to html5
Chapter 2 introduction to html5Chapter 2 introduction to html5
Chapter 2 introduction to html5
 
Chapter 1 one html
Chapter 1 one htmlChapter 1 one html
Chapter 1 one html
 
Chapter 1 html
Chapter 1 htmlChapter 1 html
Chapter 1 html
 
Adding text in html
Adding text in htmlAdding text in html
Adding text in html
 

Recently uploaded

call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...amitlee9823
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)amitlee9823
 
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best ServiceHigh Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Servicemeghakumariji156
 
Hingoli ❤CALL GIRL 8617370543 ❤CALL GIRLS IN Hingoli ESCORT SERVICE❤CALL GIRL
Hingoli ❤CALL GIRL 8617370543 ❤CALL GIRLS IN Hingoli ESCORT SERVICE❤CALL GIRLHingoli ❤CALL GIRL 8617370543 ❤CALL GIRLS IN Hingoli ESCORT SERVICE❤CALL GIRL
Hingoli ❤CALL GIRL 8617370543 ❤CALL GIRLS IN Hingoli ESCORT SERVICE❤CALL GIRLNitya salvi
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecturesaipriyacoool
 
Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...
Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...
Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...gajnagarg
 
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.Nitya salvi
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Websitemark11275
 
Q4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationQ4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationZenSeloveres
 
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...amitlee9823
 
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...amitlee9823
 
Lecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptxLecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptxShoaibRajper1
 
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)amitlee9823
 
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men 🔝dehradun🔝 Escor...
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men  🔝dehradun🔝   Escor...➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men  🔝dehradun🔝   Escor...
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men 🔝dehradun🔝 Escor...amitlee9823
 
Vip Mumbai Call Girls Borivali Call On 9920725232 With Body to body massage w...
Vip Mumbai Call Girls Borivali Call On 9920725232 With Body to body massage w...Vip Mumbai Call Girls Borivali Call On 9920725232 With Body to body massage w...
Vip Mumbai Call Girls Borivali Call On 9920725232 With Body to body massage w...amitlee9823
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...Pooja Nehwal
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxbingyichin04
 
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...amitlee9823
 
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
 

Recently uploaded (20)

call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
 
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
 
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best ServiceHigh Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
 
Hingoli ❤CALL GIRL 8617370543 ❤CALL GIRLS IN Hingoli ESCORT SERVICE❤CALL GIRL
Hingoli ❤CALL GIRL 8617370543 ❤CALL GIRLS IN Hingoli ESCORT SERVICE❤CALL GIRLHingoli ❤CALL GIRL 8617370543 ❤CALL GIRLS IN Hingoli ESCORT SERVICE❤CALL GIRL
Hingoli ❤CALL GIRL 8617370543 ❤CALL GIRLS IN Hingoli ESCORT SERVICE❤CALL GIRL
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
 
Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...
Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...
Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...
 
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
 
Q4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationQ4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentation
 
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
 
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
 
Lecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptxLecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptx
 
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
 
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men 🔝dehradun🔝 Escor...
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men  🔝dehradun🔝   Escor...➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men  🔝dehradun🔝   Escor...
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men 🔝dehradun🔝 Escor...
 
Vip Mumbai Call Girls Borivali Call On 9920725232 With Body to body massage w...
Vip Mumbai Call Girls Borivali Call On 9920725232 With Body to body massage w...Vip Mumbai Call Girls Borivali Call On 9920725232 With Body to body massage w...
Vip Mumbai Call Girls Borivali Call On 9920725232 With Body to body massage w...
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
 
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
 
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...
 

Html forms

  • 1. HTML Forms Presentation by Nobel Mujuji Bsc. Hons (WUA) 2009
  • 2. introduction In general, if you want to collect vital information about someone or something, the form is used. What if you want to create a Web page which will collect data from the user? You can collect data from the users of your Web site by using forms. For instance, you can ask users to fill out forms to specify which products they want to order. You can also use forms to collect feedback about your site. HTML forms are placed on a web page using the <form></form> tag. This tag should encapsulate a series of other form elements, identifying them as a single cohesive web form. HTML form elements rely on action and method attributes to identify where to send the form data for processing (action) and how to process the data (method). In the code above, we've inserted some make-believe values to represent what a typical HTML form might look like behind the scenes. Unfortunately, HTML alone is unable to process form data. A scripting language such as PHP, PERL, and/or JavaScript must be used with HTML forms to process data captured by HTML form elements
  • 3. The <input> Element The <input> element is the most important form element. The <input> element has many variations, depending on the type attribute.
  • 4. types of input element Type Description text Defines normal text input radio Defines radio button input (for selecting one of many choices) submit Defines a submit button (for submitting the form)
  • 5. Example <form> First name:<br> <input type="text" name="firstname"> <br> Last name:<br> <input type="text" name="lastname"> </form>
  • 6. Radio Button Input <input type="radio"> defines a radio button. Radio buttons let a user select ONE of a limited number of choices: <form> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female </form>
  • 7. checkbox forms Setting the type attribute of an <input> tag to checkbox places a checkbox element onto the web page. <form name="myWebForm" action="mailto:youremail@email.com" method="post"> <p>Please select every sport that you play.</p> Soccer: <input type="checkbox" name="sports" value="soccer" /><br /> Football: <input type="checkbox" name="sports" value="football" /><br /> Baseball: <input type="checkbox" name="sports" value="baseball" /><br /> Basketball: <input type="checkbox" name="sports" value="basketball" /> </form>
  • 8. Password Fields HTML password fields are designed to capture user input, but disguise each character with an asterisk (*) instead of displaying the entered digits. They offer a user on-screen privacy while he or she is entering a password. <form name="myWebForm" action="mailto:youremail@email.com" method="post"> Password: <input type="password" title="Please Enter Your Password" size="8" /><br /> <input type="submit" value="SUBMIT" /> </form>
  • 9. <form name="myWebForm" action="mailto:youremail@email.com" method="post"> First: <input title="Please Enter Your First Name" id="first" name="first" type="text" size="12" maxlength="12" /> Last: <input title="Please Enter Your Last Name" id="last" name="last" type="text" size="18" maxlength="24" /><br /> Password: <input type="password" title="Please Enter Your Password" size="8" maxlength="8" /><br /> <input type="submit" value="SUBMIT" /> </form>
  • 10. Cont…. Password fields offer a very thin layer of security by visually concealing passwords; they offer no security whatsoever against maintaining the integrity of the password data. From data is processed in plain text and can be readily sniffed by a hacker, unless HTTPS is used to encrypt the data.
  • 11. reset buttons A reset button allows users to basically clear their web form. It wipes values from all fields by "resetting" the form to its default appearance.
  • 12. upload forms Upload fields provide the interface that allows users to select a local file and upload it to the web server. An upload field renders as two parts -- an empty text field and a Browse button that opens up a local window explorer on the user's computer. This allows them to quickly browse to the local file and automatically fills in the file path inside of the text field. HTML Upload Field Code: <form name="myWebForm" action="mailto:youremail@email.com" method="post"> <input type="file" name="uploadField" /> </form>
  • 13. HTML MAX_FILE_SIZE Code: <form name="myWebForm" action="mailto:youremail@email.com" method="post"> <input type="hidden" name="MAX_FILE_SIZE" value="500" /> <input type="file" name="uploadField" /> </form
  • 14. html - textareas An HTML textarea is an oversized Text Field capable of capturing "blurb" type information from a user. If you've ever posted on a forum or left feedback on your favorite blog, you probably do so using an HTML textarea. <textarea name="myTextArea"cols="20" rows="10">Please limit your response to 100 characters.</textarea><br /> <textarea name="myTextArea" cols="40" rows="2">Please limit your response to 200 characters.</textarea><br /> <textarea name="myTextArea" cols="45" rows="5">Please limit your response to 500 characters.</textarea><br />
  • 15. html - textarea wrap The wrap attribute refers to how the user input reacts when it reaches the end of each row in the text field. Wrapping can be defined using one of three values: 1. soft 2. hard 3. off
  • 16. HTML Text Area Word Wrap Code: <textarea cols="20" rows="5" wrap="hard"> As you can see many times word wrapping is often the desired look for your textareas. Since it makes everything nice and easy to read and preserves line breaks. </textarea>
  • 17. html - text areas: readonly Setting a "yes" or "no" value for the readonly attribute determines whether or not a viewer has permission to manipulate the text inside the text field. HTML Readonly Attribute: <textarea cols="20" rows="5" wrap="hard" readonly="yes"> As you can see many times word wrapping is often the desired look for your text areas. Since it makes everything nice and easy to read. </textarea>
  • 18. html - text areas: disabled Disabling the textarea altogether prevents the surfer from highlighting, copying, or modifying the field in any way. To accomplish this, set the disabled property to "yes". HTML Code: <textarea cols="20" rows="5" wrap="hard" disabled="yes"> As you can see many times word wrapping is often the desired look for your text areas. Since it makes everything nice and easy to read. </textarea>
  • 19. The Submit Button <input type="submit"> defines a button for submitting a form to a form-handler. The form-handler is typically a server page with a script for processing input data. The form-handler is specified in the form's action attribute: Example <form action="action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>
  • 20. The Action Attribute The action attribute defines the action to be performed when the form is submitted. The common way to submit a form to a server, is by using a submit button. Normally, the form is submitted to a web page on a web server. In the example above, a server-side script is specified to handle the submitted form:
  • 21. <form action="action_page.php"> If the action attribute is omitted, the action is set to the current page.
  • 22. The Method Attribute The method attribute specifies the HTTP method (GET or POST) to be used when submitting the forms: <form action="action_page.php" method="GET"> or: <form action="action_page.php" method="POST">
  • 23. When to Use GET? You can use GET (the default method): If the form submission is passive (like a search engine query), and without sensitive information. When you use GET, the form data will be visible in the page address: action_page.php?firstname=Mickey&lastname=Mouse GET is best suited to short amounts of data. Size limitations are set in your browser.
  • 24. When to Use POST? You should use POST: If the form is updating data, or includes sensitive information (password). POST offers better security because the submitted data is not visible in the page address.
  • 25. <form> attributes: Attribute Description accept-charset Specifies the charset used in the submitted form (default: the page charset). action Specifies an address (url) where to submit the form (default: the submitting page). autocomplete Specifies if the browser should autocomplete the form (default: on). enctype Specifies the encoding of the submitted data (default: is url- encoded). method Specifies the HTTP method used when submitting the form (default: GET). name Specifies a name used to identify the form (for DOM usage: document.forms.name). novalidate Specifies that the browser should not validate the form. target Specifies the target of the address in the action attribute (default: _self).
  • 26. The <select> Element (Drop-Down List) The <select> element defines a drop-down list: <select name="cars"> <option value="volvo">Volvo</option> <option value=“hundai">hundai</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>
  • 27. The <textarea> Element The <textarea> element defines a multi-line input field (a text area): Example <textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea>
  • 28. The <button> Element The <button> element defines a clickable button: Example <button type="button" 'Hello World!')">Click Me!</button>
  • 29. 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 pre-defined options as they input data. The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.
  • 30. <form action="action_page.php"> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form>
  • 31. <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.
  • 32. <output> Element The <output> element represents the result of a calculation (like one performed by a script). <form action="action_page.asp">0 <input type="range" id="a" name="a" value="50"> 100 + <input type="number" id="b" name="b" value="50"> = <output name="x" for="a b"></output> <br><br> <input type="submit"> </form>
  • 33. new 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 drop-down list <button> Defines a clickable button <datalist> Specifies a list of pre-defined options for input controls <keygen> Defines a key-pair generator field (for forms) <output> Defines the result of a calculation