Processing Online Forms

8/12/2019 Processing Online Forms

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

Processing Online Forms



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



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.



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.



Input Fields

Types

◦ Text fields

◦ Radio buttons

◦ Check boxes

◦ Text areas

◦ Select fields



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.



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




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>




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.




<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



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.



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.




<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.




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



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”.



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



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>



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>



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>



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.



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>



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>



Documents

Processing Online Forms