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 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:
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.
<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.
| Attribute | Values | Effect |
| AUTOFOCUS | autofocus | Specifies that this is the button being focused on, when the page is shown. |
| DISABLED | disabled | Specifies that the buttion should be disabled. |
| FORM | form_id | Specifies one or more forms, that the button belongs to. |
| FORMACTION | URL | Specifies where the data from the form is being sent. Only for TYPE="submit". |
| FORMENCTYPE | application/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" |
| FORMMETHOD | get post | Specifies how to send form-data (i.e. which HTTP metod to use). Only for TYPE="submit" |
| FORMNOVALIDATE | formnovalidate | Specifies 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" |
| NAME | navn | Specifies a name for the button |
| TYPE | button reset submit | Specifies the button type |
| VALUE | Text | Specifies 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:
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:
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.
As code, it looks like this:
<FORM ONSUBMIT="alert('Hello')">
<INPUT TYPE="submit" VALUE="Click here!">
</FORM>
<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="   Click here!" STYLE="background-image:url(../Graphics/Chapter-Icon.gif); background-repeat:no-repeat">
</FORM>
<INPUT TYPE="submit" VALUE="   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.