양식

다양한 양식을 만들기위한 양식 컨트롤 스타일, 레이아웃 옵션 및 사용자 지정 구성 요소에 대한 예제 및 사용 지침

개요

Bootstrap의 양식 컨트롤은 클래스가있는 Rebooted 양식 스타일에서 확장됩니다. 이 클래스를 사용하여 브라우저와 기기에서보다 일관된 렌더링을 위해 맞춤 디스플레이를 선택하세요.

모든 입력에 적절한 type 속성을 사용해야합니다 (예 : , 이메일 주소의 경우 email 또는 숫자 정보의 경우 number) 이메일 확인, 번호 선택 등과 같은 최신 입력 컨트롤을 활용합니다.

다음은 Bootstrap의 양식 스타일을 보여주는 간단한 예입니다. 필수 클래스, 양식 레이아웃 등에 대한 문서를 계속 읽으십시오.

양식 컨트롤

사용자 정의 양식을 탐색하여

s.

파일 입력의 경우 .form-control를 .

크기 조정

.form-control-lg 및

.

읽기 전용

readonly 입력 값의 수정을 방지하기위한 입력의 부울 속성. 읽기 전용 입력은 비활성화 된 입력과 마찬가지로 더 밝게 표시되지만 표준 커서는 유지됩니다.

읽기 전용 일반 텍스트

양식에 <input readonly> 요소를 일반 텍스트로 스타일 지정하려면 .form-control-plaintext 클래스를 사용하여 기본 양식 필드 스타일을 제거하고 올바른 여백과 패딩을 유지합니다.

체크 박스 및 라디오

기본값 체크 박스와 라디오는 HTML 요소의 레이아웃과 동작을 개선하는 두 입력 유형에 대한 단일 클래스 인 .form-check의 도움으로 개선되었습니다. 체크 박스는 목록에서 하나 또는 여러 옵션을 선택하기위한 것이고 라디오는 여러 옵션 중에서 하나를 선택하기위한 것입니다.

비활성화 된 체크 박스와 라디오는 지원되지만 not-allowed 커서를 부모 <label> 위로 가져 가면 disabled 속성을 . disabled 속성은 입력 상태를 나타내는 데 도움이되도록 더 밝은 색상을 적용합니다.

체크 박스 및 라디오 사용은 HTML 기반 양식 유효성 검사를 지원하고 간결하고 액세스 가능한 레이블을 제공하도록 구축되었습니다. 따라서 <input> 및 <label>는 <input>가 아닌 형제 요소입니다. <label> 내. <input>를 연결하려면 id 및 for 속성을 지정해야하므로 약간 더 자세합니다. 및 <label>.

기본값 (스택 됨)

기본적으로 직계 형제 인 확인란과 라디오는 세로로 스택되고 .form-check로 적절한 간격을 둡니다.

인라인

동일한 가로 행에있는 그룹 확인란 또는 라디오 .form-check-inline를 .form-check에 추가합니다.

레이블 없음

레이블 텍스트가없는 .form-check 내의 입력에 .position-static를 추가합니다. 보조 기술에 대한 몇 가지 형식의 레이블을 제공해야합니다 (예 : aria-label 사용).

레이아웃

Bootstrap은 거의 모든 양식 컨트롤에 display: block 및 width: 100%를 적용하기 때문에 , 양식은 기본적으로 세로로 쌓입니다. 추가 클래스를 사용하여 양식별로이 레이아웃을 변경할 수 있습니다.

양식 그룹

.form-group 클래스가 가장 쉬운 방법입니다. 양식에 구조를 추가합니다. 레이블, 컨트롤, 선택적 도움말 텍스트 및 양식 유효성 검사 메시징의 적절한 그룹화를 권장하는 유연한 클래스를 제공합니다. 기본적으로 margin-bottom 만 적용되지만 필요에 따라 .form-inline에서 추가 스타일을 선택합니다. <fieldset>, <div> 또는 거의 모든 다른 요소와 함께 사용하세요.

양식 그리드

