Html forms

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.
Password: <input type="password" title="Please Enter Your Password" size="8" /><br />
<input type="submit" value="SUBMIT" />
</form>

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:
<input type="file" name="uploadField" />
</form>

HTML MAX_FILE_SIZE Code:
<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:

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.

<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

Html forms

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Html forms (20)

More from nobel mujuji (14)

Recently uploaded (20)

Html forms