Input

Input 요소는 사용자로부터 데이터를 입력받는 필드를 제공해요. 아이콘, 라벨, 액션 버튼, 파일 입력 등 여러 가지로 확장할 수 있어요.

출처: Input

본문

Types

Input

표준 입력 필드예요

File Input

파일 입력 필드예요

Invisible File Input

파일 입력을 보이지 않게 만들어 다른 요소를 디자인해 파일 대화상자를 트리거할 수 있어요.

Open any file
    
    
    
      
        
        Click here to upload

States

Focus

입력 필드는 사용자가 현재 상호작용 중이라는 것을 보여줄 수 있어요

Loading

아이콘 입력 필드는 현재 데이터를 불러오는 중임을 보여줄 수 있어요

Disabled

입력 필드는 비활성 상태임을 보여줄 수 있어요

Error

입력 필드는 데이터에 오류가 포함되어 있음을 보여줄 수 있어요

"week", "date", "email", "url" 같은 일부 입력 타입은 브라우저 내장 검증을 가지고 있어서, 그 값이 유효하지 않게 되면 자동으로 오류 스타일을 받게 돼요. 일반적으로 required 속성이 설정되어 있고 비어 있는 모든 입력 필드 타입은 유효하지 않은 것으로 간주돼요.

빈 필드와 필수 필드에 오류 클래스가 표시되는 것을 막으려면 placeholder를 사용하세요. 텍스트 placeholder를 원하지 않는다면 공백 문자를 사용하세요.

Variations

Icon

입력은 아이콘으로 포맷할 수 있어요

Labeled

입력은 라벨로 포맷할 수 있어요

https://

.com
        
        
          .com
          .net
          .org

kg

$
      
      .00

Add Tag

I am a
        
          Developer
          Software engineer
          System admin
          Database admin

Action

입력은 사용자가 수행할 수 있는 액션을 알려주도록 포맷할 수 있어요

Search

Checkout

This Page
        
        
          This Organization
          Entire Site

All
        Articles
        Products
      
      Search

Copy

File Action

파일 액션 입력은 파일 트리거 버튼 안에 사용자 정의 콘텐츠를 넣을 수 있게 해줘요. 파일 액션 입력 버튼은 label 요소로 만들어져야 해요.

Choose wisely

Transparent

투명 입력은 배경이 없어요

Inverted

입력은 어두운 배경에 나타나도록 포맷할 수 있어요

Fluid

입력은 컨테이너의 크기를 차지할 수 있어요

Search

Size

입력은 다양한 크기로 변할 수 있어요

Textarea

input 클래스를 사용하면 textarea에서도 일부 기능을 사용할 수 있어요

I have a left corner label
        
        
            
                
            
             I have a right corner label
        
        
             I have an left icon
            
        
        
             I have a right icon
            
        
        
            
                
            
             I have a left icon and left corner label
            
        
        
            
                
            
            I have a right icon and right corner label

더 알아보기

Input은 폼에서 데이터를 받는 핵심 요소예요. 라벨·아이콘·액션과 조합하면 검색창이나 가격 입력 같은 복합 UI를 쉽게 만들 수 있어요. 검증과 결합된 처리는 Form 콜렉션에서 확인해보세요.