그리드 클래스를 사용하여 더 복잡한 양식을 만들 수 있습니다. 여러 열, 다양한 너비 및 추가 정렬 옵션이 필요한 양식 레이아웃에 사용합니다.

양식 행

.row를 .form-row, 기본 열 거터를 재정의하는 표준 그리드 행의 변형 인 div>는 더 조밀하고 컴팩트 한 레이아웃을 제공합니다.

그리드 시스템을 사용하여 더 복잡한 레이아웃을 만들 수도 있습니다.

수평 양식

.row 클래스를 그룹에 추가하고 다음을 사용하여 그리드가있는 수평 양식을 만듭니다. .col-*-* 클래스를 사용하여 레이블 및 컨트롤의 너비를 지정합니다. .col-form-label를 <label>에도 추가하여 관련 양식 컨트롤과 함께 세로 중앙에 오도록하십시오.

때로는 마진 또는 패딩 유틸리티를 사용하여 필요한 완벽한 정렬을 만들어야 할 수도 있습니다. 예를 들어 텍스트 기준선을 더 잘 정렬하기 위해 스택 형 라디오 입력 레이블에서 padding-top를 제거했습니다.

수평 양식 레이블 크기 조정

열 크기 조정

이전 예에서 볼 수 있듯이 그리드 시스템을 사용하면 원하는 수의 .col는 .row 또는 .form-row 내에 있습니다. 사용 가능한 너비를 균등하게 분할합니다. 열의 하위 집합을 선택하여 더 많거나 적은 공간을 차지하고 나머지 .col는 .

자동 크기 조정

아래 예에서는 flexbox 유틸리티를 사용하여 콘텐츠를 세로로 중앙에 배치하고 변경합니다. .col를 .col-auto로 변경하여 열이 필요한만큼만 공간을 차지하도록합니다. 다시 말해, 열 크기는 내용에 따라 자체적으로 조정됩니다.

그런 다음 크기별 열 클래스로 다시 한 번 리믹스 할 수 있습니다.

물론 사용자 지정 양식 컨트롤이 지원됩니다.

인라인 양식

.form-inline 클래스를 사용하여 단일 가로 행에 일련의 레이블, 양식 컨트롤 및 버튼을 표시합니다. 인라인 양식 내의 양식 컨트롤은 기본 상태와 약간 다릅니다.

• 컨트롤은 display: flex로, HTML 공백을 축소하고 정렬 컨트롤을 제공 할 수 있습니다. 공백 및 플렉스 박스 유틸리티.
• 컨트롤 및 입력 그룹은 부트 스트랩 기본값 width: 100%을 재정의하기 위해 width: auto를받습니다.
• 컨트롤은 모바일 장치의 좁은 뷰포트를 고려하기 위해 너비가 576px 이상인 뷰포트에서만 인라인으로 나타납니다.

개별 양식 컨트롤의 너비와 정렬을 수동으로 처리해야 할 수도 있습니다. 간격 유틸리티 포함 (아래 참조). 마지막으로 .sr-only를 사용하여 스크린 리더가 아닌 방문자로부터 숨겨야하는 경우에도 각 양식 컨트롤에 항상 <label>를 포함해야합니다. .

사용자 정의 양식 컨트롤 및 선택도 지원됩니다.

도움말 텍스트

.form-text (이전 v3에서는 .help-block로 알려짐). 인라인 도움말 텍스트는 .text-muted와 같은 모든 인라인 HTML 요소 및 유틸리티 클래스를 사용하여 유연하게 구현할 수 있습니다.

입력 아래의 도움말 텍스트는 . 이 클래스는 display: block를 포함하고 위의 입력에서 쉽게 간격을두기 위해 상단 여백을 추가합니다.

인라인 텍스트는 일반적인 인라인 HTML 요소 (<small>, <span> 등)를 사용할 수 있습니다. 유틸리티 클래스에 지나지 않습니다.

사용할 수없는 양식

입력에 disabled 부울 속성을 추가하여 사용자 상호 작용을 방지하고 표시되도록합니다. 더 가볍습니다.

disabled 속성을 <fieldset>에 추가하여 모든 컨트롤을 비활성화합니다.

검증

지원되는 모든 브라우저에서 사용할 수있는 HTML5 양식 검증을 통해 사용자에게 가치 있고 실행 가능한 피드백을 제공하십시오. 브라우저 기본 유효성 검사 피드백에서 선택하거나 기본 제공 클래스 및 시작 JavaScript를 사용하여 사용자 지정 메시지를 구현합니다.

작동 방식

다음은 부트 스트랩에서 양식 유효성 검사가 작동하는 방식입니다.

• HTML 양식 유효성 검사는 CSS의 두 가상 클래스를 통해 적용됩니다. :invalid 및 :valid. <input>, <select> 및 <textarea> 요소에 적용됩니다.
• Bootstrap은 :invalid 및 :valid 스타일을 상위 .was-validated 클래스로 범위 지정하며 일반적으로 <form>. 그렇지 않으면 값이없는 필수 필드는 페이지로드시 유효하지 않은 것으로 표시됩니다. 이런 식으로 활성화시기를 선택할 수 있습니다 (일반적으로 양식 제출을 시도한 후).
• 대체로 .is-invalid 및 .is-valid 클래스는 서버 측 유효성 검사를 위해 의사 클래스 대신 사용할 수 있습니다. .was-validated 부모 클래스가 필요하지 않습니다.
• CSS 작동 방식의 제약으로 인해 (현재) 는 사용자 정의 JavaScript의 도움없이 DOM에서 양식 제어 앞에 제공됩니다.
• 모든 최신 브라우저는 양식 제어를 검증하기위한 일련의 JavaScript 메소드 인 제약 조건 검증 API를 지원합니다.
• 피드백 메시지는 브라우저 기본값 (각 브라우저에 따라 다르며 CSS를 통해 스타일링 할 수 없음) 또는 추가 HTML 및 CSS가있는 사용자 정의 피드백 스타일을 활용할 수 있습니다.
• setCustomValidity

이를 염두에두고 사용자 정의 양식 유효성 검사 스타일, 선택적 서버 측 클래스 및 브라우저 기본값에 대한 다음 데모를 고려하십시오.

사용자 지정 스타일

사용자 지정 부트 스트랩 양식 유효성 검사 메시지의 경우 novalidate 부울 속성을 <form>. 이렇게하면 브라우저 기본 피드백 도구 설명이 비활성화되지만 JavaScript에서 양식 유효성 검사 API에 대한 액세스는 계속 제공됩니다. 아래 양식을 제출해보십시오. Google 자바 스크립트가 제출 버튼을 가로 채고 피드백을 전달합니다.

제출을 시도하면 :invalid 및 스타일이 양식 컨트롤에 적용되었습니다.

브라우저 기본값

사용자 지정 유효성 검사 피드백 메시지 나 양식 동작을 변경하기위한 JavaScript 작성에 관심이 없습니까? 좋습니다. 브라우저 기본값을 사용할 수 있습니다. 아래 양식을 제출해보세요. 브라우저 및 OS에 따라 약간 다른 스타일의 피드백이 표시됩니다.

이러한 피드백 스타일은 CSS로 스타일을 지정할 수 없지만 JavaScript를 통해 피드백 텍스트를 사용자 정의 할 수 있습니다.

서버 측

클라이언트 측 유효성 검사를 사용하는 것이 좋지만 서버 측이 필요한 경우 .is-invalid 및 .is-valid. 이러한 클래스에서는 .invalid-feedback도 지원됩니다.

지원되는 요소

예제 양식은 위의 기본 텍스트 <input>를 표시하지만 양식 유효성 검사 스타일을 사용할 수 있습니다. 사용자 지정 양식 컨트롤에도 사용할 수 있습니다.

툴팁

양식 레이아웃에서 허용하는 경우 .{valid|invalid}-feedback.{valid|invalid}-tooltip 클래스에 대한 / div> 클래스는 스타일이 지정된 도구 설명에 유효성 검사 피드백을 표시합니다. 툴팁 배치를 위해 position: relative가있는 상위 항목이 있어야합니다. 아래 예에서 열 클래스에는 이미이 항목이 있지만 프로젝트에 다른 설정이 필요할 수 있습니다.

