Of the rich user interface websites you have seen, you could hardly have managed to see a normal button.

Just a small round about on html buttons, there are three buttons.

1. Submit <input type = “SUBMIT”> : This is a standard button, you might see, when you find forms. This is a button, on clicking which the form is submitted naturally. NO javascript required. The text on the submit button can be controlled by the value attribute. However, with a rich user experience styled web page, the color and style of the button still remains awkward.

2. Reset <input type = “RESET”>
; : This button is used only on the client side and can be used to set all input fields in the form to its default value. Again the text on the button is controlled by the value attribute. Similar to the submit button, this again cannot have its style tuned.

3. Button <input type = “BUTTON”> : This is another and less used input field, which is primarily used to javascript functions. Alternatively you may also use this as a submit button by using on the onclick attribute. Below is a small example on how to use buttons.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE> HTML button usage </TITLE>
<script language = “javascript”>
function validate()
{
var query = document.getElementById (”q”).value;
if (query)
{
document.forms[0].submit();
}else
{
alert (’Enter query string and click on search’);
}
}
</script>
</HEAD>
<BODY>
<FORM action = “http://google.com/search” METHOD = “GET”>
<INPUT TYPE=”text” id=”q” NAME = “q”>
<INPUT TYPE=”button” onClick = “validate()” value = “search”>
</FORM>
</BODY>
</HTML>

You can see how the above code works below.