menuMDUI문서
color_lens
머티리얼 디자인 3 및 웹 컴포넌트 기반의 새로운 mdui 2가 출시되었습니다. mdui 2 개발 문서 보기.

텍스트 필드

텍스트 필드는 일반적으로 폼에서 사용됩니다. mdui 텍스트 필드에는 글자 수 세기, 폼 유효성 검사 등 다양한 기능이 포함되어 있습니다.

그리드 시스템과 함께 사용하여 폼 레이아웃을 구성할 수 있습니다.

호출 방식

페이지 로드가 완료되면 자동으로 초기화됩니다. 동적으로 생성된 텍스트 필드의 경우 mdui.mutation()을 호출하여 초기화해야 합니다.

색상

강조 색상을 사용합니다.

관련 읽기

Material Design 가이드라인: 컴포넌트 - 텍스트 필드

스타일

한 줄 텍스트 필드

가장 간단한 텍스트 필드 예시입니다:

codeplay_arrow
예시
<div class="mdui-textfield">
  <input class="mdui-textfield-input" type="text" placeholder="User Name"/>
</div>

고정 라벨

codeplay_arrow
예시
<div class="mdui-textfield">
  <label class="mdui-textfield-label">User Name</label>
  <input class="mdui-textfield-input" type="text"/>
</div>

플로팅 라벨

codeplay_arrow
예시
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" />
</div>

비활성화 상태

.mdui-textfield-input 요소에 disabled 속성을 추가하여 텍스트 필드를 비활성화할 수 있습니다.

codeplay_arrow
예시
<div class="mdui-textfield">
  <input class="mdui-textfield-input" type="text" disabled placeholder="User Name"/>
</div>

<!-- 고정 라벨 -->
<div class="mdui-textfield">
  <label class="mdui-textfield-label">User Name</label>
  <input class="mdui-textfield-input" type="text" disabled />
</div>

<!-- 플로팅 라벨 -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" disabled />
</div>

여러 줄 텍스트 필드

한 줄 텍스트 필드의 input 태그를 textarea 태그로 바꾸면 여러 줄 텍스트 필드가 됩니다. 여러 줄 텍스트 필드는 내용의 높이에 따라 텍스트 필드의 높이를 자동으로 조절합니다.

codeplay_arrow
예시
<div class="mdui-textfield">
  <textarea class="mdui-textfield-input" placeholder="Description"></textarea>
</div>

<!-- 고정 라벨 -->
<div class="mdui-textfield">
  <label class="mdui-textfield-label">Subject</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- 플로팅 라벨 -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- 비활성화 상태 -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Disabled</label>
  <textarea class="mdui-textfield-input" disabled></textarea>
</div>

textarea에 rows 속성을 추가하면 텍스트 필드의 높이가 고정됩니다.

codeplay_arrow
예시
<div class="mdui-textfield">
  <textarea class="mdui-textfield-input" rows="4" placeholder="Message"></textarea>
</div>

도움말 텍스트 포함

<div class="mdui-textfield"></div> 내부 끝에 <div class="mdui-textfield-helper"></div> 요소를 추가하여 도움말 텍스트를 추가할 수 있습니다.

codeplay_arrow
예시
<div class="mdui-textfield">
  <input type="email" class="mdui-textfield-input" placeholder="Email" />
  <div class="mdui-textfield-helper">Helper Text</div>
</div>

아이콘 포함

codeplay_arrow
예시
<div class="mdui-textfield">
  <i class="mdui-icon material-icons">email</i>
  <input class="mdui-textfield-input" type="email" placeholder="Email"/>
</div>

<!-- 고정 라벨 -->
<div class="mdui-textfield">
  <i class="mdui-icon material-icons">account_circle</i>
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" />
  <div class="mdui-textfield-helper">Helper Text</div>
</div>

<!-- 플로팅 라벨, 여러 줄 텍스트 필드 -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <i class="mdui-icon material-icons">textsms</i>
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- 비활성화 상태 -->
<div class="mdui-textfield">
  <i class="mdui-icon material-icons">lock</i>
  <input class="mdui-textfield-input" type="text" placeholder="Disabled" disabled/>