사용자 지정 양식

더 많은 사용자 지정 및 교차 브라우저 일관성을 유지하려면 완전히 사용자 정의 된 양식 요소를 사용하여 브라우저 기본값을 대체하십시오. 의미 론적 및 액세스 가능한 마크 업 위에 구축되어 모든 기본 양식 컨트롤을 대체합니다.

체크 박스 및 라디오

각 체크 박스와 라디오는 <div>는 형제 <span>를 사용하여 사용자 정의 컨트롤을 만들고 함께 제공되는 텍스트에 대한 <label>를 만듭니다. 구조적으로 이것은 기본 .form-check와 동일한 접근 방식입니다.

우리는 형제 선택기 (~)를 사용합니다. 모든 <input> 상태 (예 : :checked)는 사용자 지정 양식 표시기의 스타일을 올바르게 지정합니다. .custom-control-label 클래스와 결합하면 <input>의 상태에 따라 각 항목의 텍스트 스타일을 지정할 수도 있습니다.

기본 <input>를 opacity로 숨기고 .custom-control-label를 사용하여 ::before 및 ::after가있는 새로운 사용자 지정 양식 표시기가 그 자리에 있습니다. 안타깝게도 CSS의 content가 해당 요소에서 작동하지 않기 때문에 <input>만으로는 맞춤 설정을 만들 수 없습니다.

선택된 상태에서는 Open Iconic의 base64 내장 SVG 아이콘을 사용합니다. 이를 통해 브라우저와 기기에서 스타일과 위치를 가장 잘 제어 할 수 있습니다.

확인란

사용자 정의 확인란을 선택하십시오. JavaScript를 통해 수동으로 설정할 때 :indeterminate 유사 클래스를 사용할 수도 있습니다 (지정할 수있는 HTML 속성이 없음).

jQuery를 사용하는 경우 다음과 같이 충분합니다.

라디오

인라인

사용 안함

사용자 정의 확인란 및 라디오도 비활성화 할 수 있습니다. disabled 부울 속성을 <input>에 추가하면 맞춤 표시기와 라벨 설명에 자동으로 스타일이 지정됩니다.

메뉴 선택

사용자 정의 <select> 메뉴에는 사용자 정의 스타일을 트리거하기위한 사용자 정의 클래스 인 .custom-select 만 필요합니다.

작고 큰 사용자 정의 선택에서 선택할 수도 있습니다. 비슷한 크기의 텍스트 입력과 일치합니다.

multiple 속성도 지원됩니다.

size 속성 :

파일 브라우저

파일 입력이 가장 형편 없습니다. 기능적인 파일 선택… 및 선택한 파일 이름 텍스트와 연결하려면 추가 JavaScript가 필요합니다.

iv id = “729c3을 통해 기본 파일 <input>를 숨 깁니다. 10084 “> 대신 <label> 스타일을 지정하십시오. 버튼은 ::after로 생성되고 배치됩니다. 마지막으로 주변 콘텐츠의 적절한 간격을 위해 <input>에 width 및 height를 선언합니다. .

문자열 번역 또는 사용자 지정

:lang() 유사 클래스는 “찾아보기”텍스트를 다른 텍스트로 번역하는 데 사용됩니다. 관련 언어 태그 및 현지화 된 문자열을 사용하여 $custom-file-text Sass 변수에 항목을 재정의하거나 추가합니다. 영어 문자열도 동일한 방식으로 맞춤 설정할 수 있습니다.예를 들어 스페인어 번역을 추가하는 방법은 다음과 같습니다 (스페인어 언어 코드는 es).

스페인어 번역을위한 사용자 정의 파일 입력에 대해 실행중인 lang(es)는 다음과 같습니다.

올바른 텍스트를 표시하려면 문서 (또는 하위 트리)의 언어를 올바르게 설정해야합니다. 이는 <html> 요소 또는 Content-Language HTTP 헤더의 lang 속성을 사용하여 수행 할 수 있습니다. , 다른 방법 중에서.