The basic setup is this:
Limited space means no room for labels in a login form. So instead we used a preset value in the input elements, like so:
Which looks like this:
The easy way to blank out the descriptive text is to use the onfocus event like so:
But this is not enough for the password input, because we do not want to reveal a user’s password as it is typed. We must change the input type to password. This causes the input element to lose focus, so we set it again after changing type:
Cool. But it doesn’t work in Safari. Tabbing from the username field to the password field does not work as expected. The input element looks focused but it won’t accept any keyboard input until you click in the field.
Solution — use the select method instead of focus: