HTML Input Attributes

As you have seen earlier, we used a lot of input attributes. Attributes are used to assign values. In this section we will discuss the input attributes.

The Value Attribute

This attribute is assigned the value of the input. The type of the value is decided by the input type. To illustrate this consider the following example:

EXAMPLE

<p> first name: <input type=”text” name=”first name” value = “Paul” /></p>

In this example the first name has assigned the name PAUL using the value attribute and the last name will be entered by the user, this will produce the following result:

The Readonly attribute

This is used to indicate that the value entered or input by the user can be read only and cannot be changed or replaced. It is read only value. It is used as follows:

EXAMPLE

<p> first name: <input type=”text” name=”first name” value = “Paul” readonly/></p>

This will produce the following result:

the-readonly-attribute

In the above example, the name entered cannot be altered or replaced.

The disabled attribute

This makes the entered field to appear dim of faded. It is shown in the following example:

EXAMPLE
<form action = “ http://side.edu/cgi-bin/send-message” >

<p> first name: <input type=”text” name=”first name” value = “Paul” disabled/></p>

The following result will be produced:

the-disabled-attribute

In the above example you can see that the name is appearing dim. It cannot be clicked.

The Size attribute

This attribute is used to define a particular size for the input fields in characters. It is used as follows:

EXAMPLE

<p> first name: <input type=”text” name=”first name” value = “Paul” size=”60″/></p>

This will produce the following result:

the-maxlength-attribute

You can see that the input field length is increased.

The maxlength attribute

This attribute is used to indicate the maximum length of the input field in which the data is to be entered. It is used as follows:

EXAMPLE

<p> first name: <input type=”text” name=”first name” maxlength =”100″/></p>

This will generate the following result:

the-maxlength-attribute

In appearance, we cannot see anything happen but the maximum amount of input is determined by the maxlength attribute.

HTML5 attributes

The following attributes are included in the HTML5.

The autocomplete attribute

Autocomplete means that the input field will be completed itself according to the data that was previously entered by the user. Thus the autocomplete attribute is used to specify whether the autocomplete is on or it is off. If it is on the input field will be automatically filled. This attribute is assigned either the value “on” or “off”. It is used as follows:

EXAMPLE

<p> first name: <input type=”text” id=”first name” /></p>

This will generate the following result:

the-autocomplete-attribute

The “last name” input field will be automatically filled as we already have filled this field with the name Abraham. When the submit button is pressed, there will appear a dialog box to confirm if you want to turn on the autocomplete or not as follows:

The novalidate attribute

This attribute shows that the form data must not be approved when it is submitted. This shows that the novalidate attribute is a form attribute that is it is used with the form element. It is used as follows:

EXAMPLE
<form action = “ http://side.edu/cgi-bin/send-message” novalidate >

Enter your Telefone number:

</form>

This will not validate the telephone number.

The autofocus attribute

This attribute makes the browser to set the focus when the page is loaded. For example we can set focus on an input text field, this will mean that the cursor will be on the focused field and you do not have to click on the field yourself to enter the text. To illustrate this consider the following example:

EXAMPLE

the-autofocus-attribute

You can see that there is no cursor blinking on the input field now using the following code:

Enter your Telefone number:

</form>

telefonenumber

Now you can see that there is a cursor in the input field.

The form attribute

The form attribute is used to link the form elements with the forms. The ID of the form element is taken by the form attribute as its value. Therefore, we can say that the form attribute has assigned the value of ID of form element. It is used as follows:

EXAMPLE
< form action = “ http://side.edu/cgi-bin/send-message” id = “form” >

< p> first name: < input type =”text” id=”first name” name = “firstname” /> </ p>

</ form >

< p > The last name is not the section of the form </ p>

This will generate the following result:

the-form-attribute
In the above example, we use the id attribute in the form element and assigned the value form. This value is then given to the form attribute. In this way, we linked the form elements with the form.

The formaction attribute

This attribute is used to process the URL of the file that is added to the button like when you press the button it will take the user to the URL that was added as formaction. The formaction attribute is used with the submit input type. You will better understand it when you consider the example. It is used as follows:

