Using Forms and JavaScripts in HTML Documents

Basic Java Scripts and Objects in HTML	Java Scripts and Forms
Forms as Information Collectors	More Input Types

Let's go to the Hotel California!!

When you close a document with codes like above, the java script command "window.open(location)" will be executed. This is why you got trapped and can't get out of it!! The only chance is....

The HTML document in the Hotel California link above has used some java scripts too:

Standard Objects for JavaScripts and Their Properties

Back to the top

Objects	Properties	Methods
document	bgColor, fgColor, title, linkColor, location	write()
location	host, hostname
history	length
navigator	appName, appVersion

Effect and Values

In HTML document, we can insert some Java Script codes by use the <script> tag. Consider the following code:

<h3>The properties of the current document:</h3>
<SCRIPT language="javascript">
document.write("The background color is "
+ document.bgColor + ".<br>");
document.write("The foreground color is <strong>"
+ document.fgColor + "</strong>.<br>");
document.write("The link color is <font color='green'><b>"
+ document.linkColor + "</b></font>.<br>");
document.write("The URL is <font color='black'><b>"
+ document.location + "</b></font>.<br>");
document.write("The title of this page is <font color='red'><b>"
+ document.title + "</b></font>.<br>");
document.write("The document was last modified:
<font color='blue'><B>" +
document.lastModified + "</b></font>.")
</SCRIPT>

The code above will generate the following text in the current browser.

The properties of the current document:

The values of properties of navigator, history, and location

<SCRIPT language="javascript">

document.write("The browser is <font color='blue'><B>" +navigator.appName+ "</font>.</B>")

document.write("<br> Its version is <font color='blue'><B>" +navigator.appVersion+ "</font>.</B>")

document.write("<br>You have visited <font color='blue'><B>" +history.length+ "</font></b> pages.")

document.write("<br>The name of this location is <font color='blue'><B>" +location.host + "</font></B>." )

document.write("<br>The host name of this location is <font color='blue'><B>" + location.hostname + "</font></B>." )

</SCRIPT>

generate:

We can assign a value to those property variable to change the properties of the current document.

<SCRIPT language="javascript">
document.fgColor="red";
document.fgColor="teal";
</SCRIPT>

Or,

Click the corresponding word to change color
Forground	Background
Green Red Blue Black White Yellow	Green Red Blue Black White Yellow

Java Scripts and Forms

Back to the top

A better way; Using forms

<form name="changecolor">
<table align="center" border="5">
<tr>
<td> <B> Foreground </B>
<td> <input type="button" value="Green" OnClick="document.fgColor='green'">
<td> <input type="button" value="Red" OnClick="document.fgColor='red'">
<td> ....
.............
</table>
</form>

Silly Clock

Click	<input	type="button"
		value="here"
		onClick="document.sillyclock.time.value=Date()">
to update Date and Time:
<input	type="text"
	name="time"
	value="Date and Time"
	size="25">

</form>

Silly Counter

<form name="counter">
<table>
<tr>
<td> Item 1:
<td> <input type="text" name="item1" size="10">
<tr>
<td> Item 2:
<td> <input type="text" name="item2" size="10">
<tr>
<td> Tax:
<td> <input type="text" name="taxrate"
size="3" value="7.5"> %
<tr>
<td> Total:
<td> <input type="text" name="total" size="10">
<input type="button" value="Press here for total"
onClick="findtotal()">
</table>
</form>

We have to define the function findtotal()

<SCRIPT language="javascript">
function findtotal()
{
var tr = parseFloat(document.counter.taxrate.value)
var it1 = parseFloat(document.counter.item1.value)
var it2 = parseFloat(document.counter.item2.value)
var tt = (it1+it2)*(1+tr/100)
tt = Math.round(tt*100)/100
document.counter.total.value= tt
}
</SCRIPT>

Using form to collect information from the user:

Back to the top

<form name="addressform" method="post"
action="mailto:chungli@cs.colgate.edu">
<table>
<tr>
<td align="right"> Name:
<td> <input type="text" name="name" size="25">
<td rowspan="5" align="right">
Put your comments in the following box.<br>
<textarea name="comments" rows=5 cols=45
wrap="hard">Comments go from here..</textarea>
<tr>
<td align="right"> No and Street:
<td> <input type="text" name="street" size="25">
<tr>
<td align="right"> City:
<td> <input type="text" name="city" size="15">
<tr>
<td align="right"> State:
<td> <input type="text" name="state" size="2">
Zip:<input type="text" name="zip" size="5">
<tr>
<td align="right"> Country
<td> <select name="country">
<option>Brazil</option>
<option>Ireland</option>
<option>Japan</option>
<option>Korea</option>
<option>Taiwan</option>
<option selected>United States </option>
</select>
</table>
<input type="submit" value="Send Form">
<input type="reset" value="Clear Form">
</form>

If the user submits a form as above, one with the email address specified in the action of the form will receive an email with attachment as follows:

name=Dennis+Li&comments=No+COMMENTS&street=48+Payne+St.&city=Hamilton&state=NY&zip=13346&country=United+States

More Input Types for Forms

Back to the top

<form name="form1" method="post" action="mailto:chungli@cs.colgate.edu">
<table>
<tr> <td align="right"> Userid:
<td> <input type="text" name="useride" size="25">
<tr> <td align="right"> Password:
<td> <input type="password" name="password" size="25">
</table>
<P> Gender:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<P> Class:
<input type="radio" name="class" value="2"> 2002
<input type="radio" name="class" value="3"> 2003
<input type="radio" name="class" value="4"> 2004
<input type="radio" name="class" value="5"> 2005
<P> Hobbies
<input type="checkbox" name="hobbies" value="reading"> Reading
<input type="checkbox" name="hobbies" value="sleeping"> Sleeping
<P>
<input type="submit" value="Send Form">
<input type="reset" value="Clear Form">
</form>

If the user submits a form as above, one with the email address specified in the action of the form will receive an email with attachment as follows:

useride=Sandy&password=dennis&gender=female&class=5&hobbies=reading&hobbies=sleeping

Note: Checkbox typed input allows the user to choose more than one selections, while radio typed input allows only one selection.

Name:		Put your comments in the following box. Comments go from here..
No and Street:
City:
State:	Zip:
Country

Foreground
Background