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.
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:
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= > <INPUT type="text" name="feet" value="0" onchange= > feet = <INPUT type="text" name="inches" value="0" onchange= > inches </FORM>
<form>. Form elements contain user-input elements, like the two
inputelements in this example.
nameattribute for forms and for the user-input elements they contain, since the DOM allows us to reference
inputelement values by name. To do so, we using the following syntax:
document.forms.formname.inputname.valueThat's why you see
document.forms.convert.inches.value, for example.
inputelements, which are also new, don't have end tags. They do, however, require a
typeattribute to tell us what kind of input control we're looking for. Setting
type="text"gives us a text box.
inputelements have an
onchangeevent (in addition to our mouse events from last lesson), that allows us to run a script when the
.valueof the element changes as a direct result of a user action.
values are actually attributes, so we can set an initial
valueas a regular HTML attribute definition.
onsubmit="return false;"is a bit of a magic incantation. Basically, forms were originally used to send information back to a web server. We're not trying to do this right now, and setting
onsubmit="return false;"is there to stop the browser from actually sending information back.
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:
<FORM onsubmit= > <INPUT type="password"> </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.
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
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
<FORM name="buttonForm" onsubmit= > <INPUT type="text" name="x" value="2"> <INPUT type="button" value="Square It" onclick= > </FORM>
After-Class Exercise: modify the above form by adding a "Squareroot It" button.