Broad Network


Commonly Used Form Controls in HTML

Basics of HTML 5 - Part 13

Foreword: In this part of the series I explain the use and operation of the commonly used Form controls in HTML.

By: Chrysanthus Date Published: 3 Apr 2015

Introduction

This is part 13 of my series, Basics of HTML 5. In this part of the series I explain the use and operation of the commonly used Form controls in HTML. You should have read the previous parts of the series before reaching here, as this is a continuation.

Almost all websites have forms. When you fill the form and click the submit (send) button, the data goes to the server.

The Form Element
Let us look at the basics of the code of the Form element first. This is an example:

<form action="http://www.somewebsite/dir/file.exe"  method="post">

</form>

In this example, there is only the Form start tag and the Form end tag; there is no content in this Form. We shall look at what goes inside the Form element, below. There are two attributes in the start tag. The first one is called the action attribute. Its value is the URL of the program (file) at the server that will process the data set (complete form information) sent by the browser from the client.

The second attribute in the start tag of the form is called the method attribute. Its value is either the string, “post” or the string, “get”. With the “get” value, you would see the data set text in the address bar of your browser when the form is sent. However, with the “post” value you never see the data set text at the address bar. The “post” value offers better security to your data. The “get” value also has the disadvantage that the amount of data that can be sent is limited. The tag and attribute names of the form element should be in lower case.

Let us turn our attention to some of the things that are inside the form element.

Controls
The user interacting elements that go inside the Form element are called Controls. We shall learn the basics of the input text controls in this tutorial. Each control should have a bit of the data set information; that is, the user should type something in each input text control. Each of these controls can have an initial value; that is, as soon as the web page is loaded, the user sees the initial value on the web page. What the user types into the control is called the current value, which replaces the initial value.

Input Text Controls

The Text Input
The text input control allows you to type in text consisting of one word or a phrase. The following peace of code describes the element:

        <input type="text" name="firstName" value= "" size="30">

This is a single tag element. It begins with the tag name, input, in lower case. This is followed by the attribute, type. Actually, the input element can be used to create different types of elements, not only the one that receives text. You end up with different types of element by using different values for the type attribute. The value of the type attribute gives you the particular element. In the case here, of the Text Input element, we want a control that will receive a line of text; so the value of the type element is, “text”. Every control should have a Name attribute with the corresponding value. Here, the Name attribute is, name, and the corresponding value is “firstName”. As a rule, the value of the Name attribute should begin with a letter and should not have a space.

In the above tag, you have the attribute called, value. You use this attribute to specify the initial data of the control. Imagine a set of users where most of their first name is “John”. In this case, the value attribute corresponding value would be,

         value="John"

The particular user can over-type the initial value, if his first name is not John. What the user types (over-types) is called the Current Value. After the user has typed the current value, the browser changes the value of the value attribute to the current value. In the above input tag, the initial value is an empty string. You are not obliged to type the value attribute and its value.

The size attribute, gives you the length of the text input control in terms of number of characters. It is not the maximum number of characters; it is just how wide the control should be.

Note: with the exception of the Name attribute, the three other attributes are optional. So the following tag will still produce a text input element:

        <input name="firstName">

I advice you to always add at least, the type attribute.

Remember, all tag and attribute names are in lower case.

Input Text Controls

Password Control
You must have noticed that when you type your password into a computer, you do not see the password on the screen; you see small solid disks or asterisks or some special character to indicate the individual characters of your password. The HTML5 password control is used to achieve this effect.

This password control is an Input element where the value of the type attribute is “password”. The following tag illustrates this:

        <input type="password" name="psswrd" value= "" size="15">

As I said above, the input element can take different type values, which result in different elements.

Well, try the following code to appreciate all what has been said so far; type something into the controls.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <form action="http://www.somewebsite/dir/file.exe"  method="post">
        <input type="text" name="firstName" value= "" size="30"> <br>
        <input type="password" name="psswrd" value= "" size="15">
    </form>
</body>
</html>

There are two input elements in the form: one for first name (text) and one for a password.

