processing online forms

Post on 03-Jun-2018

239 Views

Category:

Documents

0 Downloads

Preview:

Click to see full reader

TRANSCRIPT

8/12/2019 Processing Online Forms

http://slidepdf.com/reader/full/processing-online-forms 1/23

Processing Online Forms

8/12/2019 Processing Online Forms

http://slidepdf.com/reader/full/processing-online-forms 2/23

Objectives

Define Online forms

Know the use of online forms

Discuss the content and input fields

 Appreciate the use of online forms by

applying it to your project.

Create an online form for comments

and feedbacks

8/12/2019 Processing Online Forms

http://slidepdf.com/reader/full/processing-online-forms 3/23

Online Forms

Online forms are Web pagespurposely designed for gathering

information of the internet.

The main use of online forms is to

gather feedback or opinion from the

users for data processing, usuallythrough a database.

8/12/2019 Processing Online Forms

http://slidepdf.com/reader/full/processing-online-forms 4/23

Content

To start building an online form, youshould place inside the HTML body

tags the <form> </form> tags. Then,

you can organize it with the inputempty tag.

This is usually inside the <form> set of

tags and its attribute type specifies thekind of input you are going to have.

 Another attribute, name, distinguishes

one input field from another.

8/12/2019 Processing Online Forms

http://slidepdf.com/reader/full/processing-online-forms 5/23

Input Fields

Types

◦ Text fields

◦ Radio buttons

◦ Check boxes

◦ Text areas

◦ Select fields

8/12/2019 Processing Online Forms

http://slidepdf.com/reader/full/processing-online-forms 6/23

Text fields

The primary information that you wantto get from your Web page visitors

would be their name and location.

Use text fields when you want the user

to type letters or numbers in a form.

8/12/2019 Processing Online Forms

http://slidepdf.com/reader/full/processing-online-forms 7/23

Text fields (continues)

<form><input type=“text” name=“firstname” />

First Name <br />

<input type=“text” name=“lastname” />Surname<br /> </form>

The web server will not know from which textfield the input came from without the NAMEattribute

First Name

Surname

8/12/2019 Processing Online Forms

http://slidepdf.com/reader/full/processing-online-forms 8/23

Text fields (continues)

To control the visible size of the textfield, we use the size attribute. If thesize attribute is missing, the default

value is usually set the by the browserto “20 ” – which stands for 20em.

<form>

<input type=“text” name=“firstname” /> First Name <br />

<input type=“text” name=“lastname” /> Surname<br />

<input type=“text” name=“location” size=“15” /> City orTown<br/>

</form>

8/12/2019 Processing Online Forms

http://slidepdf.com/reader/full/processing-online-forms 9/23

Text fields (continues)

 Another important attribute ismaxlength. This sets the maximum

number of characters that can be

typed in the field. This attribute ishelpful in cases where we have

database length restrictions, or if we

know the exact or maximum numberof characters the user must provide.

8/12/2019 Processing Online Forms

http://slidepdf.com/reader/full/processing-online-forms 10/23

Text fields (continues)

<form>

<input type=“text” name=“firstname” /> First Name <br />

<input type=“text” name=“lastname” /> Surname<br />

<input type=“text” name=“location” size=“15” /> City or

Town<br/><input type=“text” name=“phone” size=“10” maxlength=“11” />

Cellphone Number <br />

<input type=“text” name=“email” size=“32” /> E-mail Address

</form>First Name

Surname

City or Town

Cell Phone

NumberE-mail Address

8/12/2019 Processing Online Forms

http://slidepdf.com/reader/full/processing-online-forms 11/23

Radio buttons

Radio buttons are used when youwant the user to select only one option

from a list.

The type attribute here needs to beset to the value “radio”. Meanwhile, do

not forget the name attribute because

if you do, the user can only use oneamong the set of radio buttons in your

page.

8/12/2019 Processing Online Forms

http://slidepdf.com/reader/full/processing-online-forms 12/23

Radio buttons(continues)

The value attribute, which can be usedto set a default value to the input text

