HTML FormsPresentation 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