Buttons using HTML tags




What is it?

An important part of the web technology is buttons, doing someting. There is several ways of creating something clickable, thus executing a command. These are shown on other pages on the site. But what about a completely ordinary button? In essence, there is two ways of doing this.

The standard buttons that are possible to make with this technique are very limited in terms of playing around with the looks. If you need something with a bit more swing, you need to use a CSS3 technique instead.





The BUTTON tag

For HTML we have a tag called BUTTON. It works like the major part of the tags in HTML, having a start and end tag. When you click it, it runs a JavaScript using the attribute ONCLICK. If we try to create a button showing an alert box, the code looks like this:

<BUTTON TYPE="button" ONCLICK="alert('Hello!')">Click me!</BUTTON>

On the screen, it looks like this:



The button text can be styled as you like, including pictures, e.g.



You can change the color of the button, but the result isn't all that good. If we try making the button light green using background-color:lightgreen, teh result looks like this:



As seen, the main surface with the text turns light green, but the four edges giving the 3D effect with light and shadows, are still white and grey, so you end up with somthing that looks wrong.


BUTTON has a number of specific attributes, many of which have appeared as a part of HTML 5.

AttributeValuesEffect
AUTOFOCUSautofocusSpecifies that this is the button being focused on, when the page is shown.
DISABLEDdisabledSpecifies that the buttion should be disabled.
FORMform_idSpecifies one or more forms, that the button belongs to.
FORMACTIONURLSpecifies where the data from the form is being sent. Only for TYPE="submit".
FORMENCTYPEapplication/x-www-form-urlencoded
multipart/form-data
text/plain
Specifies how form-data should be encoded, before being sent to a server. Only for TYPE="submit"
FORMMETHODget
post
Specifies how to send form-data (i.e. which HTTP metod to use). Only for TYPE="submit"
FORMNOVALIDATEformnovalidateSpecifies that the form-data should not be validated on submission. Only for TYPE="submit"
FORMTARGET_blank
_self
_parent
_top
framenavn
Specifies where to display the response after submitting the form. Only for TYPE="submit"
NAMEnavnSpecifies a name for the button
TYPEbutton
reset
submit
Specifies the button type
VALUETextSpecifies the button's start value







INPUT and FORM tags

The other way of creating buttons is the INPUT tag, which is used with the FORM tag. Here the text on the button is specified using the attribute VALUE, and you don't have any ONCLICK. Instead you use TYPE="submit", and in the FORM tag you have an attribute called ONSUBMIT where you specify what happens when the button is pressed. If you don't specify anything for VALUE, the browsers have a standard phrase they add. The phrase being used depends on the browser and end browser's language, so specifying VALUE is advisable.

As code, it looks like this:

<FORM ONSUBMIT="alert('Hello')">
<INPUT TYPE="submit" VALUE="Click here!">
</FORM>

On the screen, it looks like this:





Changes in color is the same as the BUTTON tag. You can change the face but not eh edges, so the result isn't very good.

In principle you can't insert pictures on the buttons, but with a small workaround involving STYLE and the variables for background-image, you can do something. Here it is the image from the BUTTONS example, inserted as a background.

As code, it looks like this:

<FORM ONSUBMIT="alert('Hello')">
<INPUT TYPE="submit" VALUE="&#160;&#160;&#160;Click here!" STYLE="background-image:url(../Graphics/Chapter-Icon.gif); background-repeat:no-repeat">
</FORM>

On the screen, it looks like this:





Here, of course, you can finetune the layout, by using the other variables for STYLE, so you get exactly the look you want.