All controls are inline elements. So in the code, the line break element is used to send the second control to the next line at the browser.

General and Special Purpose Input Text Controls
The input text control described above is a general purpose control for text. There are other text controls, which are for special types of text. For special purpose input text control, you have the telephone, URL and email input controls. There are other special purpose text controls, which we shall look into later. Note that the password control is also a special purpose control.

Telephone Input Text Control
This control differs from the above control in its type attribute value. Here the value is, “tel”. Under this condition, only telephone numbers should be typed by the user into the control. The basic telephone input text control tag is:

    <input type= "tel" name= "somename">

The name value (somename) is what you, the coder chooses.

The URL Input Text Control
The URL control differs from the above control in its type attribute value. All input controls differ in their values for the type attribute, leading to different elements. Here the value is, “url”. Under this condition, the user should type only a URL into the control. The basic url input text control tag is:

    <input type= "url" name= "somename">

The name value is what you, the coder chooses.

An example of a URL is,

    http://www.somesite.com/path/to/file.htm

The email Input Text Control
The email control differs from the above control in its type attribute value. All input controls differ in their values for the type attribute, leading to different elements. Here the value is, “email”. Under this condition, the user should type only an email address into the control. The basic email input text control tag is:

    <input type= "email" name= "somename">

The name value is what you, the coder chooses.

An example of an email is,

    johnsmith@yahoo.com

Control State
The value of the type attribute in an input text control, whether general or special purpose, is called the state of the input control. Some of the states we have learned in this tutorial are the text, password, tel, URL, and email.

Example
Try the following code; type relevant text into the input controls and do not worry for now, about any sign you see as a result of typing.

<!DOCTYPE HTML>
<html>
<head>
    <title>Quick Illustration</title>
</head>
<body>
    <form action="http://www.somewebsite/dir/file.exe"  method="post">
        <input type="text" name="userName"><br><br>
        <input type="password" name="psswrd"><br><br>
        <input type="email" name="email"><br><br>
        <input type="url" name="url"><br><br>
        <input type="tel" name="telephone"><br><br>
    </form>
</body>
</html>

The value Attribute
Input controls are single tag elements. An input control can have the value attribute. The value of the value attribute is the initial value for the input control. That is when the web page is loaded, the user will see that initial value in the control field. The user can always override the initial value by typing over it. The following tag shows the use of the value attribute:

    <input type="email" name="themail" value="mail@server.com">

Hidden Input Control
When the Form is submitted, you might want the data set to go to an email box for somebody to read. You might not want the user (sender) of the Form to read this destination email address at the browser. You use the Hidden Input control for this purpose. The hidden input control is typed in the Form element. However, since this input control is hidden, the user does not see it. You use the Hidden Input control for any other information that you hide from the user (but not from the destination).

An example is,

        <input type="hidden" name="destinationEmail" value="info@cool-mathematics.com">

It is the program at the server that receives the data set of the Form that has the responsibility to send the data set to the email box.

The textarea Control
The textarea element is an element that allows the user to type prose (long) text into a form. All the input text elements above, allow only one line of text. The textarea control is just like a small text editor. As the user types text into the textarea control, when he reaches the right end of the control, the typing wraps to the next line automatically. While typing in the text area control, to start a new paragraph, you just press the Enter key twice.

The textarea control has two important attributes, which are cols and rows. The value of the cols attribute gives the number of character columns in the field. The rows attribute, gives the number of character rows in the field. Read and try the following code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Example</title>
</head>
<body>
    <textarea name= "msg" cols= "40" rows= "4"></textarea>
</body>
</html>

Remember: Each Form control must have a name. The name of the textarea element in the above code is “msg”. The textarea element has a start and an end tag, which are <textarea> and </textarea>.

Incidentally, the textarea element does not have a value attribute for the initial text. If you want initial text, you have to type it as content to the textarea control, as in the following code:

    <textarea name= "msg" cols= "40" rows= "4">
    Initial text goes here…
    </textarea>

This initial text can be overridden by the user typing over it at the browser.

Non-Text Input Controls

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.

The select and option Elements
The select element is an element from which the user can select a number of options. It is a double tag element. The option element has the particular choice that can be selected. The option element can be double tag or single tag.

The Option Element

The Double-Tag Option Element
The following select element, shows the option element used as a double-tag option element. When used as a double tag element, the content of the option element is the label for the element.

        <select name="sel">
            <option>pear</option>
            <option>peach</option>
            <option>apple</option>
            <option>banana</option>
            <option>pineapple</option>
        </select>

The label for the option element is what the select element displays as the option. The option element, whether as the double-tag element or the single-tag element has the value and label attribute. When used as the double tag element and without the value attribute, the content of the option element is at the same time the label and value of the option element.

Note, in the select element, it is the value of the option element chosen (selected) that is sent as the value of the select element, together with the name of the select element.

As a double-tag element, if the option element has a value attribute, the value of the value attribute can be different from content of the option attribute. It is the value of the value attribute that will be sent to the server if the option is chosen. Read and try (open in browser) the following code:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

    <select name="sel">
        <option value="10">pear</option>
        <option value="20">peach</option>
        <option value="30">apple</option>
        <option value="40">banana</option>
        <option value="50">pineapple</option>
    </select>

</body>
</html>

Here, if the second option element is chosen by the user, the user would know that he has chosen peach (label) that he saw; however, it is the value, 20, and the name, sel that will be sent to the server.

The selected Attribute
When the web page is displayed, it is the first option element that is selected. If you want a different element to be selected, then type the Boolean selected attribute for the particular option. In the following code, apple will be selected by default:

    <select name="sel">
        <option value="10">pear</option>
        <option value="20">peach</option>
        <option value="30" selected>apple</option>
        <option value="40">banana</option>
        <option value="50">pineapple</option>
    </select>

The Single-Tag option Element
When used as a single tag element, the value and the label attributes of the option element have to be typed. The value of the label attribute is what will appear as option in the datalist element. The value of the value attribute of the option element is what will be sent to the server as the value of input element (together with the name of the input element), when the option element is chosen. Note: when used as a single tag-element, you typically would use the option element with the datalist element. The datalist element is similar to the option element but not quite. It works with an input text element above it. When you start typing in the input text element, a list appears below the input text element for you to choose from. Read and try the following code:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <input type="text" name="fruit" list="dal">
    <datalist id="dal">
        <option value="10" label="pear">
        <option value="20" label="peach">
        <option value="30" label="apple">
        <option value="40" label="banana">
        <option value="50" label="pineapple">
    </datalist>

</body>
</html>

Advice: use the double-tag option element with the select element and use the single tag option element with the datalist element. The datalist element works with input controls.

The optgroup Element
For the select element, if the options are many, then they can be grouped into groups. Not all the option elements need to be in groups. You use the double-tag optgroup element to group the options. The optgroup element has a label attribute, which if used, will be the label (header) for the group. Read and try the following example:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <select name="sel">
        <optgroup label="Group 1">
            <option value="10">pear</option>
            <option value="20">peach</option>
        </optgroup>
    <optgroup label="Group 2">
        <option value="30">apple</option>
        <option value="40">banana</option>
    </optgroup>
        <option value="50">pineapple</option>
    </select>
</body>
</html>

So, the option element can be used as a double-tag element in a select element. It can be used as a single tag element in a datalist element. When used as a double tag element, if the value attribute and the label attribute are not typed, the content of the option element becomes the label and value of the option element. When used as a single-tag element, the label and value attributes have to be typed. When used as a double-tag element, there is no need for the label attribute, but you can have the value attribute; in this case, it is the value of the value attribute that will be sent to the server and not the content.

The Label Element

The label element gives the label (kind of title) for the control

Why the Label Element
Consider the following web page:

<!DOCTYPE HTML>
<html>
<head>
    <title>Example</title>
</head>
<body>

    <form action="http://www.somewebsite/dir/file.exe"  method="post">
        <input type= "url" name= "engine" ><br>
        <input type= "email" name= "email" ><br>
    </form>