EXAMPLE

< form action = “ http://side.edu/cgi-bin/send-message” >

<p > first name: < input type=”text” id=”first name” name = “firstname” /> </ p>

< p > < input type =”submit” formaction = “www.URL.com” value=”submit” > </p >

</ form >

This will result as follows:

the-formaction-attribute

When you press the submit button it will take you to the link you provided.

The formenctype attribute

This attribute can only be used for forms and with the post method. The formenctype attribute is used to indicate how the data is to be encoded. The formenctype attribute can be assigned the following values:

application/x-www-form-urlencoded (the default)
multipart/form-data
text/plain

We are using the multipart/form-data that is used as follows:

EXAMPLE

< form action = “ http://side.edu/cgi-bin/send-message” method = “POST” >

<p> first name: < input type=”text” id=”first name” name=”firstname” /> </p >

</ form >

This will produce the following result:

The formmethod attribute

The formmethod attribute is used to define the method through which the data is to be sent to the server, it is similar to the method attribute. This attribute is used to specify the HTTP method of submitting the form. The method includes GET and POST.

EXAMPLE

< form action = “http://side.edu/cgi-bin/send-message” method = ”GET” >

Or,

< form action = “http://side.edu/cgi-bin/send-message” method = “POST” >

These methods are described below.

HTML Form through GET

GET is a method to send the information to the program. Using this method the information you sent will become visible to the page address field in which the form is created.

This is used as follows:

EXAMPLE

< form action = “ http://side.edu/cgi-bin/send-message” method = “GET” >

<p> first name: < input type = “text” id = “first name” name = “firstname”/> </ p >

< p> last name: < input type = “text” id = “last name” name = “lastname”/> </ p >

< p> < input type = “submit” value = “submit” /> </ p >

This will produce the following result:

Post method

Using the post method the information is not displayed on the screen unlike the get method. It is used as follows:

EXAMPLE

< form action = “ http://side.edu/cgi-bin/send-message” method = “POST” >

< p> first name: < input type = “text” id = “first name” name = “firstname” /> </ p>

< p > last name: < input type = “text” id = “last name” name = “lastname” /> </p >

< p> < input type = “submit” value = “submit”/> </ p >

Resulting in:

The formnovalidate attribute

EXAMPLE:
< form action = “ http://side.edu/cgi-bin/send-message” novalidate >

Enter your Telephone number:

< input type = “ tel” name = ”telephoneNumber” >

</ form >

This will not validate the telephone number.

The formtarget attribute

The formtarget attribute is used to indicate the where the response will be displayed or from which server after submitting the form. In other words, we can say that this attribute is used to open the submitted form in the new tab or window. There are the following values that can be assigned to the formtarget attribute:

_self: It opens or loads the response in the same window.

_blank: It opens the response in a new window.

_parent: It opens the response in the parent of the current tab, if there is no parent it will behave as _self.

_top: This will open the response in the ancestor of the current tab, if there is no it will behave as _self.

Iframename: This will open the response in the < iframe >.

It is used as follows:

EXAMPLE

The following example uses the value _blank that is assigned to formtarget attribute.

< form action = “ http://side.edu/cgi-bin/send-message” >

<p > first name: < input type = “text” id = “first name” name = “firstname” /> </ p >

</ form >

This will result as follows:

the-formtarget-attribute

When you press the button “submit as _blank”, a new tab will be open.

The height and width attributes

The height and width attributes are used with the image type input. The height and width indicates the height and the width of the image used. It is used as follows:

EXAMPLE
< form action = “ http://side.edu/cgi-bin/send-message” >

<p> first name: <input type = “text” id = “first name” name = “firstname”/> </ p >

</form >

This will result as follows:

The List attribute

The list attribute is used to with the detalist element that has various alternative options for the input element. It is used as follows:

EXAMPLE

This element uses the concept of option element that is it also provides the list of options. This element is used as follows:

EXAMPLE

<p > Choose the car from the list </ p >

< input list= “Cars” name= “MyChoice” />

< detalist id = “Cars” >

< option value = “BMW” >

