Go to main content
Bypass navigation bar HTML Reference HTML Tags HTML Tutorials
Bypass language selection
Bypass location bar

Location: Home > HTML Tutorials > Forms in HTML > Page 3

Bypass main content

Forms in HTML (page 3)

Pages:<1234>
Bypass main content

Input elements

Buttons

A button, is adevice primarily designed to perform an action with the form containing it. Actually, there are two basic types of buttons: to submit a form and to reset it (turn all fields to their initial value). There is only other type of button that has no default action (it must be specified with a client side language).

Buttons can be inserted using the HTML input tag (submit, reset and image) or the HTML button element (content buttons).

Submit buttons

This type of buttons automatically submits the form when pressed. Are inserted using the HTML input tag with the "submit" value for the "type" attribute.

Code
<form method="post" action="handler.php">
<input type="submit" value="Submit this form" />
</form>
View

Reset buttons

This type of buttons resets the controls of a form to their initial value when pressed. Are inserted using the HTML input tag with the "reset" value for the "type" attribute.

Code
<form method="post" action="handler.php">
<input type="text" name="text1" value="Default value" /><br />
<input type="checkbox" name="rules" checked="checked" /> I accept the rules<br />
<input type="reset" value="Reset all values to their default" />
</form>
View

I accept the rules

In the previous example you can test the button functionality by changing the values of the elements and pressing the button to reset them to their defaults.

Image buttons

Image buttons work exactly as submit buttons with the only difference that image buttons are visually rendered with the image pointed in the "src" attribute. Other particularity is that they also send the coordinates where the click occurred when the form was submitted (e.g., for an image button named "button1" the coordinates will be sent with the form as "button1.x" and "button1.y").

Image buttons are inserted using the HTML input tag with the "image" value for the "type" attribute.

Code
<form method="post" action="handler.php">
<input type="image" src="/img/p/tutorials/forms/3/submit.png">
</form>
View

Content buttons

Content buttons may be used as submit or reset buttons or may have no preestablished action (depending on the value of the "type" attribute), but their characteristic is that they allow authors to insert content inside of them. This means that a piece of HTML code can be displayed inside of the button (links, paragraphs, bold text, images, etc.).

Code
<form method="post" action="handler.php">
<button type="button">
The <b>HTML button tag</b><br />
allows content.
</button>
</form>
View
Pages:<1234>

Diseño y desarrollo: Latitud29.com

Links and logos|Contact|Beyond HTML|Tools and resources|Sitemap|Webmaster|Donate