폼 컨트롤
폼 컨트롤 (Form controls)
<input>과 <textarea> 같은 텍스트형 폼 컨트롤을 커스텀 스타일, 크기 조절, 포커스 상태 등으로 업그레이드해 보아요.
출처: 문서
본문
예시 (Example)
폼 컨트롤은 Sass와 CSS 변수의 조합으로 스타일링되어, 색상 모드에 적응하고 모든 커스터마이즈 방법을 지원할 수 있어요.
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
크기 조절 (Sizing)
.form-control-lg와 .form-control-sm 같은 클래스로 높이를 설정해요.
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
폼 텍스트 (Form text)
.form-text를 사용해 블록 레벨 또는 인라인 레벨의 폼 텍스트를 만들 수 있어요.
폼 텍스트는 aria-describedby 속성을 사용해서 관련된 폼 컨트롤과 명시적으로 연결해야 해요. 이렇게 하면 사용자가 컨트롤에 포커스를 주거나 입력할 때 스크린 리더 같은 보조 기술이 이 폼 텍스트를 알려주게 돼요.
입력 아래의 폼 텍스트는 .form-text로 스타일링할 수 있어요. 블록 레벨 요소를 사용한다면 위의 입력과 쉽게 간격을 두기 위해 상단 마진이 추가돼요.
<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>
인라인 텍스트는 .form-text 클래스만 있으면 어떤 일반적인 인라인 HTML 요소(<span>, <small> 등)도 사용할 수 있어요.
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="inputPassword6" class="col-form-label">Password</label>
</div>
<div class="col-auto">
<input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
</div>
<div class="col-auto">
<span id="passwordHelpInline" class="form-text">
Must be 8-20 characters long.
</span>
</div>
</div>
비활성화 (Disabled)
입력에 disabled 불리언 속성을 추가하면 회색으로 보이는 외형을 주고, 포인터 이벤트를 제거하며, 포커스를 방지해요.
<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>
읽기 전용 (Readonly)
입력에 readonly 불리언 속성을 추가하면 입력의 값 수정을 방지해요. 읽기 전용 입력은 여전히 포커스하고 선택할 수 있지만, 비활성화된 입력은 그럴 수 없어요.
<input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example" readonly>
읽기 전용 일반 텍스트 (Readonly plain text)
폼에 <input readonly> 요소를 일반 텍스트로 스타일링하고 싶다면, .form-control을 .form-control-plaintext로 바꿔 기본 폼 필드 스타일을 제거하고 올바른 마진과 패딩을 유지해요.
<div class="mb-3 row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
</div>
</div>
<div class="mb-3 row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
<form class="row g-3">
<div class="col-auto">
<label for="staticEmail2" class="visually-hidden">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
</div>
<div class="col-auto">
<label for="inputPassword2" class="visually-hidden">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-3">Confirm identity</button>
</div>
</form>
파일 입력 (File input)
<div class="mb-3">
<label for="formFile" class="form-label">Default file input example</label>
<input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
<label for="formFileMultiple" class="form-label">Multiple files input example</label>
<input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
<div class="mb-3">
<label for="formFileDisabled" class="form-label">Disabled file input example</label>
<input class="form-control" type="file" id="formFileDisabled" disabled>
</div>
<div class="mb-3">
<label for="formFileSm" class="form-label">Small file input example</label>
<input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div>
<label for="formFileLg" class="form-label">Large file input example</label>
<input class="form-control form-control-lg" id="formFileLg" type="file">
</div>
색상 (Color)
type="color"을 설정하고 <input>에 .form-control-color를 추가해요. 수정자 클래스를 사용해 고정 높이를 설정하고 브라우저 간의 몇 가지 불일치를 재정의해요.
<label for="exampleColorInput" class="form-label">Color picker</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">
데이터리스트 (Datalists)
데이터리스트(datalist)를 사용하면 <input> 안에서 접근(및 자동 완성)할 수 있는 <option> 그룹을 만들 수 있어요. 이는 <select> 요소와 비슷하지만, 메뉴 스타일링 제한과 차이점이 더 많아요. 대부분의 브라우저와 운영체제가 <datalist> 요소를 어느 정도 지원하지만, 스타일링은 기껏해야 일관되지 않아요.
데이터리스트 요소 지원에 대해 자세히 알아보세요.
<label for="exampleDataList" class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>
CSS
Sass 변수 (Sass variables)
$input-*는 대부분의 폼 컨트롤(그리고 버튼이 아닌)에서 공유돼요.
scss/_variables.scss
$input-padding-y: $input-btn-padding-y;
$input-padding-x: $input-btn-padding-x;
$input-font-family: $input-btn-font-family;
$input-font-size: $input-btn-font-size;
$input-font-weight: $font-weight-base;
$input-line-height: $input-btn-line-height;
$input-padding-y-sm: $input-btn-padding-y-sm;
$input-padding-x-sm: $input-btn-padding-x-sm;
$input-font-size-sm: $input-btn-font-size-sm;
$input-padding-y-lg: $input-btn-padding-y-lg;
$input-padding-x-lg: $input-btn-padding-x-lg;
$input-font-size-lg: $input-btn-font-size-lg;
$input-bg: var(--#{$prefix}body-bg);
$input-disabled-color: null;
$input-disabled-bg: var(--#{$prefix}secondary-bg);
$input-disabled-border-color: null;
$input-color: var(--#{$prefix}body-color);
$input-border-color: var(--#{$prefix}border-color);
$input-border-width: $input-btn-border-width;
$input-box-shadow: var(--#{$prefix}box-shadow-inset);
$input-border-radius: var(--#{$prefix}border-radius);
$input-border-radius-sm: var(--#{$prefix}border-radius-sm);
$input-border-radius-lg: var(--#{$prefix}border-radius-lg);
$input-focus-bg: $input-bg;
$input-focus-border-color: tint-color($component-active-bg, 50%);
$input-focus-color: $input-color;
$input-focus-width: $input-btn-focus-width;
$input-focus-box-shadow: $input-btn-focus-box-shadow;
$input-placeholder-color: var(--#{$prefix}secondary-color);
$input-plaintext-color: var(--#{$prefix}body-color);
$input-height-border: calc(#{$input-border-width} * 2); // stylelint-disable-line function-disallowed-list
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2);
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y);
$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5);
$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false));
$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false));
$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false));
$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
$form-color-width: 3rem;
$form-label-*와 $form-text-*는 우리의 <label>과 .form-text 컴포넌트용이에요.
scss/_variables.scss
$form-label-margin-bottom: .5rem;
$form-label-font-size: null;
$form-label-font-style: null;
$form-label-font-weight: null;
$form-label-color: null;
scss/_variables.scss
$form-text-margin-top: .25rem;
$form-text-font-size: $small-font-size;
$form-text-font-style: null;
$form-text-font-weight: null;
$form-text-color: var(--#{$prefix}secondary-color);
$form-file-*는 파일 입력용이에요.
scss/_variables.scss
$form-file-button-color: $input-color;
$form-file-button-bg: var(--#{$prefix}tertiary-bg);
$form-file-button-hover-bg: var(--#{$prefix}secondary-bg);