Site hosted by Angelfire.com: Build your free website today!
 

html forms tutorial

In this easy html forms tutorial you will discover how to build a form step by step with an example for each form tag and learn how to use mailto or cgi to send the form
In simple lessons this page will describe all aspects of the html form including, text, radio buttons, check boxes, textarea, the drop down menu, password, hidden input and using an image as a submit button

The form tag

start with the form tag, an example of how to use the the mailto tag in a html form
when the user clicks the submit button the user's browser will send the information to someone@$nailmail.com in this case

<FORM METHOD=POST ACTION="mailto:someone@$nailmail.com" ENCTYPE="text/plain">
</FORM>

data can be sent to multiple email address's, simply seperate the address's with commas

someone@$nailmail.com, someoneelse@$nailmail.com, noone@$nailmail.com

Add a text input


<INPUT TYPE="text" NAME="FIRST-ITEM" SIZE=12>

Change the size


<INPUT TYPE="text" NAME="FIRST-ITEM" SIZE=25>

since information in html forms is sent as a name/value pair the text input must have a 'name', the value is whatever the user typed in or a value could be given


<INPUT TYPE="text" NAME="SECOND-ITEM" SIZE=25 VALUE="hello world">

input password type is very similar exept it displays the * symbol instead of alpha numeric characters
type someting in
<INPUT NAME="PASS" TYPE="password" SIZE=12>

an example of radio buttons

Subscribe Unsubscribe
<INPUT TYPE="radio" NAME="NEWSLETTER" VALUE="SUBCRIBE" CHECKED> Subscribe
<INPUT TYPE="radio" NAME="NEWSLETTER" VALUE="UNSUBSCRIBE"> Unsubscribe

radio buttons must have a 'value', radio inputs should have the same 'name' because they only give the user one possible option
It is possible to offer the user more options with radio inputs by giving them a different 'name'
Subscribe Unsubscribe
Include attachment Don't include attachment
<INPUT TYPE="radio" NAME="NEWSLETTER" VALUE="SUBCRIBE" CHECKED> Subscribe
<INPUT TYPE="radio" NAME="NEWSLETTER" VALUE="UNSUBSCRIBE"> Unsubscribe
<BR>
<INPUT TYPE="radio" NAME="ATTACHMENT" VALUE="INCLUDE" CHECKED> Include attachment
<INPUT TYPE="radio" NAME="ATTACHMENT" VALUE="NOT-INCLUDE"> Don't include attachment

The checkbox

It may help to think of the checkbox as the opposite of a radio input because the 'name' changes and the 'value' stays the same
option 1 option 2 option 3 option 4

<INPUT TYPE="checkbox" VALUE="YES" NAME="OPTION1" CHECKED> option 1
<INPUT TYPE="checkbox" VALUE="YES" NAME="OPTION2"> option 2
<INPUT TYPE="checkbox" VALUE="YES" NAME="OPTION3" CHECKED> option 3
<INPUT TYPE="checkbox" VALUE="YES" NAME="OPTION4"> option 4

just as it is possible to create more than one 'set' of radio buttons by changing the 'name' additional checkbox catagories or options can be included by changing the 'value'

The textarea


Note that 'textarea' has a closing tag,
<TEXTAREA NAME="COMMENTS" ROWS=10 COLS=20>
</TEXTAREA>

note also that anything typed between the textarea opening and closing tags will be formated exactly as it was typed by most browsers

<TEXTAREA NAME="COMMENTS" ROWS=10 COLS=20 READONLY>
this textarea is 40 'cols' wide
and 10 'rows' in height
</TEXTAREA>

This textareas is READONLY in Internet Explorer

the drop down menu

sometimes known as a pull down menu uses <SELECT> and <OPTION> tags
a 'name' is given to the <SELECT> tag and a value is applied to each <OPTION> tag

<SELECT NAME="INGREDIENTS">
   <OPTION VALUE="EGGS">Eggs
   <OPTION VALUE="PASTA">Pasta
   <OPTION VALUE="SUGAR">Sugar
   <OPTION VALUE="CHEESE" SELECTED>Cheese
   <OPTION VALUE="BREAD">Bread
   <OPTION VALUE="MILK">Milk
</SELECT>

Note that one of the items on the list is 'SELECTED' otherwise the default selected option would be the top one (Eggs)

It's simple to transform the drop menu into a scrolling menu by adding a size to the <SELECT> tag
 <SELECT NAME="INGREDIENTS" SIZE=4>
   <OPTION VALUE="EGGS" SELECTED>Eggs
   <OPTION VALUE="PASTA">Pasta
   <OPTION VALUE="SUGAR">Sugar
   <OPTION VALUE="CHEESE">Cheese
   <OPTION VALUE="BREAD">Bread
   <OPTION VALUE="MILK">Milk
</SELECT>
the <SELECT> tag should have a closing tag </SELECT>

input type hidden

another very useful tag is the 'hidden input type', the information is sent with the form but not displayed in the document

<INPUT NAME="SECRET" TYPE="hidden" VALUE="non-displayed-data">

about next_url
a very special hidden input type uses name="next_url" to send the user to a specific page after the form is submited, however this only works if your server provides cgi formmail

<INPUT NAME="next_url" TYPE="hidden" VALUE="http://www.abc.com/index.html">

when using name="next_url" a full and complete web address should be included in the 'value' part of the tag

submit and reset

one of the most simple form tags of all, this basic format displays 'submit query' on the submit button

<INPUT TYPE="submit"> <INPUT TYPE="reset">

In this next example 'submit' and 'reset' are given a 'value'

 <INPUT TYPE="submit" VALUE="Send">
<INPUT TYPE="reset" VALUE="Clear">

the image submit button
it's easy to substitute an image for the submit button, input type="submit" and input type="image" are interpreted by the browser as one and the same

Send
 <INPUT TYPE="image" SRC="search.gif">
don't forget to include height, width, border and alt attributes

<INPUT TYPE="image" SRC="search.gif" WIDTH="55" HEIGHT="18" BORDER=0 ALT="Send">

input file type

when using input type="file" user's can send you a file from the hard drive on their own computer.
whenever this input is used, ENCTYPE="multipart/form-data" must be used in your <form> tag.

<FORM METHOD=POST ACTION="mailto:someone@$nailmail.com" ENCTYPE="multipart/form-data">
<INPUT TYPE="file" NAME="upload">
</FORM>

It should be noted that older browser tend not to support this type of input and when this input is used in a mailto form, the results can sometimes be unpredictable.

the problem with mailto

unfortunatly mailto will not work for a small number of user's (about 1-5%) especialy those with older browsers
The reliable alternative to mailto is to use a cgi script and many servers give their user's free access, if so the instructions for setting up and using the cgi form handling will usually be found on the server's help or FAQ page
When using a cgi form the action will be set to something like this...

ACTION="/cgi-bin/mail.pl"

there may also be one or two extra hidden input types

<INPUT TYPE=hidden NAME="recipient" VALUE="someone@$nailmail.com">
<INPUT TYPE=hidden NAME="redirect" value="http://www.server.com/formsent.html">

If your server has a cgi bin you may even be able to run your own cgi script, there are many scripts of this kind freely available on the web and if there is no cgi access avilable on your server whatsoever then there are free remotely hosted cgi form handling scripts available for use by anyone

build this form

The complete html code for this mailto form is available here
Also available is a source code for a simple form
 :Your URL
 :Your Username
 :Your E-mail
subscribe
unsubscribe
i can recive email as html
send me a recipt for this email


get the source code

html tutorial


home
html tutorial css tutorial javascript webmaster articles link exchange

html tutorial

make money
from your website
search this site