How to create an HTML form with pre-filled in “instructions” that clear when a user clicks in the box?

Question

I have an HTML form as follow:

   

 Username: 
 Passwor         


        

Answer 1

If you use HTML5 you can do this using the placeholder attribute:

    Username: 
    
    Password: 
    
    

I'd still include the Username and Password text wrapped in tags for accessibility, but you could always hide them with some CSS like this:

form {
    position:relative;
}
label {
    position:absolute;
    top:-9999px;
}