Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
HTML/JavaScript Forms Tutorial
1. HTML/JAVASCRIPT TUTORIAL FOR DESIGNERS
INTRODUCTION TO FORMS
MUD(TM) - TAKASHI OKAMOTO
MUD@MUDPUB.COM
1. Introduction
In html you can generate things like: textboxes, drop down menus, checkboxes,
buttons, etc...simply by using forms. You can even use CSS 1 and make these ugly
system generated things look good and intergrate them to your design. Great
thing about using buttons generated using forms is that since it is generated by the
system2 there’s no need to download images. Anyway, here we will go over some of
what html can generate.
2. The Code
2.1. Buttons. It is very simple to generate any form elements. We will first begin
with some basic rules and generate a button. Start by making yourself a blank
HTML file (ie. put in your html, head and body tags). Now, to generate a button,
we must first tell the browser that we are inserting a form by first inserting the
form tag. So start by putting in the following in the body:
<form></form>
Within this form tag, we can generate form elements by placing an input tag
(<input>, closing not required) and specifying what type of input it is. In our
case, we want a button, so we set type="button". We also need to specify what
to display in the button. We can do that by specifying the value of it, so let
value="BUTTON" thus generating a button called “BUTTON”. So type in the fol-
lowing and see what it looks like:
<html>
<head>
</head>
<body>
<form>
<input type="button" value="BUTTON">
</form>
</body>
</html>
Date: October 30, 2003.
1
Cascading Style Sheets.
2
ie. the browser.
1
2. 2 MUD(TM) - TAKASHI OKAMOTO MUD@MUDPUB.COM
Pretty ugly, right? That’s why if you want to use form elements that are system
generated, we need to customize it. The easiest way is to use an external css file
and specifying a class.
So lets first create a new file and call it “forms.css”. We should start by creating
a new class, call it button and stick in some features. Make whatever changes you
like, and see what happens. Remember to tell CSS you are defining a new class,
you need to start the name with a ‘.’3. Here I have a sample class:
.button {
color: #a3a3a3; font-weight: normal; font-size: 24px; border-style:0; border:1pt
#7C7C7C dotted; color: #7C7C7C; font-family: Arial, Helvetica, Geneva, Swiss,
SunSans-Regular
}
Now, save the css file, open up your previous html file and link the css in the
header. If you forgot how, here it is. Just stick this within the <head> tag4:
<link href="forms.css" rel="styleSheet" type="text/css">
Now, we need to tell the generated button to have the features of the new
class ”button” that we defined. In the ¡input¿ tag, just add an attribute called
class=”button”:
<input type="button" value="BUTTON" class="button">
Now, save it and preview the button again. Looks cooler right?
exercise: Open the html file in different browsers and note the difference in
appearance.
exercise: Play around with different attributes of .button and see what changes
what5.
Now, as you can see from the first exercise, the styles of the button changes
from browser to browser. There is no way around this, since the appearance of the
button as well as any other form element is dependent on the browser.
2.2. Other Form Elements. How do we generate other form elements? Well, it’s
easy as generating a button. For instance, if you want a text field, just set your input
type to type="text". If you want a checkbox, set the type to type="checkbox".
exercise: Generate a text field, checkbox and look up and generate other input
elements.
3
A period.
4
Make sure you have both the html and css file in the same directory.
5
You might want to consult the W3C website: http://www.w3.org/ or get something like the
css handbook from O’Reilly (It’s about $10 - $15).
3. HTML/JAVASCRIPT TUTORIAL FOR DESIGNERS INTRODUCTION TO FORMS 3
2.3. Select Tag. To generate a drop down menu is a bit different, since it is not
an input element. Instead you would use the tag <select></select> and have an
<option></option> tag within to list all the options to a drop down menu. Try
something like:
<select>
<option selected>select site</option>
<option value="#">--------------------</option>
<option value="http://www.mudnetwork.com/">mud.network(tm)</option>
<option value="http://www.mudclub.org/">mudclub.org</option>
<option value="#">--------------------</option>
</select>
Stick this inside <form> and preview it in different browsers.
exercise: Using css, make the form elements you generated above look cooler.
That’s pretty much all you need to know about how to generate form elements.
But remember how html really doesn’t do much? It generates all these form ele-
ments; but without the help of other scripts (eg. javascript/perl), we can’t do much
with them. Future exercises will show you how you can integrate these scripts.
mud dropnav will teach you how to change URL’s based on what drop down menu
item you select; mud mailinglist and mud contact will show you how to down-
load, install, integrate and customize a widely used perl script called formmail.pl
to set up an automated mailing list subscriber and an email form that lets users
email you via http rather than an email client, which comes in handy when they
are using libraries or internet caf´’s.
e
References
1. D. Goodman, Dynamic HTML. 2nd Ed. O’Reilly & Associates, Cambridge, 2002.
2. D. Flanagan, Javascript: The Definitive Guide. 4th Ed. O’Reilly & Associates, Cambridge,
2002.
3. The W3C website, http://www.w3c.org/.
Typeset using L TEX 2ε for Darwin, AMS package under Mac OS X and TeXShop.
A
