Use of HTML5 input Attribute

This article teach you about different HTML5 input type attributes.
  • 2011

<input> pattern Attribute

This attributes specifies a regular expression <input> element's value checked against this specific regular expression.

Note: This attribute works with in these input types: text, search, url, tel, email, and password.

Enter Country code: <input type="text" name="coun_code" pattern="[A-Za-z]{4}" title="four letter country code" />

<input> placeholder Attribute

This attributes define the short hint about the expected input value field.

This enter hint always display in the input field when it is empty. and it get disappear after the insert cursor or get focus.
Note: This attribute works with these input types: text, search, url, tel, email, and password.

 

<!DOCTYPE html>
<html>
<body>
<form action="default.aspx">
<input type="text" name="fname" placeholder=" Enter First name" /><br />
<input type="text" name="lname" placeholder="Enter Last name" /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>

Output

place.jpg

<input> required Attribute

It is a Boolean attribute. And it is specified that input field is necessary to filled before the submitting the form.

Note: This attribute works with these input types: text, search, url, tel, email, checkbox, radio, and file. password, date pickers, number.

 

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp">
Enter Username: <input type="text" name="uname" required="required" />
<input type="submit" />
</form>

</body>
</html>

Output

requried filed fig4.jpg

Further Readings

You may also want to read these related articles :

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2019 DotNetHeaven. All rights reserved.