 |
| USE OF HTML5 INPUT ATTRIBUTES |
HTML5 Input Attributes
Apart from the input types, some new input attributes have also been introduced in HTML5. Input attributes are those attributes that are used with the <input> tag. So far, the following input attributes were available in HTML.
1. value
2. readonly
3. disabled
4. size
5. maxlength
The list of new input attributes introduced in HTML5 are given below.
1. autocomplete
2. autofocus
3. form
4. formaction
5. formenctype
6. formmethod
7. formnovalidate
8. formtarget
9. height
10. width
11. list
12. min
13. max
14. multiple
15. pattern
16. placeholder
17. required
18. step
Various HTML5 New Input Attributes
The new input attributes introduced in the HTML5 are illustrated with examples as below.
autocomplete
Many browsers fill input type by itself on the basis of old information which is called autocomplete. This is considered a feature because it makes the user feel comfortable but sometimes old information may be outdated. It was necessary that web designers could use this feature accordingly.
Therefore a new input attribute has been provided so that you can control this behavior. With the new autocomplete attribute you can turn the autocomplete feature on or off for an input type.
You can also define this attribute in the <form> tag. Doing this all the input types of the form will control the setting which is defined by you, and you can also use it on specific input types.
When you apply the autocomplete attribute to a specific input type, it overrides the autocomplete attribute of the <form> tag.
The autocomplete attribute has been explained by the below example.
<!DOCTYPE html>
<html>
<head>
<title> Example of autocomplete </title>
</head>
<body>
<form>
First Name:<input type="text" name="FirstName" autocomplete="on"><br/> <br/>
Last Name: <input type="text" name="LastName" autocomplete="on"><br/> <br/>
Email: <input type="email" name="email_Id" autocomplete="off"><br/><br/>
<input type ="submit">
</form>
</body>
</html>
The above example produces the below output.
 |
| AUTOCOMPLETE INPUT ATTRIBUTE EXAMPLE |
autofocus
After loading the webpage, you can define the autofocus attribute in order to get a particular input filed in focus. Doing this, the cursor will display in that input field just after loading the page.
An example of the autofocus attribute is given below.
<!DOCTYPE html>
<html>
<html>
<head>
<title> Example of autofocus </ title>
</ head>
<body>
<form>
Name: <input type = "text" name = "mbhName" autofocus> <br /> <br />
Email: <input type = "email" name = "mbhEmail"> <br /> <br />
<input type = "submit">
</ form>
</ body>
</ html>
The above example produces the below output.
 |
| AUTOFOCUS INPUT ATTRIBUTE EXAMPLE |
form
If you are defining an input type outside the <form> tag, then you can specify by form attribute that "input type" belongs to which form. The value of this attribute is the id of the form which has the input type.
The form attribute is explained by the example below.
<!DOCTYPE html>
<html>
<html>
<head>
<title> Example of Form attribute </ title>
</ head>
<body>
<form id = "mbhForm">
<input type = "text" name = "mbhName"> <br /> <br />
<input type = "submit">
</ form>
<h2> Below textbox belongs to the form </ h2>
<input type = "email" name = "mbhEmail" form = "mbhForm">
</ body>
</ html>
The above example produces the below output.
 |
| HTML5 FORM FORM TAG WITH INPUT ATTRIBUTE EXAMPLE |
formaction
Through the formaction attribute, you can specify the URL of the file that will process the input filed if the form is submitted. This attribute overrides the action attribute to be defined in the <form> element. This attribute is only used to submit an image input type.
Formaction is explained by the example below.
<!DOCTYPE html>
<html>
<head>
<title> Example of formaction </title>
</head>
<body>
<form action = "formHandle.php">
Name: <input type = "text" name = "Name"> <br/> <br/>
Email: <input type = "email" name = "Email"> <br/> <br/>
<input type = "submit" value = "submit">
<input type = "submit" value = "Submit Differently!" formaction = "formHandle2.php">
</form>
</body>
</html>
The above example produces the below output.
 |
| HTML5 FORMACTION INPUT ATTRIBUTE EXAMPLE |
formenctype
When the form is submitted, formenctype attribute is used to define what type of encoding should be used. This attribute only works with the form which has post method.
This attribute also works with submit and image input. This attribute overrides the enctype attribute which is defined in the <form> element.
Example of formenctype attribute is given below.
<!DOCTYPE html>
<html>
<head>
<title> Example of formenctype </title>
</head>
<body>
<form action = "formhandle.php" method = "post">
Name: <input type = "text" name = "Name"> <br/>
Email: <input type = "email" name = "email"> <br/>
<input type = "submit">
<input type = "submit" formenctype = "multipart / form-data" value = "submit using different encryption ...">
</form>
</body>
</html>
 |
