8. bootstrap5 form controls

bootstrap form, input, textarea

form 태그는 사용자입력을 받는 태그들의 컨테이너입니다.

입력을 받는 건은 input, textarea 태그로 입력 받습니다.

스타일	적용대상
.form-label	label
.form-control	input
.form-control form-control-lg	input
.form-control form-control-sm	input
.form-control-plaintext	input

color

color 타입 input에 적용되는 스타일

스타일	적용대상
.form-control form-control-color	input

file

file 타입 input에 적용되는 스타일

Datalist

datalist 태그를 이용한 사용자 편의성 제공

form-select , form-check , form-range

form-control을 사용하지 않고 다른 스타일을 사용하는 태그들

select

datalist와 option을 쓰는건 비슷하지만 option에서 반드시 선택해야 됩니다.

input 태그의 타입이 아니라, select 태그 사용합니다.

checkbox, radio, switch

input 태그 타입들로 checkbox, radio을 만들 수 있다.

switch 같은 경우 form-switch도 같이 사용하여 만들어 준다.

 

range

사용자에게 범위를 정해서 값을 받을 수도 있다.

input-group

input 박스 자체를 나눠서 사용할 수 있다.

floating label

label을 input 박스 내부로 넣어준다. 대신 placeholder 텍스트를 대체한다.

form-floating 컨테이너에 작성된 input, label 태그에 적용된다. 

끝으로

이렇게 form에 대해서 정리하였다.

여기까지 공부하였으니 다음엔 배운 것을 활용해 커뮤니티 로그인, 가입 페이지를 만들어 보겠다.

그런 다음 component에 대해서 하나씩 공부하도록 하겠다.