chapter 6: creating a web form - wordpress.com · chapter 6: creating a web form created by l. asma...
Post on 29-Apr-2018
229 Views
Preview:
TRANSCRIPT
CHAPTER 6: CREATING A WEB FORM
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
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
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
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
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
Not Supported by all browsers
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
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
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
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.
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
<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.
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
<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.
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
<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.
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
<label for=“id” >
label text
</label> <label for="id">
label text
<input id="id" name="name" type="type" value="value"/>
</label>
COMPLETE EXAMPLE
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
<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
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
top related