Easy Form Design
By Stephen Bucaro
In this article, I show you how to code your own html submission forms. Maybe
you are using a WYSIWYG web page design tool and you can't get your forms to work
the way you want them to. Maybe you want to show a web page designer how you want
your form to look, but you don't have time learn a bloated program. Maybe you
hand code all your web pages in a simple text editor like I do. If any one of these
describes your situation, this article is for you.
Before I get into the specifics of form design, I want to explain one very important
thing. A form is static html code and therefore can't do much on its own. No matter
how pretty your form looks, it needs another part, the active programming code part
to do something with the information that the user enters into the form.
JavaScript is a programming language that can run on the client side (in the users
browser) to do something with the form information. JavaScript is great for performing
client side validation of the form information. But the only way client side JavaScript
can get the information out of the form is to send it to the users email program.
To get the information out of the form and onto the server you need a language that
can send the information to the servers Common Gateway Interface (CGI) or to the Web
servers Application Program Interface (API). CGI programming is usually done with
Perl script. API programming is usually done with ASP (Active Server Pages).
Before putting time into designing your form, first decide what you want to do with
the information submitted by the form. If you only want to send the information to
an email box, then it's very possible that you can write your own program to work
with the form. At the end of this article, I will give you some tips to get you
started with your program.
If you want to write the information to a file or a database, that will require
some serious programming that is beyond the scope of this article. However, there
is nothing wrong with designing a form the way you want it, and then handing it
over to a programmer for active programming code part.
The Text Element
When you design a form, the html code for the entire form is placed between the
<form> and </form> tags. Inside those tags, you might place a form
"element"; for example, a text box. A text box would be coded with the html
<input type="text">. Shown below is the html code for this simplest form.
<form>
Name: <input type="text">
</form>
Below is shown the result of how this code would appear on a web page.
The form tag usually contains two attributes. The action attribute specifies the
name of the file containing the active programming code. The method attribute specifies
how the information should be sent. The method can be either the "post" or "get"
method. A form usually contains a Submit button element. When the user clicks on the
Submit button, the action element is executed. Below is more complete form example.
<form method="get" action="program.asp">
Name: <input type="text">
<input type="Submit">
</form>
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
Follow @Stephen Bucaro
General Web Design
