Around the Web in Eighty Kilobytes

Home Old Issues Examples
 PreviousIssues : 11 - June 16
Welcome to Nathsite's weekly 'Around the Web in Eighty Kilobytes', a 20-part free guide to building a website of your own, and using the web well.
To stop getting ATWI80KB's, send an empty email to atwi80kb@homepage.com with 'NO MORE THINGIES' as the subject. To look at examples and previous ATWI80KB's, go to http://atwi80kb.homepage.com


AROUND THE WEB IN EIGHTY KILOBYTES 1.21 - 1.22
   ATWI80KB 11

June 16, 2000

1) Forms I
2) Forms II
Example


1) FORMS I
   A form is a thing you can put on a page for the viewer to enter information. Forms are made with the <form> tag. The <form> tag has a few important attributes, 'method', 'action' and 'enctype'. For an email form, 'method' must be 'post', action is 'mailto:yourname@yourthingy.com' and 'enctype' is usually 'application/x-www-form-urlencoded'.
eg. <form method=post action="mailto:aniruddhnath@hotmail.com" enctype="application/x-www-form-urlencoded">
   When this form is submitted, the form is emailed to me in a tough to read format. I'll need to download a program to translate this into English. I hear there's one at ftp://ftp.winsite.com, but I haven't tried it so I can't really recommend it. Another way is to change 'enctype' to 'text/plain'. A good email program will translate this into English automatically, but you can try the other way if it doesn't.

   Now, to the form itself.
Most pieces of information collected need <input> tags. <input> has no closing tag.
<input> needs these attributes:
   There are more, but they aren't needed.

Types of form inputs:

Text boxes:
<input type=text name='whatever'>
Optional Attributes:

Password boxes:
<input type=password name='whatever'> is exactly the same as <input type=text name='whatever'>, except that '*'s are displayed instead of normal text and there's no 'value'.

Checkboxes:
<input type=checkbox name='whatever' name='whatever' value='y'>
Needed attributes:
Optional attribute: 'checked'.

Radio buttons (the round things used in polls etc., of which you can select only one):
<input type=radio>
Needed attributes:

Hidden comments:
<input type=hidden>
Needed attributes:
These don't show up on your webpage, but do show up in the results emailed to you. They're especially useful if you have more than one similiar-looking form and can't tell which results are coming from which form.


2) FORMS II
   There are a few inputs that don't need <input> tags. One of these is the pull down menu, which uses the <select> tag instead> <select> has a closing tag.
   <select> needs a 'name', but no 'type'.
Between the <select> tag and the </select> tag are <option> tags, which have no closing tags. <option> needs a value.
eg. <form method=post action="mailto:aniruddhnath@hotmail.com" enctype="text/plain">
    Select country:-
    <select name="Country">
    <option value="India">India
    <option value="Pakistan">Pakistan
    <option value="SriLanka">Sri Lanka
    </select>
    </form>

A pull down menu will appear with options 'India', 'Pakistan' and 'Sri Lanka'.
<option> can also have a 'selected' attribute, to choose the default selected option, and a <select> can have a 'size' attribute. If the 'size' is more than one, it is no longer a pull down menu, but a scrolling list.

   Another input with a tag of its own is <textarea>, which is a large box which can be typed in. It needs a name, and optional attributes include:
  • 'rows' - Number of rows of text in the box.
  • 'cols' - Number of columns of text in the box.
  • 'wrap' - The way text is wrapped in the box. It can have three values, 'physical', which means the text wraps and is submitted that way, 'virtual', which means the text wraps and is submitted unwrapped, and 'off', which means text is submitted as it is typed.

Buttons:
There are two types of buttons - 'submit' buttons to send the form, and 'reset' buttons to clear the form. There are also 'button' buttons, but they're only used in some javascript things.
Submit buttons:
<input type=submit>

Reset buttons:
<input type=reset>

These <input> tags do NOT need names, but can have values. 'value' is the text that appears on the button.

NOTE: Forms can contain anything including text and images. Images can't be used in pull-down lists though.

Well, that's it for forms. You can only get used to them with practice. Anyway, this example should help. Put your email address in the 'mailto' instead of mine.
EXAMPLE
<html>
<head>
<title>Form</title>
</head>
<body bgcolor="#FFFFFF">
<form method=post action="mailto:aniruddhnath@hotmail.com?subject=form" enctype="text/plain">
Enter your name:  
<input type=text name="Name" value="Type your name here" size=30><br>
Password:  <input type=password name="Password" maxlength=8><font size=-2>(8 characters maximum)</FONT><br>
<select name="Country" size=2>
<option value="UK">U.K.
<option value="US">U.S.A.
<option value="UAE">U.A.E.
<option value="Australia">Australia
</select><br>
<input type=checkbox name="Knows HTML" value="yes" checked>You know HTML<br>
How's your mood?<br>
<input type=radio name="Mood" value="good" checked>Good<br>
<input type=radio name="Mood" value="okay" checked>Okay<br>
<input type=radio name="Mood" value="bad" checked>Bad<br>
<textarea cols=10 rows=5 wrap=physical>
You can type stuff here, too! </textarea>
<input type=submit value="OK"><input type=reset value="Cancel"><br>
<input type=button value="Click if you like pressing useless buttons!"></form>
</body>
</html>


That was NOT fun.
See you in a week!
Aniruddh Nath


Email questions to atwi80kb@homepage.com - I'll reply if I have time. I might write stuff from your email in later ATWI80KB's.
NOTE: I'm not responsible for any damage done to your computer because of this tutorial.