//Cyber Battlefield/HTML Forms

Big Picture

The web sites you are used to visiting on the web probably don't make use of prompt(); that much, yet you can input data that is processed by the web site. Before we discuss server side scripting, we first need to discuss HTML Forms; HTML Forms allow us to input data via a web page.

Input/Output with Forms

At this point, the only way we've been able to input information to a JavaScript program as a user is via the prompt(); function. This gets a bit cumbersome, especially when there are multiple values to enter. Usually when information is input via a web page, it's done with HTML Forms, which allow us to place multiple text input boxes, as well as buttons and sliders and so forth, all in the same page. Here's a nice simple example of form-based I/O.
Play with it for a moment:

feet = inches

A nice feature of this converter is that you can input data in either the feet or inches box, and the program is smart enough to convert in the proper direction to fill the other box. With prompt();, this would've required two separate inputs, one to specify the number and the other to specify the direction.
Here's how the HTML Form was implemented:

<FORM name="convert" onsubmit="return false;">
	<INPUT type="text" name="feet" value="0"
		onchange="var f = document.forms.convert.feet.value;
		          document.forms.convert.inches.value = f*12;">
	feet =
	<INPUT type="text" name="inches" value="0"
		onchange="var i = document.forms.convert.inches.value;
		          document.forms.convert.feet.value = i/12;">
	inches
</FORM>
			

Password Input

HTML has a special input type for passwords, which works like a text field, except that you only see dots when you type, so someone looking over your shoulder won't see what you've typed. Since all that's different is the type, this doesn't represent much new. Here's an example that doesn't do much, but shows the syntax:

Source Code
Rendered Interactive <FORM> Element
<FORM onsubmit="return false;">
	<INPUT type="password">
</FORM>

The return false; is JavaScript, that effectively tells the browser not to do anything with the data that are input into the <FORM>.

Consider the simple example ex14.html. If you know the password, you can reveal a secret message. Can you figure out the message? Give it a try before you move on.

It probably didn't take you too long to get that message. There are some problems here. First of all, figuring out the password was easy, because it was sitting in the HTML source. Second of all, even if we couldn't figure out the password, we could grab uninteresting.js from the website and simply read the message. Normally, authentication, in this case checking a password to make sure the proper person is accessing the data, would be done on a server, not on a client. Giving clients access to the actual password by viewing the source code, as we did here, is clearly bad news.

It's not impossible to embed something like password protection into a client web page, though. The page ex12.html is an example. This is "crackable", but not obviously so. The message is embedded in the JavaScript code, but it is encrypted (we will discuss encryption in greater detail later in the course). You need to know the key to get the message. So even though you see the encrypted message and you see the process by which it is decrypted, you still need the key.

Buttons

There are many user input elements available for HTML Forms (see w3c's HTML Forms Intro), but the last one that we'll look at is the humble button. An input with type="button" is ... wait for it ... a button. The value attribute defines the button's label. A typical thing to do with a button is to set its onclick property to a chunk of JavaScript code to do some job. For example, in the following code, clicking on the button squares the value in the field.

Source Code
Rendered Interactive <FORM> Element
<FORM name="buttonForm" onsubmit="return false;">
	<INPUT type="text" name="x" value="2">
	<INPUT type="button" value="Square It"
		onclick="var t = document.forms.buttonForm.x.value;
		         document.forms.buttonForm.x.value = t*t;">
</FORM>

After-Class Exercise: modify the above form by adding a "Squareroot It" button.