HTML 5 Button Controls

HTML5 Basics - Part 24

Forward: In this part of the series, we look at HTML 5 Button Controls.

By: Chrysanthus Date Published: 22 Jul 2012

Introduction

This is part 24 of my series HTML5 Basics. I assume you have read the other parts of the series before arriving here. The links of the other parts of the series are given at the end of this tutorial. In this part of the series, we look at HTML 5 Button Controls. The emphasis here is on buttons that have the button rectangle shape.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent, etc), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Button Controls
There are three types of button elements for HTML5 Forms. They are called the Reset Button, the Submit Button and the Push Button. You need the Reset and Submit Buttons for the ordinary Form.

The Reset Button
As the user is filling the HTML form, he can make a mistake. The purpose of the Reset button is to clear all the controls so that the user can start all over again. When the user clicks the Reset button, all the values of the controls are replaced by their initial values. In the case where there was no initial value, the control becomes blank. In the simplest form, the tags for your Reset Button are:

<button type="reset">Clear</button>

The name of the tag is, button, in lower case. The end tag has to be there. There is a type attribute whose value most be “reset”. The content of the button above is “Clear”. This is what appears on the button at the browser. That is the only thing you can change in your own reset button. Use a word that will indicate to the user that he can erase (and reset) all what he has typed. The start tag can have a value attribute with a value, but that will not normally serve any purpose.

The Submit Button
After you have filled you Form and you are satisfied, you click the Submit button to send the data set (all form information) to the server. The function of the Submit button is to send the data set to the server. In the simplest form, the tags for your Submit Button are:

<button type="submit">Send</button>

The name of the tag is, button, in lower case. The end tag has to be there. There is a type attribute whose value most be “submit”. The content of the button above is “Send”. This is what appears on the button at the browser. That is the only thing you can change in your own submit button. Use a word that will indicate to the user that clicking it will send the data set to the server. The start tag can have a value attribute with a value, but that will not normally serve any purpose.

A form should have a Reset and a Submit button.

The Push Button
The push button is the third type of button. It is normally used with programming at the web page. I will address push buttons in some other series.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

HTML 5 Button Controls

HTML5 Basics - Part 24

Introduction

Related Links

Comments