A Sample Web Form
The sample HTML code
Quick tip: How to use the sample form
Detailed explanation: How to use the sample
form
How it works
Sample form
Here is how the sample form will appear in a Web browser:
Add your name to our mailing list
The HTML code
Following is the HTML code that creates the sample form:
<html>
<head>
<title>Mailing List form</title>
</head>
<body>
<h1>Add Your Name to our Mailing List</h1>
<form action="mailto:youruserid@udel.edu?subject=mailing
list" method=post enctype="text/plain">
Last name: <input type="text" name="Last
Name" size=40 value="">
<br>
E-mail Address: <input type="text" name="E-mail
Address" size=12
value="">
<br>
<input type="submit" value="Send Request" onClick="alert('Thank
you. Your name has been added to our mailing list.')">
<input type="reset" value="Reset">
</form>
</body>
</html>
When someone fills out this form, its contents will be mailed
to "youruserid@udel.edu," and the subject line of the message will be "mailing
list." For example, if Bob Smith, whose e-mail address is bobsmith@udel.edu
filled out this form, the user named youruserid@udel.edu would receive a mail
message like the following:
To: youruserid@udel.edu
Subject: mailing list
Last Name=Smith
E-Mail Address=bobsmith@udel.edu
Quick tip: How to use the sample form
-
Open your text editor (e.g., Notepad or SimpleText).
-
Copy and paste the sample form code into your
text editor.
-
Still in your text editor, change any of the information that's in bold or italics in the sample form, adding new fields as desired.
-
Save the new form; be sure to name it with .html as the extension, e.g.,
"myform.html".
-
Upload your form to your Web directory (using Composer's publish function,
ftp, or Fetch).
Detailed explanation: How to use the sample
form
-
Open your text editor (e.g., Notepad or SimpleText).
-
Copy and paste the sample form code into your
text editor.
-
Replace the text between the <title> </title> tags; this text appears
at the top of the browser window as the title of the page.
-
Replace the text between the <h1> </h1> tags; this is the title that appears on the page itself.
-
Change the mailto:youruserid@udel.edu in the <form> tag; replace
youruserid@udel.edu with your own e-mail address.
-
Next, replace the ?subject=mailing list" with the wording
you'd like in the subject line of the message you will receive.
Be sure to include the quote at the end. If you don't want a pre-assigned
subject line, delete ?subject=mailing list, but leave the closing
quotation mark.
-
In the <input> tags, change name=Last Name to reflect what
you'd like to appear as the name of that item when its contents are sent
to you by e-mail. For example, if you want the e-mail message to
say "Full Name," change the name=Last Name
in the <input> tag to name=Full Name.
-
Add one new <input> tag for each new piece of information you would
like to collect in your form. For example, to add an address,
type:
-
One new <input> tag in which name=street address
-
One new <input> tag in which name=city
-
One new <input> tag in which name=state
-
Add the descriptive text that will appear on the page for each <input>
tag. Usually, you put that text to the left of the <input>
tag, but you may place it above, below, or to the right.
-
To change the label users will see on the button they use for submitting
the form, in the <input type="submit"> tag, replace "Send Request"
with the text you'd like on the button.
-
To change the text users will see after clicking the "Submit (or "Send
Request") button, change 'Thank you. Your name has been added to our
mailing list.' Be sure to include the single quotation marks (').
-
Save the new form; be sure to name it with .html as the extension (e.g.,
myform.html).
-
Upload your form to your Web directory (using Composer's publish function,
ftp, or Fetch).
How it works
The <form> tag below instructs the browser that
a form is being used, that the information gathered from the
form should be sent by e-mail to the user named in the tag, that the subject
line for the message is "mailing list," and that the message should be
sent in plain text so it's readable. Every form must begin with a
form tag. |
<form action="mailto:youruserid@udel.edu?subject=mailing
list" method=post enctype="text/plain"> |
The <input type> tag below instructs the browser
to display a box in which the user can type text; to call the contents
of the box "Last Name;" to make the box 40 characters wide; and to have no pre-set value, that
is, the user will provide the contents of the box by typing it in.
Be sure to add text to tell the user in what box they're entering information.
The first line below will create a form with an unlabelled blank text box.
The second line below will create a form with a properly labelled text
box. |
<input type="text" name="Last Name" size=40
value=""> |
Last Name <input type="text" name="Last Name" size=40 value=""> |
The <input type> tag below instructs the browser
to display a box in which the user can type text; to call the contents
of the box "Phone;" to make the box 14 characters wide;
and to have no pre-set value, that is, the
user will provide the contents of the box by typing it in. |
<input type="text" name="Phone" size=14 value=""> |
The <input type> tag below instructs the browser
to display a box in which the user can type text; to call the contents
of the box "Last Name;" to make the box 40 characters wide; and to have no pre-set value, that
is, the user will provide the contents of the box by typing it in. |
<input type="text" name="Last Name" size=40
value=""> |
The <input type> tag below instructs the browser
to display a button labelled "Send Request" and to open a window with the
text "Thank you. Your name has been added to our mailing list." |
<input type="submit" value="Send Request" onClick="alert('
Thank you. Your name has been added to our mailing list.')"> |
The <input type> tag below instructs the browser
to display a button labelled "Reset." Clicking on this button clears
the contents of anything that's been typed in the text boxes. |
<input type="reset" value="Reset"> |
The </form> tag below instructs the browser that
there is no further information in this form; it is complete. |
</form> |
University of Delaware Home Page
Questions?
Last modified: February 5, 2003
Copyright © University of Delaware 2003-2004