</div>

확장 가능한 텍스트 필드

codeplay_arrow
예시
<div class="mdui-textfield mdui-textfield-expandable">
  <button class="mdui-textfield-icon mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </button>
  <input class="mdui-textfield-input" type="text" placeholder="Search"/>
  <button class="mdui-textfield-close mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">close</i>
  </button>
</div>

<div class="mdui-textfield mdui-textfield-expandable mdui-float-right">
  <button class="mdui-textfield-icon mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </button>
  <input class="mdui-textfield-input" type="text" placeholder="Search"/>
  <button class="mdui-textfield-close mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">close</i>
  </button>
</div>

기능

폼 유효성 검사

mdui는 HTML5를 사용하여 폼 유효성 검사를 수행합니다. <div class="mdui-textfield"></div> 내부 끝에 <div class="mdui-textfield-error"></div> 요소를 추가하여 오류 메시지를 표시할 수 있습니다.

에러 메시지와 도움말 텍스트가 모두 포함된 경우 도움말 텍스트 요소를 에러 메시지 요소 뒤에 배치해야 합니다.

codeplay_arrow
예시
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" required />
  <div class="mdui-textfield-error">사용자 이름을 입력해 주세요</div>
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" required />
  <div class="mdui-textfield-error">이메일 형식이 잘못되었습니다</div>
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Password</label>
  <input
    class="mdui-textfield-input"
    type="text"
    pattern="^.*(?=.{6,})(?=.*[a-z])(?=.*[A-Z]).*$$"
    required
  />
  <div class="mdui-textfield-error">비밀번호는 대소문자를 포함하여 최소 6자 이상이어야 합니다</div>
  <div class="mdui-textfield-helper">대소문자를 포함하여 최소 6자 이상의 비밀번호를 입력해 주세요</div>
</div>

HTML5 폼 유효성 검사 외에도 JavaScript를 사용하여 검증할 수 있습니다.

유효하지 않은 텍스트 필드에 .mdui-textfield-invalid 클래스를 추가하고 유효해지면 해당 클래스를 제거하면 됩니다.

codeplay_arrow
예시
<div class="mdui-textfield mdui-textfield-invalid">
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" />
  <div class="mdui-textfield-error">이미 존재하는 사용자 이름입니다</div>
</div>

글자 수 세기

input 요소에 maxlength="" 속성을 추가하여 입력 글자 수를 제한할 수 있습니다. mdui는 자동으로 실시간 글자 수를 오른쪽 하단에 표시해 줍니다.

codeplay_arrow
예시
<div class="mdui-textfield">
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" maxlength="20" />
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" maxlength="60" />
  <div class="mdui-textfield-error">이메일 형식이 잘못되었습니다</div>
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input" maxlength="140"></textarea>
</div>

동적으로 생성된 텍스트 필드

텍스트 필드가 동적으로 생성된 경우 mdui.mutation()을 호출하여 초기화해야 합니다.

텍스트 필드 내용을 동적으로 수정했다면 mdui.updateTextFields() 메서드를 호출하여 텍스트 필드를 다시 초기화해야 합니다. 이 메서드는 .mdui-textfield 클래스를 포함한 CSS 선택자, DOM 요소 또는 DOM 요소 배열을 매개변수로 받을 수 있으며, 지정된 텍스트 필드만 다시 초기화할 수 있습니다. 매개변수를 전달하지 않으면 페이지의 모든 텍스트 필드를 다시 초기화합니다.

CSS 클래스 목록

클래스 이름설명
.mdui-textfield텍스트 필드를 정의합니다.
.mdui-textfield-floating-label플로팅 라벨 텍스트 필드를 정의합니다.
.mdui-textfield-label텍스트 필드의 라벨을 정의합니다.
.mdui-textfield-input텍스트 필드의 입력란을 정의합니다.
.mdui-textfield-error폼 유효성 검사 에러 메시지를 정의합니다.
.mdui-textfield-helper텍스트 필드의 도움말 텍스트를 정의합니다.
arrow_backPrevious
접기 패널
arrow_forwardNext
선택 컨트롤