HTML 5 <input> Placeholder Properties

Original link: http://www.w3school.com.cn/html5/att_input_placeholder.asp

HTML 5 <input> Placeholder Properties

HTML 5 <input> Tags

Instance

Search field with placeholder text:

<form action= "demo_form.asp" method= "get" >  placeholder="Search W3School" /> <input  type= "Submit"/></form>

Try it yourself.

Definition and usage

The placeholder property provides a hint that describes the expected value of an input field (hint).

The hint appears when the input field is empty and disappears when the field gets focus.

Note: The placeholder property applies to the following <input> types: text, search, URL, telephone, email, and password.

Differences between HTML 4.01 and HTML 5

The placeholder property is a new property in HTML5.

Grammar

<input placeholder= "text" >

Property value

value	Description
Text	Specifies the pattern used to validate input fields.

HTML 5 <input> Tags

However , this effect can be achieved under Firefox,ie, and Chrome and Safari will not disappear after clicking, and will not disappear until they have been entered.

Add the following code to the CSS:

Input:focus::-webkit-input-placeholder,textarea:focus::-webkit-input-placeholder {color: transparent;}

The principle is: Set the color of the hint message text provided by placeholder to "transparent" (transparent).

HTML 5 <input> Placeholder Properties