FORMS

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>



Back to HTML Basics Page

Back to Internet Section