There are several different kinds of buttons. Some of them require a script that performs some action when the user pushes the button. There are a number of languages that can be used to write these kinds of scripts, but we're not going to talk about them now.
Command buttons
This causes something to happen when it is selected, such as running a JavaScript program.
<input type=”button” value=”text” />
where text is the text that appears on the button.
Submit and Reset buttons
A "submit" button submits a form to the server for processing when it is clicked and a "reset" button resets a form to its original values.
<input type=”submit” value=”text” />
<input type=”reset” value=”text” />
where text is the text that appears on the button.
Note: You can specify name and id attributes for all three of these button types, but they are not required.
Buttons that are created this way have no way to control their appearance other than specifying the text that appears. If you want greater artistic control over the designs of your buttons you can use the "button" element.
<button name=”name” id=”id”
value=”value” type=”type”>
content that appears
</button>
where the "name" and "value" attributes give the name of the button and the value that is sent to the server, "id" is the id and "type" is the type of button (reset, submit, or button).
File buttons
A "file" button is used to select files so that their contents can be submitted for processing to a program. This displays the location of the file, not its contents.
<input type=”file” name=”filename” />
Here is an example of using these buttons:
<form name="example10" id="example10">
<table width="50%">
<tr>
<td>First Name</td>
<td><input type="text" name="first10"
id="first10"/> </td>
<td>Last Name</td>
<td><input type="text" name="last10"
id="last10"/> </td>
</tr>
</table>
<input type="submit" value="Push to submit"
/>
<input type="reset" value="Clear" />
<input type="file" name="filename" />
</form>
You can include an inline image in your forms which can act like submit buttons so the user can click the image to submit a form:
<input type=”image” src=”url” name=”text” value=”text” />
where "url" is the name and location of the image and "name" is the name assigned to the image. When the form is submitted to a server side program, the coordinates of where the user clicked within the image are attached to the image's name and value in like name.x and value.y. X and y are the x and y coordinates in the image.
Sometimes, your form will need to have information sent to the server that is predefined, but that users should not be able to change. This is when you use a "hidden" field. The field is added to the form, but not displayed. The format looks like this:
<input type=”hidden” name=”name” id=”id” value=”value” />
When your form has all the elements it needs, it's time to go back and specify where to send the form data and how to send it. You do this by adding the "action", "method" and "enctype" attributes to the form element:
<form action=”url” method=”type”
enctype=”type”>
contents
</form>
where "url" specifies the file name and location of the program that will process the form, "method" tells how the browser should send the data to the server and "enctype" gives the format of the data stored in the form's field.
There are two choices for method: "get" or "post". Get is the default; it appends the data to the end of the url specified in the action attribute. Post sends the data in a separate data stream, which is more flexible and so is the preference of most web designers. It isn't important that you understand these, just know that there are two possibilities.
There are three common choices for the enctype (which determines how the form's data should be encoded). They are application.x-www-form-urlencoded which is the default, multipart/form-data which is used when sending files to a server, and text/plain which has no encoded and the data is sent as plain text.
You can use the last when using the mailto action that sends the data via an e-mail client. This doesn't work with older versions of browsers, and the user must have an e-mail program that works with a POP account, and the information is not encrypted so anyone can view it. To do this, you need:
<form action=”mailto:name@domain.ext”
method=”post” enctype=”text/plain”>
form content
</form>
Most users move through a form by using the tab key which moves the cursor from one field to the next in the order that the fields appear in the html. You can change this by adding the "tabindex" attribute:
<input name=”name” tabindex=”1” />
When the fields have tabindexes assigned, the cursor moves through the fields in order from smallest to largest. Fields with a 0 or negative value are omitted from the tab order.