I want to display the text on clicking on the input

Okay so I am trying display the text on focus in the input field all i've done so far is this.

HTML

<form>
                <span id="name">
                Name : <input type="text" class="name" name="name" title="lust"/><br />
                <span>ENTER NAME</span>
                </span>
                <span id="mail">
                E-mail : <input type="text" class="mail" name="mail" /><br />
                <span>ENTER NAME</span>
                </span>
                <input type="submit" class="button" />
            </form>

CSS

#forms {
    position: relative;
}

#name span, #mail span {
    display: none;
}

input[type='text']{
    border: 1px solid #008008;
    border-radius: 5px;
    background: #f1f1f1;
    padding: 10px;
    margin-bottom: 10px;
}

input[type='text']:focus {
    background: #fff;
    border: 1px solid #008080;
}

.assistant {
    position: abosolute;
    top: 0px;
}

Can anyone help me achieve this am I doing wrong or I am in correct path? I will be greatful if someone actually help me out.