</body>
</html>

In this code, one input control is for a URL and the other is for an email. If this web page is displayed at the browser, the two input text controls will be displayed (you can try the code). Looking at the web page, you would not know which one is for URL and which one is for email. So each of these controls needs a label (text) to identify it (at the browser). So there is a need for an HTML label element.

HTML Label Element
The tags for the HTML label element are <label> and </label>. The label itself (text) and the corresponding control element become the content of the label element. For an email input control, you would have something like:

    <label>Email: <input type= "email" name= "email" ></label>

In this case the label text (Email:) appears in front of the control field at the browser. If you want the label text to appear after the control at the browser, then type it after the control, but still inside the label element as in:

    <label> <input type= "email" name= "email" > Email</label>

Try the following code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Example</title>
</head>
<body>

    <form action="http://www.somewebsite/dir/file.exe"  method="post">
        <label>Uniform Resource Locator: <input type= "url" name= "engine" ></label><br>
        <label>Email: <input type= "email" name= "email" ></label>
    </form>

</body>
</html>

Direct Use of the label Element
The label element gives the label for a form control. Everything being equal, a form control, goes inside a double-tag label element. The control is part of the content of the label element. If you want the text label to be displayed in front of the control, you type it in front of the control as part of the content for the label element. If you want the label text to appear after the control, you type it after the control as part of the content for the label element. As another illustration of the direct use of the label element, try the following code:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

    <form>
        <p><label>First Name: <input type="text" Name="fname"></label></p>
        <p><label><input type=checkbox name="apple" value="apple"> Apple</label></p>
    </form>

</body>
</html>

The label element is a double-tag element.

Separating the label Element from the Control
The label element has an attribute called, the for attribute. You can separate the label element from the control and have both parts in the form. In this case, you need the for attribute. The value of the for attribute is the ID of the control element. In this situation the control element needs to have an ID. Try the following code:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

    <form>
        <p><label for="fn">First Name</label></p>
        <p><input type="text" Name="fname" id="fn"></p>
    </form>

</body>
</html>

Under this condition, in some browsers like Mozilla Firefox, if you click the label text, the control receives focus. I clicked the label text and the input text control received the I-bar (focus).

Form Owning Controls
You can actually separate a control from a Form in your code. In this case the Form element has to know that it owns a particular control. Each control can have an attribute called the form attribute. The value of the form attribute is the ID of the Form. In this situation the Form needs to have an ID. The connection between the control and the Form is through the form attribute in the control’s tag and the ID of the Form element. The following code illustrates this:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

    <p><label>First Name: <input type="text" name="fname" form="F1"></label></p>

    <form method="post" action="http://somesite/file.ext" id="F1">
        <button type="submit">Send</button>
    </form>

</body>
</html>

When a control is typed inside a Form, everything being equal, the Form owns that control.

You can also separate the label element from the control and separate the control from the Form as in the following code:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

    <p><label for="fn">First Name: </label>

    <p><input type="text" name="fname" form="F1" id="fn"></p>

    <form method="post" action="http://somesite/file.ext" id="F1">
        <button type="submit">Send</button>
    </form>

</body>
</html>

In this code, when the form is submitted, the name and value of the input text control will be part of the data set sent to the server by the form. Remember, the data set is all the name/value pairs of a form.

Note: if the user clicks a label, the corresponding control should be selected (highlighted) independent of whether the control is coded inside the label or not.

Well, we really should take a break here. We continue in the next part of the series.

Chrys

Related Links

Basics of HTML 5
Basics of ECMAScript
HTML DOM Basics
CSS Basics
Text Elements in HTML
Grouping Content
Microsyntax Dates and Times in HTML
Sectioning Content
Common Idioms without Dedicated Elements
HTML Embedded Content
HTML Insecurities and Prevention
Presentation Mathematical Markup Language
More Related Links
PurePerl MySQL API
Major in Website Design
Perl Course - Optimized
Web Development Course

BACK NEXT

Comments

Become the Writer's Fan
Send the Writer a Message