INFT132 093 08 Html Forms

INFT11/71-132Web ApplicationsHTML Forms
Dr Michael Rees
School of Information Technology
mrees@bond.edu.au

Forms Overview
Web page equivalent to paper forms
Form components:
text entry
selectable options
buttons
Contains at least one Submit button
When Submit clicked, form entity values sent to server:
contents of all form text boxes and selections
action (program, script) to be obeyed at the server
Server action generates new HTML
Forms allow two-way interaction with user
© 2009 Michael Rees
Web Applications
2

Example Form
Web Applications
3

Form HTML Part 1
<form method="get" action="http://some.server.com/cgi/scriptaction.script" enctype="application/x-www-form-urlencoded">
<p>
Name:
<input id="Text1" type="text" /></p>
<p>
Gender:
<input name="Gender" id="Female" type="radio" checked="checked" />
Female
<input name="Gender" id="Male" type="radio" />
Male</p>
<p>
Receive email:
<input id="Checkbox1" type="checkbox" checked="checked" /></p>
Web Applications
4

Form HTML Part 2
<p>
Comments:
<br />
<textarea id="TextArea1" cols="40" name="S1" rows="4">Several lines of text
that make up the
comment.</textarea>
</p>
<p>
Make a choice:
<br />
<select id="Select1" size="3">
<option>First choice</option>
<option>Second choice</option>
<option>Third choice</option>
</select>
</p>
Web Applications
5

Form HTML Part 3
<p>
Upload a file:
<input id="File1" type="file" />
</p>
<p>
<input id="Submit1" type="submit" value="Submit" />
<input id="Reset1" type="reset" value="Reset" />
<input id="Button1" type="button" value="Regular button" />
</p>
</form>
Web Applications
6

More Resources
W3Schools form page
Textbook Section 2.9
Web Applications
7

Web Applications
JavaScript History and Versions
JavaScript was introduced as part of the Netscape 2.0 browser
Microsoft soon released its own version called JScript
ECMA developed a standard language known as ECMAScript
ECMAScriptEdition 3 is widely supported and is what we call JavaScript
8

Resources
Read Chapter 4 of textbook
Web Applications
9