< option value = “Mclaren”>

< option value = “Mercedes-Benz” >

< option value = “Lamborghini” >

< option value = “Jeep” >

</ detalist >

This will produce the following result:

The min and max attributes

The min and max attributes indicate the minimum and the maximum values for the < input > element. The number, Datetime-local, date, range, month, time and week can have the min and max attributes. It is used as follows:

EXAMPLE

The following example will illustrate the use of min and max attribute with the range input type:

< form action = “ http://side.edu/cgi-bin/send-message” >

< input type = “range” name = “range” min = “0” max = “10” >

< / form>

This will produce the following result:

the-min-and-max-attributes

We set the minimum range to zero and the maximum range to 10.

The multiple attribute

The multiple attribute is used to indicate that multiple values are going to be used in a form control. This attribute can only be used with the select element in HTML5. The multiple attribute can be used with the following input types:

File
Email
range

It is used as follows:

EXAMPLE

In the following example, we are using the multiple attribute with file input type.

< form action = “ http://side.edu/cgi-bin/send-message” >

<p > Browse images: < input type = “file” name = “img” multiple >

</ form >

This will generate the following result:

the-multiple-attribute

When you press the “browse” button a dialog box will appear, from which you can select images as follows:

the-multiple-attribute2

After you selected the picture, it will be uploaded and its name will be written in the input field as follows:

The pattern attribute

The pattern attribute is used when you want to match the entered text to the pattern that you provided. For example you want that the user can only enter alphabets and he can only enter a specified number of alphabets then you may use the pattern attribute. It is sued as follows:

EXAMPLE

< form action = “ http://side.edu/cgi-bin/send-message” >

<p > Enter your city postal code: < input type = “number” name = “City_code” pattern = “[1-0] {5}” >

< input type = “submit” >

</ form >

This will produce the following result:

the-pattern-attribute

The numbers can be entered using the arrow keys in the input field. You can only enter numbers in this input field because we set the pattern that you can only enter the numbers from 1 to 9 and you can only enter 5 digits. To illustrate this consider the following:

1-to-9

As the user entered letters, the browser did not proceed and gave error. Similarly if we use more than 5 digits, we will get error.

The placeholder attribute

The placeholder attribute is used to let the user know that what he should write in the input field if the input field does not have any name, for example there is an input field to enter the first name but this field does not have any title then we can use the placeholder attribute to give the user a hint that this field is for this purpose. It is used as follows:

EXAMPLE

Consider the following example:

< form action = “ http://side.edu/cgi-bin/send-message” >

<p > first name: < input type = “text” name = “firstname” placeholder = “first name” /> </p >

< p> last name: < input type = “text” name = “lastname” placeholder = “last name” /> </p >

< p > < input type = “submit” value = “submit” /> </ p>

</ form >

This will generate the following result:

If user enters a string the faded first name or the hint first name in the input field will disappear as follows:

The required attribute

The required attribute is used to make an input field mandatory to be filled before the submission of the form. The following input types can be used with the required attribute:

Tel, search, URL, text, email, number, checkbox, password, radio, data picker, and file.

EXAMPLE

In the following example, we used the required attribute with the “text” input type.

< form action = “ http://side.edu/cgi-bin/send-message” >

<p > first name: < input type = “text” name = “firstname” required/> </p>

</ form >

This will produce the following result:

the-required-attribute

In the above example the first name input field is made mandatory to be filled. If the user press the submit button without filling the first name input field, an error message will be generated. And without filling this field you cannot proceed further.

The step attribute

The step attribute is used to define an interval of the numbers that is in the number input field you can enter the numbers having a defined difference. In other words, we can also say that numbers are the multiples of some defined digit. You can better understand this with an example.

In the following example, we are using a step = 2, which will show that only multiples of 2 will be used like -2, 0, 2, 4, 6, 8 etc.

< form action = “ http://side.edu/cgi-bin/send-message” >

< input type = “submit” >

</ form >

This will generate the following result:

the-step-attribute

When you press the upper arrow key button the number will be increased by 2 and so on.

Prev: HTML Input Types

Next: HTML5 Introduction