Website resource guide, web development,text form buttons

A form with nothing in it is pretty boring, every element you can create within a form, starting with simple, textual buttons.

The <INPUT> tag

It is an unfortunate design flaw that almost everything you can create within a form is handled by a single tag: <INPUT>. Depending on its attributes, the <INPUT> tag creates everything from buttons to images to text fields to radio buttons.

The defining attribute of the <INPUT> tag is the TYPE attribute. This attribute defines the element created by the <INPUT> tag; other attributes control the appearance and behavior of the element.

Creating submission buttons

In the original HTML form model, buttons were used to submit the form data to the server for processing. Thus, to create a button in a form, you use the <INPUT> tag with the TYPE attribute set to submit. To create a simple button:

<FORM>

  <INPUT TYPE="submit">

</FORM>

What you get looks like this:

To change the label on the button to something more useful, use the VALUE attribute:

<FORM>

  <INPUT TYPE="submit" VALUE="Order Now!">

</FORM>

You'll get something more personal:

When you press this button, your form data is transmitted to the server for processing. The fact that you clicked the button to submit the form is not. If you want the server to know which was button was pressed, you'll need to add the name attribute. The value of the name attribute is the variable name that will be passed to the server, with its value set to whatever you specified for the value attribute.

This is all clearer in a simple example. Suppose you have a form for editing data, with three functions: add, delete, and change. You can create three buttons for these actions, like this:

<FORM>

  <INPUT TYPE="submit" VALUE="Add" NAME="thing_to_do">

  <INPUT TYPE="submit" VALUE="Delete" NAME="thing_to_do">

  <INPUT TYPE="submit" VALUE="Change" NAME="thing_to_do">

</FORM>

The form looks like this:

More importantly, if you press the "Add" button, a parameter named thing_to_do is passed to your application with its value set to "Add." Similarly, pressing the other buttons will pass thing_to_do to your application with a value of "Change" or "Delete." Within your program, you need only check the value of thing_to_do to know what to do with the rest of the form data.

These kind of submission buttons are only one way to submit a form for processing, but they are by far the most commonly used. If you want to master forms, make sure you understand how to create submission buttons, alter their appearance, and enable them to transmit their value to the server to control the form processing.

Reset buttons

In addition to submission buttons, most HTML forms provide a reset button. This button never submits the form to the server for processing, and can never contribute a value to the form data being transmitted. Instead, the reset button resets all the form elements to their original, default values. You should always try to provide a reset button in your forms, so that users that get confused or enter the wrong data can simply hit the reset button and start over.

You create a reset button with the <INPUT> tag, of course, but you must set the TYPE attribute to reset. For example, using:

<FORM>

  <INPUT TYPE="reset">

</FORM>

Creates:

Like a submission button, you can change the text in a reset button, so that;

<FORM>

  <INPUT TYPE="reset" VALUE="Start Over">

</FORM>

Produces:

Since reset buttons do not submit the form, adding a NAME attribute to a reset button has no effect.

Other buttons

You are never limited to just textual buttons in HTML forms. Using the <INPUT> tag with a different set of attributes, you can create a graphical button using any image you want.

<< BACK

Text Form Button Tags

The <INPUT> tag