|
<INPUT> TAG BASICS
When you create forms you need to define your input type. These can range from text boxes to push buttons All are defined by the <input> tag All input tags have the following basic structure for example <input type="text" name="email" value="enter your email"> Gives rise to this text box
The type attribute defines the type of of input (here a text box). The name attribute defines the name of the value that is sent on by the form. Any data entered in the box is defined as a value of "email". So when when someone enters data in the box the data entered is given a name of "email" When the form is sent on the data will be in the form of name=entered value e.g. email=joe.bloggs@joeserver.com The value attribute defines the default value of name attribute (here "enter your email"). In text boxes this is shown Here's another example this time defining a simple button <input type="button" name="you pick" value="press me">
This time type defines a button entry Again the name attribute defines the data name of the value that is submitted by the input (here "you pick") The value attribute defines the default value of the input, but in this case it appears as the name on the button (if this button were part of an actual form you would submit data with the name of "you pick" and a value of "press me") Now there are 2 special types of buttons used with forms
The submit button is used at the end of forms to send data on. It is defined by <input type="submit" name="submit" value="submit"> You can actually set the name & value attributes to your own choice. When you hit the submit button the form is sent (via the form handler for processing. The reset button is used to clear info from a form (back to default value if set). Like the submit button you can set its name and value attributes as you want <input type="reset" name="reset" value="reset"> Okay that's the basics. On the next page we look at all the different form input types and some additional attributes you might want to use. But before that here's a sneaky way to use form inputs and event handlers (for more on these see our event handler tutorial)
This coded as follows <input type="button" name="button" Okay nothing really new here. All we've added is an event handler (onClick="alert('hello');") which causes an alert box to appear with the value of hello in it Okay this isn't that useful on it's own but serves as an example of how to use form inputs. We'll later combine it with a more impressive form Lets look at all the different form inputs and some useful additional attributes
This page originally © 2002 A.Duncan BWRS |