| HTML5 FORMENCTYPE INPUT ATTRIBUTE EXAMPLE |
formmethod
If you want to define a different HTTP method for a particular input type, then you can use the formmethod attribute. This attribute overrides the method attribute defined in the <form> element. This attribute is used with submit and image input type.
The formmethod attribute is explained by the below example.
<!DOCTYPE html>
<html>
<head>
<title> Example of formmethod </title>
</head>
<body>
<form action = "formhandle1.php" method = "post">
Name: <input type = "text" name = "mbhName"> <br/> <br/>
Email: <input type = "text" name = "mbhEmail"> <br/> <br/>
<input type = "submit">
<input type = "submit" value = "Submit using GET Method" formaction = "formhandle2.php" formmethod = "get">
</form>
</body>
</html>
<html>
<head>
<title> Example of formmethod </title>
</head>
<body>
<form action = "formhandle1.php" method = "post">
Name: <input type = "text" name = "mbhName"> <br/> <br/>
Email: <input type = "text" name = "mbhEmail"> <br/> <br/>
<input type = "submit">
<input type = "submit" value = "Submit using GET Method" formaction = "formhandle2.php" formmethod = "get">
</form>
</body>
</html>
The above example produces the below output.
 |
| HTML5 FORMMETHOD INPUT ATTRIBUTE EXAMPLE |
formnovalidate
If you don’t want to validate any particular input type when it is submitted, you can define the formnovalidate attribute. This attribute overrides the <form> element's novalidate attribute. It is defined in the submit type.
Example of formnovalidate attribute is given below.
<!DOCTYPE html>
<html>
<head>
<title> Example of formnovalidate </title>
</head>
<body>
<form>
Name: <input type = "text" name = "mbhName"> <br/> <br/>
Email: <input type = "email" name = "mbhEmail"> <br/> <br/>
<input type = "submit" value = "Submit with Validation">
<input type = "submit" value = "submit without validation" formnovalidate>
</form>
</body>
</html>
The above example produces the below output.
 |
| HTML5 FORMNOVALIDATE INPUT ATTRIBUTE EXAMPLE |
formtarget
After submitting a form, where its response will display, it is defined by the formtarget attribute. For example, if you want to show the response in a new window, define _blank value for it.
This attribute overrides the target attribute of the <form> element. This attribute is used with submit and image input types.
The formtarget attribute is explained by the below example.
<!DOCTYPE html>
<html>
<head>
<title> Example of formtarget </title>
</head>
<body>
<form>
Name: <input type = "text" name = "mbhName"> <br/>
Email: <input type = "email" name = "mbhEmail"> <br/> <br/>
<input type = "submit" value = "Open result here ..."> <input type = "submit" formtarget = "_ blank" value = "Open Result in New Window">
</form>
</body>
</html>
<html>
<head>
<title> Example of formtarget </title>
</head>
<body>
<form>
Name: <input type = "text" name = "mbhName"> <br/>
Email: <input type = "email" name = "mbhEmail"> <br/> <br/>
<input type = "submit" value = "Open result here ..."> <input type = "submit" formtarget = "_ blank" value = "Open Result in New Window">
</form>
</body>
</html>
The above example produces the below output.
 |
| HTML5 FORMTARGET INPUT ATTRIBUTE EXAMPLE |
height
This attribute is used to define the height of the image input type.
width
This attribute is used to define the width of image input type.
list
You can use the list attribute to define an id of <datalist> element in an input type. The list of predefined options is attached with an input element by <datalist> element.
The list attribute is being explained by the below example.
<!DOCTYPE html>
<html>
<head>
<title> Example of list </title>
</ head>
<body>
<h2> Search for a topic below </h2>
<form>
<input type = "search" name = "mbhSearch" list = "mbhSearchList">
<input type = "submit">
<datalist id = "mbhSearchList">
<option value = "java"> Java </option>
<option value = "php"> PHP </option>
<option value = "html"> HTML </option>
<option value = "css"> CSS </option>
<option value = "JavaScript"> JavaScript </option>
</datalist>
</form>
</body>
</html>
<html>
<head>
<title> Example of list </title>
</ head>
<body>
<h2> Search for a topic below </h2>
<form>
<input type = "search" name = "mbhSearch" list = "mbhSearchList">
<input type = "submit">
<datalist id = "mbhSearchList">
<option value = "java"> Java </option>
<option value = "php"> PHP </option>
<option value = "html"> HTML </option>
<option value = "css"> CSS </option>
<option value = "JavaScript"> JavaScript </option>
</datalist>
</form>
</body>
</html>
The above example produces the below output.
 |
| HTML5 LIST INPUT ATTRIBUTE EXAMPLE |
min
Min attribute is used to determine the minimum value for an input type.
max
The maximum attribute is defined to determine the maximum value of an input type.
multiple
Multiple attributes are used to allow the user to input multiple values. It is used with attribute file and email input type.
The multiple attributes are explained by the below example.
<!DOCTYPE html>
<html>
<head>
<title> Example of multiple </title>
</head>
<body>
<form>
<h2> Example of multiple Input Attribute </h2>
<input type = "file" name = "profilePic" multiple> <br/> <br/>
<input type = "submit" value = "Upload!">
</form>
</body>
<html>
<head>
<title> Example of multiple </title>
</head>
<body>
<form>
<h2> Example of multiple Input Attribute </h2>
<input type = "file" name = "profilePic" multiple> <br/> <br/>
<input type = "submit" value = "Upload!">
</form>
</body>
The above example produces the below output.
 |
