Creating form buttons

Creating a push button

To create a push button, use the following HTML tag:

<input type="button" value="text" />

where text specifies the text that appears on the button. By themselves, push buttons perform no action, you need to write a script that runs whenever the button is clicked. We will consider this later.

Another alternative to create buttons is to use the <button> tag (which requires a closing one):

<button type="option" name="name" value="text">
    button text and HTML tags
</button>

where the type attribute specifies the button type (submit, reset, or button), name and value attributes specify the name of the button and the value sent to a CGI script. The default value for the type attribute is "button". Within the <button> tag you can place whatever HTML tags you wish to format the button's appearance. In particular, you can put an image to appear on the button, as it is shown in an example below.

Examples of buttons:

LayoutHTML tags
<input type="button" value="Click me" />
<button type="reset">
<img src="top.gif" />
</button>

The second example involves online image top.gif:   




Creating a submit button

A submit button is a button that submits the form to the CGI scripts. To create a submit button, use the following HTML tag:

<input type="submit" value="text" />

where text (optional) specifies the text that appears on the button. If no text is specified, the default text "Submit Query" will appear on the button.

Examples of submit buttons:

LayoutHTML tags
<input type="submit" value="submit" />
<input type="submit" />




Creating a reset button

A reset button is a button that resets the form to its original (default) values. To create a reset button, use the following HTML tag:

<input type="reset" value="text" />

where text (optional) specifies the text that appears on the button. If no text is specified, the default text "Reset" will appear on the button.

Examples of reset buttons:

LayoutHTML tags
<input type="reset" value="Reset form" />
<input type="reset" />