[bootstrap] 부트스트랩 – 인라인 폼(Inline form)

인라인폼은 가로로 배열된 형태로 <form> 태그에 .form-inline 클래스를 사용합니다.

 <input type=”file” id=”file” style=”display:inline-block“>

 

file input 에서 lable과 파일 선택 버튼이 세로로 되는데 가로로 보이게 하려면 이렇게 style=”display:inline-block”이라고 넣어주어야 합니다.

 

레이블이 있고 플레이스홀더의 내용이 중복되는데요.
이럴 경우 레이블을 제거해서 레이블이 나타나지 않게 할 수 있겠지만, 레이블이 없으면 스크린 리더를 사용하는 사용자는 어떤 내용인지 알 수 없게 되어 웹 접근성에 위배됩니다. 이럴 때에 lable 태그에 .sr-only 선택자를 사용합니다. 이 선택자를 사용하면 평상시에는 나타나지 않지만 스크린 리더가 읽을 수 있는 상태가 됩니다.
(스크린 리더 : 시력에 장애가 있는 사람을 위해 글자를 읽어주는 기계)

<div class=”form-group”>
<label class=”sr-only” for=”Email1″>Email address</label>
<input type=”email” class=”form-control” id=”Email1″ placeholder=”Enter email“>
</div>