js+css implementation prompt text to increase form availability

When designing forms, we will add some prompt text. For example, in the search box, we will prompt "Please enter keywords" and hide and display them in time when the search box gets focus and loses focus. The most common method is to use value to set:

Copy the codeThe code is as follows:

 
<form > 
<input type="text" name="keyword" value="Please enter keyword">
<button>Search</button>
</form> 
<script> 
("keyword").onfocus = function() { 
if (("keyword").value == "Please enter keyword") {
("keyword").value = ""; 
} 
} 
("keyword").onblur = function() { 
if (("keyword").value == "") { 
("keyword").value = "Please enter keyword";
} 
} 
("search").onsubmit = function() { 
var keyword = ("keyword").value; 
if (keyword == "" || keyword == "Please enter keyword") {
alert("Please enter keyword");
return false; 
} 
return true; 
} 
</script> 

Although such code implements the functions we want, it is not clean. The reason is that text like "Please enter keywords" is just a prompt text, not a value. Although there is no major technical problem, it still seems troublesome in many cases. For example, we may make the prompt text display color gray, while the text typed by the user will display black.
Let's see how to use CSS to achieve a better way:

Copy the codeThe code is as follows:

 
<style> 
#wrapper { position: relative; display: inline; } 
#description { position: absolute; left: 1px; color: #999999; display: none; } 
</style> 
<form > 
<div > 
<label for="keyword" >Please enter keywords</label>
<input type="text"  name="keyword"> 
</div> 
<button>Search</button>
</form> 
<script> 
 = function() { 
if (!("keyword").value) { 
("description"). = "inline"; 
} 
}; 
("keyword").onfocus = function() { 
if (!("keyword").value) { 
("description"). = "none"; 
} 
} 
("keyword").onblur = function() { 
if (!("keyword").value) { 
("description"). = "inline"; 
} 
} 
("search").onsubmit = function() { 
if (!("keyword").value) { 
alert("Please enter keyword");
return false; 
} 
return true; 
} 
</script> 

Although there are more CSS and JS codes in this way, the structure is more reasonable. By introducing labels to display prompt text (positioned through CSS position attribute), the value itself is simpler, and the prompt text and the text entered by the user are easier to control in the style, such as the depth of the color, thereby improving the usability of the form.