테스트 사이트 - 개발 중인 베타 버전입니다

회원가입 input label 문의

· 12년 전 · 2573 · 4
제목 없음-2.jpg
안녕하세요

회원가입 input에 text를 넣고싶은데 (첨부사진처럼..)

<label for='reg_mb_id'>아이디</label>
<input class=ed maxlength=20 style="background:#fbfbfb; border:1px solid #dcdde3;" id='reg_mb_id' name="mb_id">


이런식으로 했는데 전혀 먹히지가 않더라구요..

여기저기 검색해보니까 저게 맞는거 같은데

그누보드는 다른가요?ㅠ

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 4개

input에 type을 해주셔야죠
input type="text" 요렇게 넣어주세요
12년 전
똑같이 안되요 ㅠㅠ
아래 코드 중 자바스크립트 부분을 참고 해 보세요. 그누보드 사이트의 로그인 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'는 글자 자체가 *** 처럼 안보이게 처리되므로 복잡한 과정이 필요합니다
따라서 이미지로 비밀번호 라는 글자를 만들어서 배경으로 넣는 방법으로..

게시글 목록

번호 제목
284348
284336
284333
284332
284320
284318
284316
284313
284307
284306
284303
284298
284296
284290
284286
284280
284277
284272
284261
284259