기본 텍스트 입력

분류: 폼 요소

텍스트 입력 필드의 기본형과 상태 변형을 모은 예제입니다. label과 .form-control(또는 .form-control-plaintext)을 짝지어 쓰는 것이 기본 패턴이며, disabled·readonly·required 같은 표준 HTML 속성만으로 비활성화·읽기 전용·필수 입력 상태를 표현합니다. 여러 줄 입력이 필요하면 input 대신 textarea를 같은 구조로 사용하면 됩니다.

소스

<div class="mb-3">
    <label class="form-label">정적 텍스트</label>
    <div class="form-control-plaintext">입력 값</div>
</div>

<div class="mb-3">
    <label class="form-label">텍스트</label>
    <input type="text" class="form-control" name="example-text-input" placeholder="내용을 입력 하세요">
</div>

<div class="mb-3">
    <label class="form-label">비밀번호</label>
    <input type="text" class="form-control" name="example-password-input" placeholder="비밀번호를 입력 하세요">
</div>

<div class="mb-3">
    <label class="form-label">비활성화</label>
    <input type="text" class="form-control" name="example-disabled-input" placeholder="비활성화됨..." value="이 입력란은 비활성화되었습니다." disabled="">
</div>

<div class="mb-3">
    <label class="form-label">읽기 전용</label>
    <input type="text" class="form-control" name="example-disabled-input" placeholder="읽기 전용..." value="이 입력란은 읽기 전용입니다." readonly="">
</div>

<div class="mb-3">
    <label class="form-label required">필수 입력</label>
    <input type="text" class="form-control" name="example-required-input" placeholder="필수 입력 항목...">
</div>

<div class="mb-3">
    <label class="form-label">텍스트 영역 <span class="form-label-description">56/100</span></label>
    <textarea class="form-control" name="example-textarea-input" rows="6" placeholder="내용..">이곳에 여러 줄의 텍스트를 입력할 수 있습니다. 예시 문장입니다.</textarea>
</div>

사용된 주요 클래스

클래스	역할
form-control	텍스트/비밀번호 입력, 텍스트 영역의 기본 테두리·여백 스타일
form-control-plaintext	테두리와 배경 없이 값만 표시하는 읽기 전용 텍스트 스타일
form-label	입력 필드 위에 붙는 라벨 텍스트 스타일
form-label-description	라벨 오른쪽에 보조 설명(글자 수 등)을 옅은 색으로 표시
mb-3	필드 그룹 사이 아래쪽 여백(margin-bottom)
required	form-label에 붙여 라벨에 필수 입력 표시(*)를 자동으로 추가

참고 자료

• Form elements

실전 예제 페이지

HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/폼-요소-기본-텍스트-입력.html 경로에서 렌더링 결과를 확인할 수 있습니다.

미리보기새 창에서 열기 ↗