Forms - Adam's HTML Planet - Tutorials and Tips on how to create websites using HTML

	Sign In Sign-Up

Forms
list of tutorials		next tutorial

This page is about how to create and use Forms in HTML

HTML forms are a great way to provide some interactivity in your site. Basically, you can set up a form [within another page or on its own page] which the visitor to your site can fill in. When they hit the 'Submit' button the results of the form are emailed to you. You can then get back to them direct, use those details to make changes to your site or post them for others to see - of course that's the option that will be most popular with your visitors - who doesn't like to see something of their own input on the web?. Forms can get quite complex, but a basic form is simple to set up and can be very successful in getting feedback from visitors or making your site more interactive.

More complex forms which write the results direct to the page are done by the magic of CGI [Common Gateway Interface] scripts which are only available to you if your Internet Hosting Provider supports this. Often, especially with the 'free' hosts, they don't bother with CGI scripts as they are open to abuse and have 'hackability'. Several of the tutorial sites listed on my links page have further details about CGI forms, along with free scripts, if you're interested.

Open the first, basic file we created in this series of tutorials [basic1.htm] OR download the text file from the downloads page OR copy the text directly.
Make the changes and additions indicated below - I've split the various sections with Horizontal Rules to make it easier to see
Save the file as forms.htm
Preview the results in your browser
Test it by filling it in and sending it to yourself

<HTML>
<HEAD>
<TITLE>Forms Page</TITLE>
</HEAD>
<BODY>
Please fill in this form and email it to me by hitting the 'submit' button when you're finished
<FORM METHOD=POST ACTION=MAILTO:emailaddress@whoever.com ENCTYPE="text/plain"><BR>

<FONT SIZE="+1">What's your email address? </FONT><BR>This information will NOT be used for any other purpose than my own records <BR>
<INPUT TYPE="text" NAME="email" SIZE="40" MAXLENGTH="40"><P>

<FONT SIZE="+2"> How do you rate this page? </FONT><BR>
<INPUT TYPE=RADIO NAME="rating" VALUE="Very Good" Checked> Very Good <BR>
<INPUT TYPE=RADIO NAME="rating" VALUE="Good"> Good <BR>
<INPUT TYPE=RADIO NAME="rating" VALUE="Average"> Average <P>

<FONT SIZE="+1">Why are you learning to code HTML? </FONT> <BR>
<INPUT TYPE=CHECKBOX NAME="hobby" VALUE="YES"> As a hobby <BR>
<INPUT TYPE=CHECKBOX NAME="info" VALUE="YES"> To inform people of something <BR>
<INPUT TYPE=CHECKBOX NAME="service" VALUE="YES"> To provide a service <BR>
<INPUT TYPE=CHECKBOX NAME="work" VALUE="YES"> As part of my job <BR>
<INPUT TYPE=CHECKBOX NAME="sucker" VALUE="YES"> Because of a masochistic streak a mile wide! <P>

<FONT SIZE="+1"> What do you like most about coding HTML? </FONT><BR>
<SELECT NAME="What I like about HTML">
<OPTION VALUE="control"> Complete control over the code <BR>
<OPTION VALUE="ease"> The ease with which I've picked it up<BR>
<OPTION VALUE="flexibility"> The way I'm not tied to any one program<BR>
<OPTION VALUE="everything"> Everything!<BR>
</SELECT><P>

<FONT SIZE="+1">Any additional comments?</FONT><BR>
<TEXTAREA NAME="COMMENTS" ROWS=6 COLS=50> Type your comment here </TEXTAREA> <P>

</FORM> </BODY>
</HTML>

Let's look at this in a bit more detail.

<FORM METHOD=POST ACTION=MAILTO:emailaddress@whoever.com ENCTYPE="text/plain"> </FORM>: These are the opening and closing FORM tags. Obviously, you would substitute your email address for the dummy text :)
<INPUT TYPE="text" NAME="Name" SIZE="40" MAXLENGTH="40">: This is a plain text box. You have to specify a size in characters. Note that with this, and the other FORM tags that you have to give a NAME to elements. This is the label that will be displayed when the form is emailed to you. In this case, because we're asking for the person's name I've called it 'name'
<INPUT TYPE=RADIO NAME="rating" VALUE="Very Good" Checked>: This is the code for a radio button. A choice of options can be offered with only one able to be chosen at a time. This makes it good for either/or type choices. This tag has the NAME attribute and also a VALUE attribute. This gives some feedback for the chosen option i.e. the 'rating' would be 'Very Good'. You'll notice that the first option is already checked, which is indicated by the attribute 'Checked' in the first radio button tag
<INPUT TYPE=CHECKBOX NAME="below 1 year" VALUE="ticked" >: This is a checkbox - again offering a choice of options but different from the radio button in that more than one choice can be made. Again NAME and VALUE attributes are there
<SELECT NAME="What I like about HTML"> </SELECT>: These tags make a drop-down list of options. It goes along with the <OPTION VALUE="everything"> tag which specifies the actual choices
<TEXTAREA NAME="COMMENTS" ROWS=6 COLS=50> Type your comment here </TEXTAREA>: This gives a larger textbox in which you can specify the number of rows and colummns to give a 'comments'-style box
<INPUT TYPE=SUBMIT VALUE="SEND"> --- <INPUT TYPE=RESET VALUE="RESET">: These are the Submit and Reset buttons which send the data or clear the form. The VALUE attributes can be anything you like

Go up to the top of the page to choose where you go next