Howto Setup a Form
Creating the page, and setting up the text fields
Some familiarity will be required to understand HTML code. Your life can be made easier if you obtain a pre-made template. There is an open-sourced solution that provided the template for this page at Open Sourced Web Design (http://www.oswd.org/).
Load your page into Mozilla Composer and under the normal tab. Arrange the Page to your liking. Take note the of styling used by the designer. Most likely the page use use HTML4 or XHTML. If that occurs, deleting a menu or section will require that you understand the source.
<div></div>
The code between these two sets of brackets is most likely a menu item, or your main body element. If you were just just remove the content, in your graphical editor, you would most likely leave artifacts that won't be shown on your screen.
Type something identifiable inside your main body. The source code can be a bit hectic until you get used to it. The find function will be your friend. Lets test this by typing something unique like "asdf" in your main body under the normal tab. Now switch to the source and search for "asdf". Delete this, as we just to find the spot we want in the source.
A form is used to retain data, and can't actually be seen by the reader. An element outside of a form, won't be included in the form's calculations. Just as one form can't see the values from another form, when you use multiple forms on a page. When it is said, that you add items inside the form, it is referring to placing that item between the <form> </form> brackets in your source.
- Create a form:
<form name="fma"> </form>
- Add a text box for each variable to your form
<input size="20" value="Text Displayed" name="variable">
- Add a push button to your form
<input onclick="form.F.value=eval(form.m.value)*eval(form.a.value)"
name="submit" value="Solve for F" type="button">
- <html>
<body>
<form name="fma">
<h2>F=ma</h2>
F: <input size="20" value="" name="F"><br>
m: <input size="20" value="" name="m"><br>
a: <input size="20" value="" name="a"><br>
<input onclick="form.F.value=eval(form.m.value)*eval(form.a.value)"
name="submit" value="Solve for F" type="button">
</form>
</body>
</html>
Notice the onclick event, it sets the value of your text box named
"F" to the values of "m*a". The eval() is a function which will grab
numbers from the text box. Javascript uses the rules of math (&
order of operations) just like any other scientist. When you enter an
expression, it must have the unsolved variable on the left, and its
mathematical expression to the right. "F=ma" is the correct orientation
since "F" gets the values of "m*a". Entering "ma=F" will result in the
web-browser to ignore your code and will result in nothing. It is also
good to note that exponential notation is common with engineering
notation on calculators; like for scientific notation 1.234*10^3 =
1.234e3. It also works for numbers with decimals in strange positions
like .00043e-4 = .00043/10^4.
The above code would give us an example to the looks of:
Wouldn't it be to be able to solve for F,m and a?. To do that, You
should use a function.
.