form: input, select, radio, textarea 와 label로 placeholder 대체하기

 

 

웹 표준과 웹 접근성을 위해 form element와 label을 연동할 것

 

// 명시적 - 권장
<label for="name">이름</label> 
<input type="text" id="name"/> 

// 암시적 
<label> 이름 <input type="text" id="name"/> </label>

출처: https://mygumi.tistory.com/359 [마이구미의 HelloWorld]

 

대부분 명시적 방식 권장,

오래된 기기는 암시적 방식을 지원하지 않을 수 있음.

 

input[type="text"]

height, line-height 속성 사용 자제 for 크로스브라우징

( ie8에서 글자 세로정렬에 문제가 있어 제대로 구현되지 않음 )

➡ padding 속성을 사용

 

input[type="text"], input[type="password"] {
	height: auto; /* 높이 초기화 */ 
	line-height: normal; /* line-height 초기화 */ 
	padding: .8em .5em; /* 여백 설정 */ 
}

출처: https://webdir.tistory.com/429 [WEBDIR]

 

디자인 기본 구조

<div class="textbox">
	<label for="ex_input">아이디</label>
	<input type="text" id="ex_input"> 
</div>

출처: https://webdir.tistory.com/429 [WEBDIR]

 

.textbox {
	position: relative; 
    width: 200px; 
    margin: 15px;
}

.textbox label {
  position: absolute;
  top: 1px;  /* input 요소의 border-top 설정값 만큼 */
  left: 1px;  /* input 요소의 border-left 설정값 만큼 */
  padding: .8em .5em;  /* input 요소의 padding 값 만큼 */
  color: #999;
  cursor: text;
}

.textbox input[type="text"],
.textbox input[type="password"] {
  width: 100%;  /* 원하는 너비 설정 */ 
  height: auto;  /* 높이값 초기화 */
  line-height : normal;  /* line-height 초기화 */
  padding: .8em .5em; /* 원하는 여백 설정, 상하단 여백으로 높이를 조절 */
  border: 1px solid #999;
  border-radius: 0;  /* iSO 둥근모서리 제거 */
  outline-style: none;  /* 포커스시 발생하는 효과 제거를 원한다면 */
  -webkit-appearance: none;  /* 브라우저별 기본 스타일링 제거 */
  -moz-appearance: none;
  appearance: none;
}

 

$(document).ready(function() {
  var placeholderTarget = $('.textbox input[type="text"], .textbox input[type="password"]');
  
  //포커스시
  placeholderTarget.on('focus', function(){
    $(this).siblings('label').fadeOut('fast');
  });

  //포커스아웃시
  placeholderTarget.on('focusout', function(){
    if($(this).val() == ''){
      $(this).siblings('label').fadeIn('fast');
    }
  });
});

 

출처 : webdir.tistory.com/429

폼 필드(input type="text") 디자인 #1

 

 

실무에서의 사용

    <div class="form">
        <div class="input_wrap">
            <div class="input_box">
                <label for="u_name">Name</label>
                <input type="text" id="u_name">
            </div>
            <div class="select_box">
                <select id="u_birth">...</select>
                <label for="u_birth">Birth Year</label>
            </div>
        </div>
        <div class="input_wrap">
            <div class="check_wrap">
                <div class="check_box">
                    <input type="radio" name="u_sex" id="u_male">
                    <label for="u_male"></label>
                </div>
                <div class="check_box">
                    <input type="radio" name="u_sex" id="u_female">
                    <label for="u_female"></label>
                </div>
            </div>
        </div>
        <div class="input_wrap">
            <div class="input_box">
                <label for="u_inquiry"></label>
                <textarea id="u_inquiry" cols="30" rows="10"></textarea>
            </div>
        </div>
    </div>

.input_wrap : 각 라인 설정

.input_box : label과 input을 묶은 부모 박스

 

* input[type="text"], textarea ➡ 라벨이 인풋 위로

.input_box position relative

label absolute  위치값 조정 

input-text에 디자인(ex border)

 

* radio ➡ 인풋이 라벨 위로

.check_box position relative

input-radio absolute ➡ 보이지 않게, label 선택 만으로 체크가능

label에 디자인

 

* select ➡ 설렉트가 라벨 위로

.select_box position relative

select opacity 0, z-index 0 ➡ 태그 선택은 되지만 보이지 않게

label에 디자인, absolute, z-index -1

.select_box:after 화살표 이미지 띄우기

 

* 포커스 효과

.input_box label+input:focus,
.input_box label+textarea:focus,
.select_box select:focus+label,
.check_box input:checked+label{
	border: 2px solid #5c5fc6;
}

여기서 css 선택자를 위해 html에서 라벨과 폼 요소 순서의 앞 뒤가 달라짐.

 

* 약관 체크표시

기본 체크 이미지 : label::before

동의 체크 이미지 : input:checked + label::before

 

* 전화번호 중간자리, 뒷자리

.input_wrap > .tel_input > (input+label)*2

input z-index 2

label z-index 1 디자인 (.tel_input 너비 전체)

.tel_input::after ( - 표시) z-index 2