정보를 입력 받는 form의 기본형태 입니다.
Input요소의 기능 및 상태별로 스타일을 정의한 샘플입니다.

TODO

• input placeholder
• input 설명 표시 룰 PopOver 확장 예정

HTML

  

    
필수사항
    

      *input default
        
    
    

      *input error
      
    
    

      *input focuse
      
    
    

      *select box
      
        KOREA
        JAPAN
        USA
      
    
  
  
  

    
선택사항
    

      input default
        
    
    

      input error
      
    
    

      input focuse
      
    
    

      sex
      남성
      여성
    
    

      mailing
      
    
    

      memo
      
    
    
    

      
      취소
    
  
		
	

CSS

.form-horizontal div { margin-bottom: 10px; }
.form-horizontal label { display: inline-block; width: 100px; vertical-align: top; }  

.input-text, 
.input-error,
.input-focused,
select { padding: 3px 5px; width: 200px; line-height: 20px; box-shadow: inset 1px 2px 2px rgba(200, 200, 200, 0.2); border: solid 1px #d9d9d9; }
select { width: 212px; }

.input-text { border-color: #d9d9d9; }
.input-error { border-color: #B94A48; }
.input-focused { border-collapse: separate; border-color: #56B4EF; box-shadow: 0 0 5px #3699FF !important; outline-style: none; }
.input-text:focus, 
textarea:focus,
select:focus { border-collapse: separate; border-color: #56B4EF; box-shadow: 0 0 5px #3699FF !important; outline-style: none; }

.required { color: #ae0021; margin: 0 5px; }
form legend { font-size: 14px; display: block; width: 100%; font-weight: bold; margin-bottom: 10px; padding-bottom: 5px; border-bottom: solid 1px #ebebeb; }
input { vertical-align: top; }
textarea { width: 550px; height: 60px; border: solid 1px #d9d9d9; padding: 3px 5px; font-size: 12px; }		
	

History

• 필수항목, 선택항목 스타일 추가[박정식 | 2012.02.28]