Forms are used to gain information from a reader, such as feedback, an on-line order, database entry or a subscription to a mailing list.
Feel free to simply copy and paste the example forms below. Each one uses a different, useful element of forms.
The Basic Form
<Html>
<Head><Title>Cool Basic Form</Title></Head>
<Body>
This is a basic form!
<Form Action= "...">
<Input Type="hidden" Name="subject" Value="title">
Form dialogs in here
<Input Type="submit">
<Input Type="reset">
</Form>
This comes after the form!
</Body>
</Html>
<Input> Dialog Items
<html>
<body>
Just one line of text please
<form>
<Input type="text" Name="Single Line Text Box" Size=50 Maxlength=75 Value="Default text">
</form>
</body>
</html>
Name="text"
-assigns a label to the box, so there is identification of what the user filled in
Size="value"
-allows you to specify a width of the text box
MaxLength="Value"
-the maximum number of characters that can be written in the text box
Value="text"
-write some text in the box
Radio Buttons
<html>
<body>
Just pick one button please
<form>
<Input type="radio" Name="Radio Buttons group" Value="yes" Checked> Oh yeahhhh!
<Input type="radio" Name="Radio Buttons group" Value="no">
No Way!
</form>
</body>
</html>
Name="text"
-tells the browser (Netscape) which group the radio button belongs to
-also used as a label to tell the user what they are responding to
Value="text"
-the text that accompanies the radio button
-can help to process the form
Checked
-specifies the default radio button
Checkboxes
<html>
<body>
this is a checkbox
<form>
<Input type="checkbox" Name="Checkbox Buttons group" Value="1"> First
<Input type="checkbox" Name="Checkbox Buttons group" Value="2"> Second
<Input type="checkbox" Name="Checkbox Buttons group" Value="3" Checked> Third
</form>
</body>
</html>
-all buttons within the same group must have the same NAME
-a single radio button can be used, but it must have its own unique and special NAME
Name="text"
-tells the browser what checkbox group the checkbox belongs to = identification
Value="text"
-text that accompanies the checkbox if it is selected by the user
Checked
-pre-select the checkbox
Password Text Box: Type="password"
<html>
<body>
this is a neat way to set up a password
<form>
Please enter the Password
<Input type="password" Name="Password Text Box" Size=50>
</form>
</body>
</html>
-the same as an ordinary text box, but the characters do not show up on the screen-each character is represented by an "*"
Name="text"
-assigns a label to the password submitted by the user
Size="Value"
-the size of the password box
Value="text"
-to specify default text for the password box
Image Field: Type="image"
<html>
<body>
this is a great way to set up a graphical interface
<form>
Click on the picture
<Input type="image" Name="My Picture" SRC="yourpic.gif" Align="absmiddle" Width=100 Height=34 Border=1>
</form>
</body>
</html>
Name="text"
-assigns a label to the image that is clicked by the user=identification of that which is clicked
SRC="URL"
-specific location of the image....just like <IMG SRC="..">
ALIGN="left/right/middle/top/texttop/absmiddle/baseline/
bottom"
-----aligns the graphic
BORDER=pixels
-specify a border width
HEIGHT=pixels, WIDTH=pixels
-specifies the height and width of a graphic
HSPACE=pixels, VSPACE=pixels
-specifies the vertical and horizontal space around a graphic
FILE ATTACH: TYPE="file"
This input allows you to send a file and should bring up a text box and browse button:
<html>
<body>
this is a fantastic way to send or submit a file
<form>
Send your picture
<Input type="file" Name="The User's File" Size=35 Accept="image/*" Maxlength=50>
</form>
</body>
</html>
NAME="text"
-descriptive name for the file being sent
SIZE= "Value"
-specifies the size of the text box in characters
MAXLENGTH=value
-specifies the maximum length for the filename in characters
ACCEPT="MIME content type"
-an optional attribute to specify the types of files accepted using MIME content types in a comma separated list
Form Buttons
-used to put a button on the screen
-- using Submit and Reset will send and clear the form
-other buttons need the power of Javascript to work (INT12)
<html>
<body>
Please fill in the following form!
<form>
<Input type="text" Name="Single Line Text Box" Size=50 Maxlength=75 Value="name">
<Input type="text" Name="Single Line Text Box" Size=50 Maxlength=75 Value="sex">
<Input type="text" Name="Single Line Text Box" Size=50 Maxlength=75 Value="age">
<Input type="submit" Value="Yes! I want to see you!">
<Input type="reset">
<Input type="button" Value="Press me to send Ken $40.00">
<Input type="hidden" Name="subject" Value="Title of Form">
</form>
</body>
</html>
NAME="text"
assigns a label to a button-what the user responds to
VALUE="text"
specifies the button text
Hidden: used to send information to the server with the form, such as the title of the form
The Details: <SELECT> dialog items
-The <SELECT> </SELECT> element is used to place pull-down menus or scrolling list boxes
-an <OPTION> </OPTION> element is also required to define each item in the list
<html>
<body>
this is a fantastic way to provide the viewer of your website with choices
<form>
<p>Pick One:
< Select Name="Single line list box example>
<Option Value="1">Choice 1</Option>
<Option Selected Value="2">Choice 2</Option>
<Option Value="3">Choice 3</Option>
<Option Value="4">Choice 4</Option>
</Select></p>
<P>Pick some:
<Select Name= "Multi-Line, Multi-selection List box" SIZE=3 Multiple>
<Option Value="1">Choice 1</Option>
<Option Selected Value="2">Choice 2</Option>
<Option Value="3">Choice 3</Option>
<Option Value="4">Choice 4</Option>
</select>
</p>
</form>
</body>
</html>
Name="text"
-assigns a label to an item=identification
SIZE=value
-to give the number of items shown...without this, the list box defaults to a drop-down list
MULTIPLE
-user can choose more than one option
<OPTION>..</OPTION>
-each item you want from the list must be enclosed in these tags
VALUE="text"
-text is returned in the email when a specific item is selected
SELECTED
-a list item is to be pre-selected <TEXTAREA>Dialog Items
-used to allow a user to enter text
<html>
<body>
this is a fantastic way to send text
<form>
<Textarea cols=50 Rows=10 Wrap="hard" Name="Feedback area">
Tell me all about you!
</Textarea>
</form>
</body>
</html>
NAME="text"
-assigns a label to the text input by the user
COLS=characters
-specify the width of the text entry area in characters
ROWS=number
-specify the height of the text box
WRAP="off/soft/hard/virtual/physical"
-specifies how text input should wrap=cleaner look and more logical reading
GETTING REPLIES FROM A FORM
HTML forms collect data...they do not process it
-in order for the information to be collected, certain steps must be taken in order for it to go somewhere:
-must use the METHOD and ACTION attributes
Four Ways to process a Form:
1. Submit the form to a program stored on a web server
ex: <FORM Method="post" ACTION="/cgi-bin/cgi.pl">
2. Process the form with Javascript
ex: <FORM Method="post" onSubmit=return form_check ()">
3. Send the form to a database
-sophisticated method of querying database entries
4. Email the results of the form using mailto
-uses the "Mailto: email address" attribute
<html>
<body>
this is a fantastic way to send text
<FORM METHOD="post" ACTION="mailto:kenb_one@yahoo.com subject=feedback" ENCTYPE="text/plain">
<Textarea cols=50 Rows=10 Wrap="hard" Name="Feedback area">
Tell me all about you!
</Textarea>
</form>
</body>
</html>
Example Reply FORM
<html>
<head><title>Ken's Example Reply Form</title></head>
<body>
<h2>Example REPLY form</h2>
<form action="mailto:kenb_one@yahoo.com Method="post" enctype="text/plain">
<p>
<input type="hidden" name="subject" value="example form">
<select name="age">
<option value="under 18">under 18</option>
<option selected value="18 to 25">18 to 25 </option>
<option value="25 to 30">25 to 30</option>
<option value="30 to 40">30 to 40</option>
<option value="over 40">over 40</option>
</select> Your Age <BR>
<input type="text" name="name" size=40> Your name<BR>
<input type="text" name="email" size=40> Your email<BR>
</p>
<p>
<textarea name="details" cols=50 rows=10 wrap="physical">Tell me something about yourself</textarea>
</p>
<p>
I think the teacher is
<input type="radio" name="opinion" value="fantastic" checked> fantastic
<input type="radio" name="opinion" value="the best">the best
<input type="radio" name="opinion" value="excellent">excellent
</p>
<p>
<input type="submit" value="Process Data">
<Input type="reset" value="Clear Data">
</p>
</form>
</body>
</html>