HTML 5 Common Input Attributes

Mastering HTML5 - Part 14

Forward: In this part of the series, we look at attributes that are common to all input elements.

By: Chrysanthus Date Published: 22 Jul 2012

Introduction

This is part 14 of my series, Mastering HTML5. I assume you have read the previous parts of the series before reaching here. In this part of the series, we look at attributes that are common to all input elements. We have seen some of these attributes already. Note that the order of attributes do not matter in a tag.

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.

The autocomplete Attribute
As a user, imagine your web form and the input email control into which you frequently type your email address. An input control can have an autocomplete attribute. The value of the autocomplete attribute should be "on" or "off". If the attribute is present and if its value is "on", then this is want will happen: As you keep typing your email address into the input email field as you use the page from time to time, the browser will be memorizing the address. Sooner of later, as soon as you start typing the address the browser would pre-fill the address for you. In practice, it does not take long for the browser to start pre-filling the field. The following tags illustrate the use of the attribute:

<p><label>Email: <input type="email" name= "email" autocomplete="on"></label></p>
<p><label>Bank Account Number: <input type="text" name="ac" autocomplete="off"></label></p>
<p><label>Personal Identification Number: <input type="password" name="pin" autocomplete="off"></label></p>

If the input control is to receive sensitive information like a bank account number, then make sure the value of the autocomplete attribute is “off”.

The list Attribute
The list attribute is used by an input control to provide a connection between the input element and a datalist element. The value of the list attribute is the ID of the datalist element. So, the datalist element must be given an ID. The datalist element has options that the user can choose from when he starts typing. Some of the options may come from the history folder of the browser. We have seen examples of the use of the list attribute in conjunction with the datalist element, in this blog.

The readonly Attribute
The readonly attribute is a Boolean attribute. A Boolean attribute is an attribute, whose effect is felt when the attribute is present. When the attribute is absent, it has no effect. Its presence means true, yes or on. Its absence means false, no or off.

The readonly attribute, when present makes the input control read-only. This means that the user can only read the value that is there but cannot change it. An input control with the readonly attribute should have the value attribute and its value. Read and try the following code, verifying that the value in the input control cannot be changed.

<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p><label>Score: <input type="number" name= "score" value="87" readonly></label></p>
</body>
</html>

The size Attribute
The size attribute gives the maximum number of characters that can be displayed in the input control. However, you can actually type more or less than this number of characters into the input field. When you type more, only the number of characters specified in the size attribute will be displayed. Try the following code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
</head>
<body>
     <p><label>Full Name: <input type="text" name= "full Name" size =  "20"></label></p>
</body>
</html>

The required Attribute
The required attribute is a Boolean attribute. Its presence means that the user must type something in the input control field. In other words the field cannot be left empty. If the user leaves the field empty, on attempt to submit the form, the browser will indicate an error and the form will not be submitted. Read and try the following code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
</head>
<body>
     <p><label>Full Name: <input type="text" name= "full Name" size =  "20" form="F1" required></label></p>

    <form method="post" action="URL" id="F1">
        <button type="submit">Send</button>
    </form>
</body>
</html>

Also in this code, the form attribute of the input element creates a connection with the id attribute of the Form element.

The multiple Attribute
The multiple attribute is a Boolean attribute. Its presence allows the user to type more than one value into the input control field. The multiple values are separated by commas. The following tag illustrates how to use the multiple attribute:

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

The min and max attributes
The min attribute is for the minimum number that the user can type in an input control that allows numbers. The max attribute is for the maximum number that the user can type in an input control that allows numbers. We have seen these attributes before.

The step Attribute
The step attribute is the increment that can be added cumulatively to the minimum value, to result in a value, to be typed, into the input control field that accepts numbers. We have seen this before.

The placeholder Attribute
A placeholder is a hint faint text inside a control as an example of what the user should type. The following code shows how to use it:

    <input type="text" name="fullname" placeholder="John Smith">

Note how the placeholder has been typed here for an input control that is expecting any full name. The value of the placeholder attribute is “John Smith”. This value will appear faintly in the input field at the browser, indicating to the user that he should type something similar. As soon as the user starts typing his full name (clicks into the input field), the value (John Smith) of the placeholder would be automatically erased and the user will continue and type his full name. Try the following code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
</head>
<body>
     <p><label>Full Name: <input type="text" name="fullname" placeholder="John Smith"></label></p>
</body>
</html>

The maxlength attribute
The maxlength attribute is the maximum number of characters that the user can type into the input control. Read and try the following, verifying that you cannot type more than 10 characters in the control field.

<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p><label>Code: <input type="text" name="cde" maxlength= "10"></label></p>
</body>
</html>

This attribute is also applicable to the textarea control.

Time to take a break, we stop here and continue in the next part of the series.

Chrys

Broad Network

HTML 5 Common Input Attributes

Mastering HTML5 - Part 14

Introduction

Related Links

Comments