HTML 5 Basic Input Text Controls

HTML5 Basics - Part 17

Forward: In this part of the series, we look at basic input text controls.

By: Chrysanthus Date Published: 22 Jul 2012

Introduction

This is part 17 of my series HTML5 Basics. The HTML5 Form has a similar purpose to paper Form you fill in offices. The HTML5 Form is part of a web page. The HTML5 Form has a button called the submit button. After finished filling the Form, you click the submit button. When you click the submit button, all the information, called the data set, entered into the Form is sent to a server. The server can be a web server, a mail server or some other server. At the server, there is a program that will process the data set.

There is an HTML5 element called the Form element that is used to create the HTML5 Form. The URL to a program file at the server for processing the form data set is the value of an attribute in the start tag of the Form element.

The fields and buttons in a form are called form controls. In this part of the series, we look at basic input text controls. I assume you have read the different parts of the series, before reaching here.

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

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 element 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 now look at 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 receive 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.

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.

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. We shall learn other states later.

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.

Well, time to take a break. We stop here and continue in the next part of the series.

Chrys

Broad Network

HTML 5 Basic Input Text Controls

HTML5 Basics - Part 17

Introduction

Related Links

Comments