intro |  html |  css |  design |  scripting |  dhtml |  server 

intro
html
css
design
scripting
dhtml
server



This page covers:
      Form Basics
      Processing Forms
      Form Text Boxes

Form Basics

Forms are used for gathering information from web visitors. You may want to add a guestbook, a survey, or ask visitors to register, among other things. You can have the contents of the form mailed to you or as you'll see later, have the input processed in other ways.

The form element starts and end with the <FORM></FORM> tags. The opening <FORM> tag needs a couple other important elements - METHOD and ACTION - NAME can be used to name the form, but isn't as important.

Here's what the form tag should look like: <FORM NAME="Test_Form" METHOD="post" ACTION="mailto:webmaster@hardcoder.com">. The METHOD tag tells the form how to send the form data (using which HTTP method) - the METHOD attribute takes either get (the default) or post. If you use get, you'll see your form variables and values in the URL after you hit the submit button. The post method includes the form information in the body of the form. The ACTION attribute tells the form how to process the form.

Processing Forms

The ACTION element of the form is an important one. It tells the form how to process its contents once someone has filled it out. The simplest ACTION tag is mailto:email@host.com. This emails the forms contents to the email address, but does not neccessarily work across different browsers. For example, on my machine in Internet Explorer, filling out a form with a mailto action tag pulls up my email client and doesn't send the form contents. But this will vary depending on how the user has his/her browser and default email client configured.

Most places that host web pages allow access to a cgi-script that will process your form for you. Read up on the user docs and find out if you're web page hoster does. If you want to find out how to process forms using ASP or PHP, please visit their respective sections.

Form Text Boxes

Text boxes allow users to fill in whatever data is neccessary and are usually the most frequently used form elements. The text and textarea INPUT types create the following text boxes.

Input Type

Attributes

TEXT

name: Name of the text field
size: Length of text field (in number of characters)
value: (optional) Value in text field box

Example:


Use the value field to add a default value:

CODE:

<INPUT TYPE="text" NAME="test" SIZE="25" VALUE="">
To add default text:
<input type="text" name="test" size="25" value="Default text">

Input Type

Attributes

TEXTAREA

NOTE: Needs a closing tag </TEXTAREA>
name: Name of textarea
cols: Size of textarea in columns
rows: Size of textarea in rows
value: (optional) Value in textarea box

Example:

CODE:

<TEXTAREA NAME="Text_Box" COLS="20" ROWS="4" VALUE=""></TEXTAREA>



 
hardCoder.com © 1999-2011. all rights reserved. // site created and maintained by kathy ahn