creating forms in html

7/31/2019 Creating Forms in HTML

1/36

HTML Forms

Forms are the most popular way to make web

pages interactive.

Like forms on paper, a form on a web page

allows the user to enter requested

information and submit it for processing.


2/36

HTML Forms

An HTML form is a section of a documentcontaining normal content, markup, specialelements called controls (checkboxes, radio

buttons, menus, etc.), and labels on thosecontrols.

Users generally "complete" a form by modifyingits controls (entering text, selecting menu items,

etc.), before submitting the form to an agent forprocessing (e.g., to a Web server, to a mail server,etc.)


3/36

How does an HTML form work?

A web form has two parts: the HTML front

end and a back end form processor.

The HTML front end part handles the

presentation while the back end handles the

form submissions (like saving the form

submissions, sending emails etc).

The back end form processor script is usually

written in languages like PHP, ASP or Perl.


4/36


A visitor visits a web page that contains a form.

The web browser displays the HTML form.

The visitor fills in the form and submits

The browser sends the submitted form data to

the web server

A form processor script running on the web

server processes the form data

A response page is sent back to the browser.


5/36



6/36

The HTML tag?

All the input elements should be enclosed

within the opening and closing tags

like this:

The input elements go here.


7/36

Attributes to the tag

action=Link to the form processor script

The action attribute points to the server side

script (the back end) that handles the formsubmission.

Usually, this will be a script (PHP,ASP, Perl) or a

CGI program.


8/36


action=Link to the form processor script

The action attribute points to the server side

script (the back end) that handles the formsubmission.

Usually, this will be a script (PHP,ASP, Perl) or a

CGI program.


9/36


Suppose your form handler page is a Perl scriptnamedformmail.pl. the HTML form code wouldbe:


10/36

The form input elements

You can have different types of input elements

in a form.

Examples are:

check boxes

radio buttons

simple text boxes

Labels

Etc.


11/36


Single line text box

A single line text box can be used to collectthe name, email, phone number etc from your

web site visitors.

Here is the code to create a simple text box:


12/36


Single line text boxAttributes

type=textThe type attribute tells the browser that a single line text input box

should be created.

name=FirstNamegives a name to the field. The name is used to identify the field onthe server side.

value=default value

The text you give as value will be displayed by default in the textbox.

maxlength=maxCharsSpecifies the maximum number of characters the user can enter into this

text box.


13/36


Name:


14/36


Submit button

After entering the data, the user presses the

submit button which triggers the browser to

send the data to the server.

You can add a submit button to the form using

the submit input type.


15/36


Submit button

Attributes

name =submit

There can be more than one submit buttons in a form.

On the server side, the submit button which was pressed

can be identified using the name attribute.

value=Submit

The string given in the value attribute is displayed as the

label of the Submit button.


16/36

HTML Form


17/36

HTML form

Form Page: sampleform

Sample form page

Name:

Email:


18/36

More Input Elements

Check box If you want to add a toggle input item that the user can select

or deselect, use a check box input item.

Attributes

name=Agree

The name used to identify this input on the server side script.

value=yes

This is the value returned to the server if the user selects this check

box. This is an optional attribute.

checked=checked

Having the checked attribute makes the check box on by default.


19/36

More Input Elements

Check box For example, if you created a check box like this:

and if the user selects the check box, the server side script will

receive: sendmail='on If the check box is like this:

If the user selects this check box before submitting, the

handler script will receive: sendmail='send

Example of checked checkbox:


20/36

More Input Elements

Radio Button

Radio buttons are for selecting one item from a set of choices.Use radio buttons when the choices are not too large (less

than 10).

Each individual button need to be created using input type

radio Example:


21/36

More Input ElementsRadio Button

The buttons in the same group should have the same name.

Example:

How do you rate the content at this site?

Excellent !!!
Good

Bad

If the user selects excellent, the server side script will receive:rating='excellent'.

You can add checked attribute to make a radio item selected by default.


22/36

More Input Elements

Drop down list

When you want to create a list of items for the user to select

from, create a drop down list.

Unlike the input tags we saw before, the list has two HTMLtags associated:

tag

tag.

You can create a list using the tag and theitems in the list using the tag.


23/36

More Input Elements

Drop down listShipping method:

standard

2-day

overnight

If the user selects 2-day, the server side script will receive:

shipping=2.


24/36

More Input Elements

Drop down list If you want to make an option selected by default, you can

add selected attribute to the tag.

Standard

makes the standard shipping method selected by default.


25/36

More Input Elements

List box with Multi-selection

It is possible to allow multiple selection in the list.

Use multiple attribute in the select tag.

Use the sizeattribute to specify the number ofitems visible (without scrolling) in the list box.


26/36

More Input Elements

List box with Multi-selection Example:

Select your areas of interest:

(hold down the ctrl key for selecting more than one)

Arts

Politics

Science

Computers and internet

Suppose the user selects Arts and Science. The server side script will

receive the values like this:"interests=arts" "interests=sci.


27/36

More Input Elements

Multi-line text

When you want to get a bunch of text from the user, the Textarea can be

used.

A TextArea is created using the tag


28/36

More Input Elements

Multi-line text

Attributes:

name=descr

the name identifies this TextArea in the server side script.

cols=columns

Defines the width (number of characters per line) the text area can

accommodate without scrolling.

rows=rows

Defines the number of lines (number of rows) the text area can

accommodate without scrolling.


29/36

More Input Elements

Multi-line text Example:

Enter your suggestions here:

If you want to provide some value in the text area by default, you can give

it like this:

my suggestions

are:


30/36

HTML Form


31/36

HTML form

Name:

Email:

Subscribe to the News Letter


32/36

HTML formFormat of the Email:

HTML

Plain Text


33/36

HTML formType of subscription you want:

Standard -Free

Professional -Paid


34/36

HTML form

Comments to the editor:


35/36

More Input Elements

Password input

Login screens usually have a password field where the user

enters his password.

You can create a password field by using the input type

password.

A password field can be created using the following code:


36/36

More Input Elements

Password input

Attributes:

maxlength=maxChar

the maximum length (in characters) the password can have value=textValue

The default value that should appear in the password field.

creating forms in html

Documents