to home page

BWRS
SEARCH

HOMETUTORIALSLINKSFORUMGLOSSARYNEWS
 

FORM BASICS FOR HTML

 Basics

Adding forms with HTML is comparatively easy

There are 2 <tags> involved just like we've seen there are 2 parts to every form

They are the <form> and <input> tags

Here's a simple example. This opens up another window with our home page

Okay simple enough but it allows us to look at the code

<form method="get"
action="http://www.fluffbucket.com/" target="_blank">
<input type="submit" name="button"
value="Basic Web Resources Site">
</form>

This is a very basic example but look at it

The two tags serve different purposes. The <input> tag defines the button you see (it's appearence in value) and what it does (it is a submit button defined by type="submit"). Essentually it is a data input point.

We've inclued the name attribute for completeness as in larger forms it defines a value to the selection of this button (here "button")

Note there is no </input>

The form tage defines what the form does with the data. The method attribute defines how it is sent on (more on this later) whilst the action attribute defines where it is sent too. In this form's case the submission triggers the form to send info and get/retrieve the webpage www.fluffbucket.com/. We've added a target attribute to make it open in another window

Many forms are quite complex and you can have numerous inputs within one form. You can subject inputs to most text alignment rules as well (you can even put them into tables)

Have a look at this form. Both buttons will open our home page


Can you work out the code (answer at the bottom)

We'll come back to look at the <form> tag later but lets look at the various input types next

 

back to top

INTRO
TO
FORM

back to intro to formsForm fields

FORM INPUTS

This page © 2002 A.Duncan BWRS
revised © 2003

 

The answer is

<form method="get"
action="http://www.fluffbucket.com/" target="_blank">
<input type="submit" name="button"
value="I can open the home page">
<input type="submit" name="button2"
value="So Can I">
</form>

name values are not critcal