| HTML5 MULTIPLE INPUT ATTRIBUTE EXAMPLE |
pattern
If you want to check the value of any input type through a pattern, then you define the regular expression with the same attribute. This attribute is used with text, search, url, tel, email and password input types.
The pattern attribute is explained by the below example.
<!DOCTYPE html>
<html>
<head>
<title> Example of pattern </title>
</head>
<body>
<form action = "formHandle.php" method = "post">
Name: <input type = "text" name = "mbhName"> <br/> <br/>
User Name: <input type = "text" name = "myUserName" pattern = "[A-Za-z0-9]"> <br/> <br/>
<input type = "submit">
</form>
</body>
</html>
The above example produces the below output.
 |
| HTML5 PATTERN INPUT ATTRIBUTE EXAMPLE |
placeholder
You can use the placeholder attribute to give user hint for input. The values of this attribute already display in the placeholder. As soon as the user clicks, the value disappears. This attribute is used with text, search, url, tel, email and password input types.
The placeholder attribute is explained by the below example.
<!DOCTYPE html>
<html>
<head>
<title> Example of placeholder </title>
</head>
<body>
<form>
<h2> Subscribe to our weekly newsletter </h2>
Email: <input type = "email" name = "mbhEmail" placeholder = "Write your email here ..."> <br/> <br/>
<input type = "submit" Value = "Subscribe">
</form>
</body>
</html>
<html>
<head>
<title> Example of placeholder </title>
</head>
<body>
<form>
<h2> Subscribe to our weekly newsletter </h2>
Email: <input type = "email" name = "mbhEmail" placeholder = "Write your email here ..."> <br/> <br/>
<input type = "submit" Value = "Subscribe">
</form>
</body>
</html>
The above example produces the below output.
 |
| HTML5 PLACEHOLDER INPUT ATTRIBUTE EXAMPLE |
required
There may be some time user submits the form without passing the value in the input field. In this way, you will not get complete information. You can force the user to fill a particular input before submitting the form. You do this by the required attribute.
The required attribute is explained by the below example.
<!DOCTYPE html>
<html>
<head>
<title> Example of required </title>
</head>
<body>
<form action = "formHandle.php">
Name: <input type = "text" name = "Name" required> <br/>
Age: <input type = "number" name = "age"> <br/>
<input type = "submit">
</form>
</body>
</html>
<html>
<head>
<title> Example of required </title>
</head>
<body>
<form action = "formHandle.php">
Name: <input type = "text" name = "Name" required> <br/>
Age: <input type = "number" name = "age"> <br/>
<input type = "submit">
</form>
</body>
</html>
The above example produces the below output.
 |
| HTML5 REQUIRED INPUT ATTRIBUTE EXAMPLE |
step
You can use the step attribute to define legal intervals for the input value. For example, if you define the value of the step attribute 3 and define min attribute of 0 and max attribute 10 then the user can enter 3 6 9 values which will be considered as valid values.
The step attribute is explained by the below example.
<!DOCTYPE html>
<html>
<head>
<title> Example of step Demo </title>
</head>
<body>
<h2> Enter a multiple of 2 between 0 and 10 </h2>
<form>
<input type = "number" name = "multiple" step = "2" min = "0" max = "10"> <br/> <br/>
<input type = "submit">
</form>
</body>
</html>
<html>
<head>
<title> Example of step Demo </title>
</head>
<body>
<h2> Enter a multiple of 2 between 0 and 10 </h2>
<form>
<input type = "number" name = "multiple" step = "2" min = "0" max = "10"> <br/> <br/>
<input type = "submit">
</form>
</body>
</html>
The above example produces the below output.
 |
| HTML5 STEP INPUT ATTRIBUTE EXAMPLE |
<< Previous Next >>
Comfortabl y, the post is really the freshest on that deserving topic. I harmonise with your conclusions and definitely will thirstily look forward to your next updates.
ReplyDeletewebsite builder for reseller
Thanks for sharing the best information and suggestions, I love your content, and they are very nice and very useful to us. If you are looking for the best networking companies australia Yorke Peninsula, then visit Bay Tech and Design. I appreciate the work you have put into this.
ReplyDeleteGet a good website building guide. That's the most easy way to build your first website, plus it saves you a lot of time since you will get specific directions on what to do and in which order you should do it. Now since you're building a small business website the website building guide should obviously also show you how to do a small business website. Another thing that's good to keep in mind when using a website building guide is to get a free one. They are the most informative and are also often made by people who really want to help you and not just take money from you and then not give you any real value in exchange.... Read more
ReplyDeleteContact with us for build up a professional website. Build up a site from here
Visit for read all of song lyrics
Visit for read all of exciting articles
Check amazon best product now