field, is also important.

 A radio button without a value becomes meaningless when

submitted to the server because the

server won’t know what the buttonstands for.

8/12/2019 Processing Online Forms

http://slidepdf.com/reader/full/processing-online-forms 13/23

Radio buttons(continues)

<p><b>What type of movie do you mostly prefer to watch?</b></p>

<input type=“radio” name=“movietype” value=“action” /> Action 

<input type=“radio” name=“movietype” value=“comedy” /> Comedy 

<input type=“radio” name=“movietype” value=“drama” /> Drama 

<input type=“radio” name=“movietype” value=“none” /> None of these 

To group a set of related radio buttons

together, their name attribute should be one

and the same.

8/12/2019 Processing Online Forms

http://slidepdf.com/reader/full/processing-online-forms 14/23

Radio buttons(continues)

Note that only one option can bechosen. The checked  attribute can be

used to set the default selection if we

want to indicate a pre-chosenselection.

<input type=“radio” name=“movietype”value=“none” checked/> None of

these

8/12/2019 Processing Online Forms

http://slidepdf.com/reader/full/processing-online-forms 15/23

Check boxes

Check boxes are similar to radiobuttons, but are used when you want

to let the user select more than one

option among a number of choices. The type attribute is set to the value

“checkbox”. 

8/12/2019 Processing Online Forms

http://slidepdf.com/reader/full/processing-online-forms 16/23

Check boxes(continues)

<p><b>Where do you watch movies? Select all that apply</b></p><input type=“checkbox” name=“cinema” value=“action” /> Cinema 

<input type=“checkbox” name=“home” value=“comedy” />Home 

<input type=“checkbox” name=“computer” value=“drama” />Computer  

<input type=“checkbox” name=“donotwatch” value=“none” />Don’t

watch

 Adding checked attribute to one of these buttons will mark that button

with a check when the page loads.

<input type=“checkbox” name=“donotwatch” value=“none”

checked/>Don’t watch 

8/12/2019 Processing Online Forms

http://slidepdf.com/reader/full/processing-online-forms 17/23

Text Areas

Text areas are text fields that havemore than one line for longer text

input. Usually, they are used as a

method to send comments orfeedback.

The tag changes to textarea 

<textarea 

name=“comments”></textarea> 

8/12/2019 Processing Online Forms

http://slidepdf.com/reader/full/processing-online-forms 18/23

Text Areas (continues)

You can specify the dimensions of thetextbox with the rows and cols 

attributes, which stand for the number

of rows and columns.

<textarea name=“comments” rows=“5”

cols=“35”></textarea>

8/12/2019 Processing Online Forms

http://slidepdf.com/reader/full/processing-online-forms 19/23

Text Areas (continues)

There is even the option to includedefault text to appear in the field when

the page loads.

<textarea name=“comments” rows=“5”

cols=“35”>Please provide any

additional comments.</textarea>

8/12/2019 Processing Online Forms

http://slidepdf.com/reader/full/processing-online-forms 20/23

Select fields

Select field provides drop-downmenus that the user can access to beable to choose any information from agiven list.

<p><b>What is your agegroup?</b></p>

<select name=“age”>…</select> 

The select tag must have a name

attribute to identify the checkboxes.

8/12/2019 Processing Online Forms

http://slidepdf.com/reader/full/processing-online-forms 21/23

Select fields(continuation)

The <option></option> tags define thetext that is displayed in the menu.

<p><b>What is your age group?</b></p>

<select name=“age”> 

<option value=“teenager”>younger than 20</option> 

<option value=“youngperson”>between 21 and 35</option> 

<option value=“noanswer ”>prefer not to say</option> </select>

8/12/2019 Processing Online Forms

http://slidepdf.com/reader/full/processing-online-forms 22/23

Select fields(continuation)

You may add selected  to show whichoption will be displayed when the page

loads. If not provided, the first item is

selected by default.

<option selected>prefer not to say</option>

8/12/2019 Processing Online Forms

http://slidepdf.com/reader/full/processing-online-forms 23/23

 

top related