with an image button

Buttons with images similar in action Submit button, but represent a pattern. It extends the capabilities of design refinements on registration forms. When the user clicks on the image, the form data is sent to the server and processed by the program specified by the parameter action tag <FORM>.

The image is created in the form as follows.

<input type = "image" Settings>

field parameters listed in the table.

Parameter Description
name

Name field. Designed to form handler, so that it can identify the field.

src Image URL (the path to the image file).
align Alignment field. Possible values: top, middle, bottom, right, left, texttop, baseline, absmiddle, absbottom. The result of their use is the same as that of the image.
width The width of the image.
height The height of the image.
vspace Vertical padding around the top and bottom of the image in pixels.
hspace The horizontal space around the image on the left and the right, in pixels.
border It specifies the thickness of the border around the image in pixels.

Create a button with the image shown in Example 1. Table is used to align the elements.

Example 1: Use the buttons with the image

valid HTML
<DOCTYPE HTML PUBLIC! "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> button with the </ title>
</ Head>
<Body>

<Form action = "/ cgi-bin / handler.cgi">
<Table>
<Tr> <td colspan = "2"> Enter your name: </ td> </ tr>
<Tr>
<Td> <input type = "text" size = "25"> </ td>
<td> <input type = " image" src = "/ images / imgbutton.gif"> </ td>
</ Tr>
</ Table>
</ Form>

</ Body>
</ Html>

As a result, we obtain the following (see Fig. 1).

Fig. 1

Fig. 1. button to submit the form to the server

© Policy Copyright www.htmlbook.ru