Docstoc

Chapter-9(HTML5)

Document Sample
Chapter-9(HTML5) Powered By Docstoc
					9. FORMS
      9.1. Introduction

A form is a component of web page that has form controls, such as text fields, buttons,
checkboxes, range controls or color pickers. A user can interact with such a form, providing
data that can be sent to the server for further processing.

Writing a form consists of several steps, which can be performed in any order: writing the
user interface, implementing the server-side processing and configure the user interface to
communicate with the server.

      9.2. Writing the form user interface

This example let you tell us the most basic feature for creating a simple form. This is an
example of pizza ordering form.

Any forms starts with a <form> element, inside which are placed the controls. Most controls
are represented by the <input> element, which by default provides a one line text field. To
label a control, the <label> element is used; the label text and the control itself go inside the
<label> element. Each part of a form is considered a paragraph, and is typically separated
from other parts using <p> elements. Putting this together, here is how one might ask for the
customer name:

<form>

<p><label>Customer name: <input></label></p>

</form>

To let the user select the size of pizza, we use radio buttons and to make the radio buttons
work as a group, they are given a common name using the name attribute. To group a batch
of controls together, one can use the <fieldset> element. The title of such a group of controls
is given by the first element in the <fieldset> which has to be a <legend> element.

<form>

<p><label>Customer name:<input></label></p>

<fieldset>

<legend>Pizza size</legend>

<p><label><input type=radio name=size> Small </label></p>

<p><label><input type=radio name=size> Medium </label></p>

<p><label><input type=radio name=size> Large </label></p>
</fieldset>

</form>

Changes are made in bold letters.

It is necessary to contact the customer for further information, so for this purpose we can use
form controls specifically for telephone numbers and e-mail addresses.

<form>

<p><label>Customer name:<input></label></p>

<p><label>Telephone: <input type=tel></label></p>

<p><label>E-mail address: <input type=email></label></p>

<fieldset>

<legend>Pizza size</legend>

<p><label><input type=radio name=size> Small </label></p>

<p><label><input type=radio name=size> Medium </label></p>

<p><label><input type=radio name=size> Large </label></p>

</fieldset>

</form>

We can set delivery time for our customer by set time.

<form>

<p><label>Customer name:<input></label></p>

<p><label>Telephone: <input type=tel></label></p>

<p><label>E-mail address: <input type=email></label></p>

<fieldset>

<legend>Pizza size</legend>

<p><label><input type=radio name=size> Small </label></p>

<p><label><input type=radio name=size> Medium </label></p>

<p><label><input type=radio name=size> Large </label></p>

</fieldset>
<p><label>Preferred delivery time: <input type=time min=”11:00” max=”21:00”
step=”900”></label></p>

</form>

Finally we add some text area for customer for any message and a button to submit order.

<form>

<p><label>Customer name:<input></label></p>

<p><label>Telephone: <input type=tel></label></p>

<p><label>E-mail address: <input type=email></label></p>

<fieldset>

<legend>Pizza size</legend>

<p><label><input type=radio name=size> Small </label></p>

<p><label><input type=radio name=size> Medium </label></p>

<p><label><input type=radio name=size> Large </label></p>

</fieldset>

<p><label>Preferred delivery time: <input type=time min=”11:00” max=”21:00”
step=”900”></label></p>

<p><label>Delivery instructions: <textarea></textarea></label></p>

<p><button>Submit order</button></p>

</form>



       9.3. Implementing the server side processing for a form

The exact details for writing a server-side processor are out of scope for this specification.
(For submission of a form to database we need a script which can be written by languages
like PHP, PERL etc) For the purpose of introduction, we will assume that the scripts at
https://pizza.example.com/order.cgi is configured to accept submissions using the
application/x-www-form-urlencoded format



       9.4. Configure a form to communicate with server
For form submission we use HTTP GET or POST requests. To specify the method used, we use
method attribute. This doesn’t specify how the form data is encoded, though to specify that,
we use enctype attribute. We also have to specify the URL of the service that will handle the
submitting data, using the action attribute.

For each form control we want submitted, we then have to give a name that will be used to
refer to the data in the submission. We already specified the name for the group of radio
buttons; the same attribute (name) also specifies the submission name. Radio buttons can be
distinguished from each other in the submission by giving them different values, using
the value attribute.

Given the settings in the previous section, this all becomes:

<form method="post"

   enctype="application/x-www-form-urlencoded"

   action="https://pizza.example.com/order.cgi">

<p><label>Customer name:<input name=”custname”></label></p>

<p><label>Telephone: <input type=tel name=”custtel”></label></p>

<p><label>E-mail address: <input type=email name=”custemail”></label></p>

<fieldset>

<legend>Pizza size</legend>

<p><label><input type=radio name=size value=”small”> Small </label></p>

<p><label><input type=radio name=size value=”medium”> Medium </label></p>

<p><label><input type=radio name=size value=”large”> Large </label></p>

</fieldset>

<p><label>Preferred delivery time: <input type=time min=”11:00” max=”21:00” step=”900”
name=”delivery”></label></p>

<p><label>Delivery instructions: <textarea name=”comments”></textarea></label></p>

<p><button>Submit order</button></p>

</form>



      9.5. Client-side form validation
The client-side form validation includes those form values which must have to be submitted.
Without these values, server not processes the form. The simplest annotation is the required
attribute, which can be specified on <input> elements to indicate that the form has not to be
submitted until a value is given.

<form>

<p><label>Customer name:<input name=”custname” required></label></p>

<p><label>Telephone: <input type=tel name=”custtel”></label></p>

<p><label>E-mail address: <input type=email name=”custemail”></label></p>

<fieldset>

<legend>Pizza size</legend>

<p><label><input type=radio name=size value=”small”> Small </label></p>

<p><label><input type=radio name=size value=”medium”> Medium </label></p>

<p><label><input type=radio name=size value=”large”> Large </label></p>

</fieldset>

<p><label>Preferred delivery time: <input type=time min=”11:00” max=”21:00” step=”900”
name=”delivery” required></label></p>

<p><label>Delivery instructions: <textarea name=”comments”
maxlength=1000></textarea></label></p>

<p><button>Submit order</button></p>

</form>



It is also possible to limit the length of the input using the maxlength attribute as described
above.



      9.6. Which method to use GET or POST!

If you specify a GET method, your form data will appear in the address bar of the page to
which you submit that form at the time of submitting. This can be useful; if you want to
bookmark that page but harmful in cases like banking sites and in login form. Though data
appear in syntax form, but hackers easily steal all the information you submitted.
So, it better to use POST method as it is very useful if you are sending a large amount of data
and does not specify the form data in the address bar.

				
DOCUMENT INFO
Shared By:
Stats:
views:23
posted:1/8/2012
language:
pages:6
Description: This is my HTML5 notes, Hope you like it