HTML 5 Non-Text Input Controls

HTML5 Basics - Part 19

Forward: In this part of the series, we look at HTML 5 Non-Text Input Controls.

By: Chrysanthus Date Published: 22 Jul 2012

Introduction

This is part 19 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 Non-Text Input Controls. In the previous part of the series, we saw input controls, which would receive text of some kind (e.g. email). Here we shall look at the input controls, which do not receive text; they are buttons of some kind.

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.

Check Box
A check box is a small square box. It can have a tick or be blank. If it is blank, when the user clicks into it, it displays a tick. If it has a tick, when the user clicks into it, the tick would be removed. When it has a tick we say it is checked. When it does not have a tick it is not checked. This is an example of a check box tag:

        <input type="checkbox" name="chkBx1" value="banana">

The check box is an input element whose type value is “checkbox”. All controls should have a Name (attribute).

The check box is used in situations where the user has to indicate Yes or No; or anything that boils down to Yes or No. There are synonyms to Yes or No: you have True or False and On or Off; you will see examples of this as you carry on with programming.

In browser vocabulary, when a check box is checked, we say it is in the On state. When it is not checked, we say it is in the Off state. Synonyms for On/Off are Yes/No or True/False as mentioned above. In browser forums On/Off is common.

Without an initial value, the check box comes blank. The initial value results in a tick, since the check box can either have a tick or be blank (no tick). The initial value of the check box comes as an attribute without value. The above tag is modified to have the initial value as follows:

        <input type="checkbox" name="chkBx1" value="banana" checked>

The attribute without value is, checked; it has to be in lower case. If you do not want an initial value, do not put the checked attribute. There is no equivalent attribute (or value) for the situation where the check box is not checked. So if you do not want the check box to be initially On (have a tick), simply omit the checked attribute.

Now in the above tag, there are two values: the first one is “banana” for the value attribute; the second one is, checked for the On/Off state attribute. Now, when you click the Form Submit button, if the check box has a tick as a result of the fact that the user clicked it or the checked box had it initially (checked), then the value “banana” will be sent to the server; if the check box does not have a tick when the Form is submitted, then the value “banana” will not be sent to the server. I hope you see the difference between the two values. As a rule, it is the value for “banana” that is called value. That for checked is called a Boolean attribute.

The input element is a single tag element that can take different type values, to result in different elements. We have seen three cases of this; there are other cases.

Remember, all HTML5 tag and attribute names must be in lower case. Also remember that all Name attributes must start with a letter and should not have a space.

Try the following code where the first two check boxes are not initially On and the next two are initially On.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <form action="http://www.somewebsite/dir/file.exe"  method="post">
        <input type="checkbox" name="chk"> <br>
        <input type="checkbox" name="chk"> <br>
        <input type="checkbox" name="chk" checked> <br>
        <input type="checkbox" name="chk" checked>
    </form>
</body>
</html>

Click each of the check boxes to toggle its On/Off state at the browser; click each box several times.

Radio Button
When a user has to choose one option from several options, you the web site designer provides him what is called, Radio Buttons. A radio button is a circle that can acquire a dot or be blank (not have a dot). The behavior of a radio button is similar to that of a check box. However, unlike the check box that can exist alone, a radio button exists with other radio buttons, so that the user can choose between different options. Radio buttons exists in groups. Only one option in a group can be chosen (clicked) at any time. Try the following code first before we continue with the explanation:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <form action="http://www.somewebsite/dir/file.exe"  method="post">
         First Group <br>
        <input type="radio" name="rdA" value="aa">
        <input type="radio" name="rdA" value="bb">
        <input type="radio" name="rdA" value="cc"> <br><br>
        Second Group <br>
        <input type="radio" name="rdB" value="pp">
        <input type="radio" name="rdB" value="qq" checked>
        <input type="radio" name="rdB" value="rr">
    </form>
</body>
</html>

There are two groups of radio buttons in the code. Radio Button elements of the same group have the same name. It is the common name that keeps a set of radio buttons as a group. In a group only one radio button can have a dot. The radio button is an input button with the type value of, radio.

Only one radio button in a group can be checked. That is, only one radio button in a group can have a dot. You can set the initial value of only one radio button in a group. You use the attribute without value; this attribute is, checked. There is no equivalent attribute or value for Not Checked; so if you do not want the initial value to be checked, do not put any attribute for that purpose.

In the above code, the second group has the middle radio button checked. Try the above code again and click each radio button to toggle its display. Click each button several times. Note that only one radio button in a group can have the dot.

A radio button that has a dot (checked) is said to be in the On state. A radio button that does not have a dot is said to be in the Off state.

Check Boxes and Radio Buttons Revisited
When the Form is submitted (sent to server), only the value of the check box or radio button that has the On state is sent to the server. So, all radio buttons in a group can have the same name and all check boxes in a group can have the same name. The grouping of check boxes is not obligatory, but the grouping of radio buttons is obligatory as only one radio button in a group can be clicked. With check boxes, many of them can have the On state. However, with radio buttons, only one in a group can have the On state.

Information sent to Server
The data set is all the useful information of the Form. Note: each control of the Form must have a name and a value. The value that matters is the current value. If the initial value is not changed during the user’s session, it becomes the current value. The data set consists of all the name/value pairs of the controls. This applies to all controls, not just input controls. When the user clicks the form submit button, the data set (all of it) is sent to the server.

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

Chrys

Broad Network

HTML 5 Non-Text Input Controls

HTML5 Basics - Part 19

Introduction

Related Links

Comments