HTML input attributes

The value attribute specifies the initial value for an input field

As we know that the HTML Input Elements widely used in HTML Forms. Complete knowledge about all HTML Input Attribute helps us to create interactive and useful html forms. The knowledge about all Input Attribute can makes our work more easier. So let’s know all Input Attribute one by one.

Note: Before starting Attribute we it is important to know that there are some Input Attribute which introduced in HTML5, it may possible they can’t work properly according their definition because it might possible some browser can’t support them.

Some types of HTML input attributes

• type, name, value, readonly attribute
• maxlength, size attribute
• HTML5 placeholder attribute
• HTML5 required attribute
• HTML5 autofocus attribute

Type Attribute

This attribute is responsible for different – different types of Input element like, textbox, radio button, checkbox, button etc.

Type Attribute Syntax

<input type="type_value" />

Name Attribute

This Attribute is used to provide identity to Input Element, due to this we recognize element for backend coding or for accessing the value within the Input Element.

Name Attribute Syntax

<input type="type_value" name="name_value"  />

Value Attribute

This Attribute is defines the initial value of Input Element but we can change the value at run time means the value becomes the current value which we provides in run time.

Value Attribute Syntax

<input type="text" name="F_Name" value="user_name" />       

Readonly Attribute

If we want an Input Element as read only then we can use this attribute, we just have to pass readonly within Input Element.

Readonly Attribute Syntax

<input type="text" name="F_Name" value="sam" readonly />       

The disabled attribute

The disabled attribute specifies that the input field is disabled. A disabled input field is unusable and un-clickable, and its value will not be sent when submitting the form

<form action="">
      F_Name :
      <input type="text" name="F_Name" value="vikky" disabled />       
</form>

Maxlength Attribute

The maxlength attribute specifies the maximum allowed length for the input field

If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter. For other control types, it is ignored.

If we want to fixed the maximum length of values which we can insert in Input Element then in such condition we can define maxlength Attribute as HTML Input Attribute and assign a fixed value to the attribute.

Maxlength Attribute Syntax

<input type="text" name="_Name" maxlength="11" />       

Size Attribute

We can increase of decrease the default Input Element length using size attribute. It’s doesn’t mean that we will fixed the length of input value, rather we are increasing or decreasing the size of Input Element. Just look example.

Size Attribute Syntax

<input type="text" name="f_name" size="20" />
<input type="text" name="s_name" />       

HTML5 Form attributes

There are 14 new attributes

HTML5 placeholder Attribute

The placeholder attribute, which allows us to set placeholder text as we would currently do in HTML4 with the value attribute. It should only be used for short descriptions for anything longer, use the title attribute.

hint to the user of what can be entered in the control, typically in the form of an example of the type of information that should be entered. The placeholder text must not contain carriage returns or line-feeds.

It is a HTML5 Input attribute which is used to indicate which kind of value users have to inter in HTML Input Element.

HTML5 placeholder Attribute Syntax

<input type="text" name="s_name" placeholder="Enter Name" />       

HTML5 required Attribute

The requied attribute adding it to a form field, the browser requires the user to enter data into that field before submitting the form. This replaces the basic form validation currently implemented with JavaScript, making things a little more usable and saving us a little more development time. required is a Boolean attribute, like autofocus.

We use this attribute when we have to mark some HTML Input Element as required field. If that is field is empty then when we click submit button it give an alert message as this field is required. See below example, click on test button:

Required Attribute Syntax

<input type="text" name="s_name" required />
<input type="submit" value="Test Me"  />       

HTML5 autofocus Attribute

All modern browsers support the attribute and, like placeholder, browsers that don’t support the autofocus attribute simply ignore it.

Using this attribute we can mark a HTML Input Element as autofocus, after marking element as autofocus, if someone will visit on form then that element will be focused first.

HTML5 autofocus Attribute Syntax

<input type="text" name="name1" autofocus/>
<input type="text" name="name2" />      

Some Important HTML5 Form Attribute

There are several HTML Form attribute introduced in HTML5, They may very useful in some condition, here we will discuss about some important HTML5 Forms attributes.

HTML5 autocomplete Attribute

This attribute is used when someone coming to form page again then, if we have marked html form as autocomplete, it will populate the form’s field with previously filled data, which will increase user experience.

autocomplete syntax

<form autocomplete="on"></form>

The autocomplete attribute specifies whether a form or input field should have autocomplete on or off. When autocomplete is on, the browser automatically completes the input values based on values that the user has entered before.

• OFF: The browser is not permitted to automatically enter or select a value for this field. It is possible that the document or application provides its own autocomplete feature, or that security concerns require that the field's value not be automatically entered.
• ON: The browser is allowed to automatically complete the input. No guidance is provided as to the type of data expected in the field, so the browser may use its own judgement.

HTML5 novalidate Attribute

If we want to remove all validation from HTML Form then we can use this attribute to achieve these phenomena. It is the easiest way to remove html form validation, but some browser may not support this.

<form novalidate></form>

The multiple Attribute

The multiple attribute specifies that the user is allowed to enter more than one value in the <input> element.

The multiple attribute works with the following input types: email, and file.

The formnovalidate Attribute

If the input element is a submit button or image, this Boolean attribute specifies that the form shouldn't be validated before submission. This attribute overrides the novalidate attribute of the element's form owner.

The formaction

The URL that processes the data submitted by the input element, if it is a submit button or image. This attribute overrides the action attribute of the element's

When the form is submitted, the browser first checks for a formaction attribute; if that isn’t present, it proceeds to look for an action attribute on the form.

The formenctype Attribute

formenctype details how the form data is encoded with the POST method type. It has the same effect as the enctype attribute on the form element and can only be used with a submit or image button

application/x-www-form-urlencoded: The default value if the attribute is not specified.

multipart/form-data: Use this value if you are using an <input> element with the type attribute set to file.

text/plain: This encoding is mostly for debugging.

The formmethod Attribute

formmethod specifies which HTTP method (GET, POST, PUT, DELETE) will be used to submit the form data. It has the same effect as the method attribute on the form element and can only be used with a submit or image button (type="submit" or type="image").

The formtarget Attribute

formtarget specifies the target window for the form results. It has the same effect as the target attribute on the form element and can only be used with a submit or image button.

• _self: Response into the same browsing context as the current one. This is the default if the attribute is not specified.
• _blank: Load the response into a new unnamed browsing context.
• _parent: Load the response into the parent browsing context of the current one. If there is no parent.
• _top: Response into the top-level browsing context. If there is no parent, this option behaves the same way as _self.