chapter 6: creating a web form - wordpress.com · chapter 6: creating a web form created by l. asma...

CHAPTER 6: CREATING A WEB FORM

CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)


INTERACTION BETWEEN A WEB FORM AND A WEB SERVER

Without a form, a website is read-only. It only provides information.

EXAMPLES OF FORMS USAGE

Performing searches

Posting comments

Asking for additional information

Placing orders for goods and services


EXAMPLES OF COMPONENTS OF A WEB FORM

Input Box: Text and numerical entries

Text Area: Several lines of text

Option Buttons (radio buttons): Single option from a predefined list

Check Boxes: Selecting options from a predefined list.

Selection List

Color Picker

Calendar Picker

Spin Boxes

Sliders


Not Supported by all browsers


Text Input

Calendar Picker

Option (Radio) Buttons

Spin boxes

Color Picker

Password

Selection List

Checkboxes

Slider

File Upload

Text Area

Button Reset Submit

CREATING AN INTERACTIVE WEB FORM

Create a form +

attributes

Create Field sets + add

legends

Create Controls + add labels


CREATING AN INTERACTIVE WEB FORM

Forms contain form elements and other elements.

Forms can be created anywhere in the body.

A single page can contain many forms.

url: filename and location of the program that processes the form.

Method: post / get.


<form attributes> content </form> id=“registrationFrom”

name=“registrationForm”

<form id=“registrationFrom” name=“registrationForm”> content </form>

action=“registrationScript.js”

method=“post”

<form action=“registrationScript.js” method=“post”> content </form>

<form id=“id” name=“name” action="url" method="post/get"> content </form>

What

makes the

form

interactive

1

CREATING A FIELD SET

A way to organize a form through grouping similar fields into a field set.

You can add a legend to the field set.


<form id=“id” name=“name” action="url" method="post/get">

<fieldset id="id">

</fieldset>

</form>

<form id=“id” name=“name” action="url" method="post/get">

<fieldset id="id">

<legend>

Text

</legend>

</fieldset>

</form>

2

CREATING INPUT (CONTROL) ELEMENTS

A. Basic Inputs

input is an empty tag.

input is a text-level inline element.

type: type of input control.

name: is required to retrieve the value associated with the input field by the server program.

value: default value of the control.


<input id=“id” name=“name” type=“type” value=“value” />

Type Description

button A button that can be clicked to preform an action.

submit A button that submits the form.

reset A button that resets the form.

checkbox

radio

text An input box that displays text entered by the user.

password An input box that hides text entered by the user.

3

All radio buttons related to one field share the same name

ADDING FIELD LABELS

The control is usually contained within the label.

for: id of the control element associated with the label.

Benefit of for: clicking on the label positions the cursor at the control element.


<label for=“id” >

label text

</label> <label for="id">

label text

<input id="id" name="name" type="type" value="value"/>

</label>

COMPLETE EXAMPLE


<html>

<head></head>

<body>

<form id="lecture3Form" name="lecture3Form" action="lecture3.js" method="post">

<fieldset id="personal">

<legend> Personal </legend>

<label for="sName"> Name: <input id="sName" name="sName" type="text"/> </label>

<br/><br/>

<label> Status:</label>

<label> <input id="status" name="status" type="radio" value="single"/> Single </label>

<label> <input id="status" name="status" type="radio" value="married"/> Married </label>

<label> <input id="status" name="status" type="radio" value="widowed"/> Widowed </label>

<label> <input id="status" name="status" type="radio" value="divorced"/> Divorced </label>

<br/><br/>

<label for="sPassword"> Password: <input id="sPassword" name="sPassword" type="password"/> </label>

</fieldset>

<fieldset id="professional">

<legend> Professional </legend>

<label> Skills: </label>

<input id="programming" name="programming" type="checkbox" value="programming"/> Programming

<input id="technicalWriting" name="technicalWriting" type="checkbox" value="technicalWriting"/> Technical Writing

<input id="systemAnalysis" name="systemAnalysis" type="checkbox" value="systemAnalysis"/> System Analysis

</fieldset>

<input id="drawButton" name="drawButton" type="button" value="Draw A Line"/>

<input id="resetButton" name="resetButton" type="reset" value="Reset Form"/>

<input id="sumbitButton" name="submitButton" type="submit" value="Submit Form"/>

</form>

</body>

</html>

COMPLETE EXAMPLE


chapter 6: creating a web form - wordpress.com · chapter 6: creating a web form created by l. asma...

Documents