input에 type을 해주셔야죠
input type="text" 요렇게 넣어주세요

아래 코드 중 자바스크립트 부분을 참고 해 보세요. 그누보드 사이트의 로그인 Input 박스 클릭 했을 때의 효과는 자바스크립트 입니다. 단순히 Label 태그로는 구현 할 수 없는 부분이고요... display:none 스타일 속성을 적용하면서 까지 label 태그를 쓴 이유는 자바스크립트 및 css 스타일 적용이 안되는 브라우저에서의 웹 접근성을 위한겁니다. 그누보드 사이트의 css 파일을 잘 살펴보시면 ol_hidden 이라는 클래스에는 display:none 가 적용 되 있는걸 볼 수 있을겁니다.

<form name='foutlogin' method='post' onsubmit='return foutlogin_submit(this);' autocomplete='off'>
<fieldset>
    <legend>회원로그인 폼</legend>
    <label for='ol_id' class='ol_hidden'>아이디</label>
    <input type='text' id='ol_id' name='mb_id' class='ol_inp' value="" style='ime-mode:disabled;' />
    <label for='ol_pw' class='ol_hidden'>패스워드</label>
    <input type='password' id='ol_pw' name='mb_password' class='ol_inp pw' />
    <input type='submit' class='ol_submit' value='로그인' />
</fieldset>
</form>
 
<script>
$(document).ready(function(){
    //placeholder 를 배경이미지로 구현 http://touchsoul.tistory.com/12 기본틀 참조하여 수정
    //wrest.js : required 에 배경이미지 삽입하는 소스 비활성화 함
    $ol_id = $('#ol_id');
    $ol_pw = $('#ol_pw');
    if ($ol_id.attr('value') == "") $ol_id.addClass('st_id'); //아이디 저장을 안 쓸 때만 백그라운드 사용
    $ol_pw.addClass('st_pw');
    $ol_id.focus(function() {
        $(this).removeClass('st_id');
    });
    $ol_pw.focus(function() {
        $(this).removeClass('st_pw');
    });
    $ol_id.blur(function() {
        $this = $(this);
        if($this.attr('id') == "ol_id" && $this.attr('value') == "") $this.addClass('st_id');
    });
    $ol_pw.blur(function() {
        $this = $(this);
        if($this.attr('id') == "ol_pw" && $this.attr('value') == "") $this.addClass('st_pw');
    });
});
</script>

<input class=ed maxlength=20 style="background:#fbfbfb; border:1px solid #dcdde3;"  id='reg_mb_id' name="mb_id" value='아이디' onfocus="if(this.value=='아이디') this.value=''">

아이디는 위와 같이 할 수 있습니다
type='password'는 글자 자체가 *** 처럼 안보이게 처리되므로 복잡한 과정이 필요합니다
따라서 이미지로 비밀번호 라는 글자를 만들어서 배경으로 넣는 방법으로..