코딩하는 김딸기
CSS Forms: Form, Input, Textarea, Button 인터렉티브 요소 다루기 본문
폼 입문
폼(Form)은 사용자가 웹 페이지에서 데이터를 입력하고 서버로 전송할 수 있도록 하는 인터페이스를 제공합니다. 폼은 로그인, 회원가입, 검색 등의 작업을 수행할 때 사용되며, 다양한 입력 요소들을 포함할 수 있습니다.
<form>
form 요소는 폼을 정의하는 데 사용됩니다. 이 요소는 사용자가 입력한 데이터를 서버로 전송하기 위한 컨테이너 역할을 합니다.
주요 속성 (attribute)
- action: 폼 데이터를 제출할 때 데이터를 처리할 서버의 URL을 지정합니다.
- method: 폼 데이터를 서버에 전송하는 방법을 지정합니다. 보통 GET 또는 POST를 사용합니다.
- GET: URL에 데이터를 붙여 서버에 전송합니다. 데이터를 URL에 표시하기 때문에 보안이 낮고, 소량의 데이터를 전송할 때 주로 사용합니다.
- POST: 데이터를 HTTP 메시지 본문에 담아 서버에 전송합니다. 보안이 높고, 대용량 데이터를 전송할 때 사용합니다.
<form action="/submit" method="get">
<!-- 입력 요소들 -->
</form>
<fieldset>
fieldset요소는 폼 요소들을 그룹화하는 데 사용됩니다. 그룹화된 폼 요소들은 시각적으로 구분되며, 관련된 폼 요소들을 논리적으로 묶을 수 있습니다.
<form action="/submit" method="post">
<fieldset>
<legend>기본 회원정보</legend>
<label for="name">이름:</label>
<input type="text" id="name" name="name" required>
<label for="email">이메일주소:</label>
<input type="email" id="email" name="email" required>
</fieldset>
<fieldset>
<legend>계정정보</legend>
<label for="username">회원 아이디:</label>
<input type="text" id="username" name="username" required>
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" required>
</fieldset>
<button type="submit">회원가입</button>
</form>
<legend>
legend요소는 fieldset의 첫 번째 자식으로, 폼 요소 그룹의 제목을 정의합니다. 이 제목은 폼 요소 그룹의 의미를 명확하게 설명하는 데 유용합니다.
<input>
input요소는 사용자가 데이터를 입력할 수 있는 다양한 종류의 필드를 제공합니다.
주요 속성 (attribute)
- type: 입력 필드의 종류를 지정합니다.
- text: 한 줄의 텍스트 입력 필드.
- password: 비밀번호 입력 필드. 입력한 내용이 보이지 않음.
- email: 이메일 주소 입력 필드.
- number: 숫자 입력 필드.
- checkbox: 체크박스.
- radio: 라디오 버튼.
- file: 파일 업로드 필드.
- name: 폼 데이터를 제출할 때 각 입력 요소의 이름을 지정합니다.
- value: 입력 필드의 기본 값을 설정합니다.
- placeholder: 입력 필드에 힌트를 표시합니다.
- required: 필수 입력 필드로 지정합니다.
- disabled: 해당 필드를 비활성화 합니다.
- id: label요소의 for값과 연동 됩니다. label요소 클릭 시, 해당 input에 포커스가 잡힙니다.
- submit: 폼의 제출 버튼입니다. 최근에는 button요소가 주로 사용됩니다.
<form action="/submit" method="post">
<label for="username">아이디:</label>
<input type="text" id="username" name="username" placeholder="Enter your username" required>
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Submit">
</form>
<select>, <option>
select요소는 드롭다운 메뉴를 생성하는 데 사용됩니다. option요소는 드롭다운 메뉴의 선택지를 정의합니다.
<label for="country">국가:</label>
<select id="country" name="country">
<option value="kr">대한민국</option>
<option value="us">미국</option>
<option value="jp">일본</option>
</select>
<label>
label요소는 입력 요소에 대한 설명(레이블)을 제공합니다. 레이블을 클릭하면 관련된 입력 요소에 포커스가 이동합니다. label요소의 for 속성은 관련된 입력 요소의 id와 연결되어야 합니다.
<label> 태그 내부에 <input> 요소를 포함하는 방법도 있습니다. 이 방법은 특히 사용자 경험(UX) 측면에서 유용합니다. 레이블이 클릭될 때, 포함된 <input> 요소도 함께 활성화되기 때문에 라디오 버튼이나 체크박스와 같은 요소에서 매우 편리합니다.
<input type="checkbox">, <input type="radio">
- checkbox: 체크박스는 여러 개의 선택지를 중복 선택할 수 있는 입력 요소입니다.
- radio: 라디오 버튼은 동일한 그룹 내에서 하나의 선택지만 선택할 수 있습니다. name 속성이 동일한 라디오 버튼 그룹에서 하나의 값만 선택됩니다.
<form action="/submit" method="post">
<label for="subscribe">빔캠프 구독 하셨습니까?</label>
<input type="checkbox" id="subscribe" name="subscribe"> 구독 하였습니다.
<label>직업은?</label>
<input type="radio" id="developer" name="job" value="developer">
<label for="developer">개발자</label>
<input type="radio" id="designer" name="job" value="designer">
<label for="designer">디자이너</label>
<button type="submit">전송</button>
</form>
<button>
<button> 태그는 클릭 가능한 버튼을 정의합니다. type 속성에 따라 버튼의 동작을 지정할 수 있습니다.
주요 type
- submit: 폼 데이터를 제출합니다. 기본값입니다. type값 생략시 사용됩니다.
- reset: 폼의 입력 값을 초기화합니다.
- button: 자바스크립트 등에서 사용하기 위해 버튼을 정의합니다. 별도의 기본 동작이 없습니다.
폼의 시멘틱 마크업
폼을 설계할 때는 모든 사용자가 쉽게 이용할 수 있도록 접근성을 고려해야 합니다. 이를 위해 <fieldset>, <legend>, <label>과 같은 시멘틱 요소를 적극적으로 활용하는 것이 중요합니다. 또한 관련 가상 클래스를 잘 활용해야 합니다.
- 그룹화: 관련된 필드들을 <fieldset>으로 그룹화하여 폼의 논리적인 구조를 명확히 합니다.
- 명확한 레이블: 모든 입력 요소에 대한 명확한 레이블을 제공하여 사용자가 각 필드의 목적을 이해할 수 있도록 합니다.
- 포커스의 명확성: 사용자가 현재 어느 필드를 입력중인지, 입력 가능한 상태인지 명확하게 전달합니다.
- 입력 도움말: placeholder, title 등의 속성을 사용하여 추가적인 설명을 제공합니다.
- 입력 내용 검증: 입력된 내용을 한차례 검증하여 사용자가 올바른 데이터를 입력 할 수 있도록 추가적인 설명을 제공합니다.
폼의 스타일링
폼은 사용자의 입력을 받기 위해 기본 HTML단에서 제공하는 기능이 매우 많이 있습니다. 그러한 이유로 브라우저가 기본으로 제공하는 스타일이 상대적으로 많은 편입니다. 이에 폼 요소 초기화가 선행 되어야 안정적인 스타일링 작업이 될 수 있습니다.
div요소의 사용
<form action="/submit" method="post">
<div class="form-group">
<label for="email">이메일:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">전송</button>
</form>
<div> 태그는 범용적인 블록 요소로, 폼에서 특정 입력 요소들을 그룹화하거나 스타일링할 때 사용됩니다. 대부분의 폼 요소가 인라인 레벨 요소임으로 폼 요소의 레이아웃 관리에 어려움을 많이 겪습니다. fieldset요소와 달리 시멘틱한 의미를 가지지 않지만, 시각적인 레이아웃을 관리할 때 필수적으로 사용됩니다. (시각적인 목적으로만 사용)
폼 요소 초기화
input, button과 같은 폼 요소는 사용자와의 상호작용을 처리해야 하므로, 별도의 레이아웃 기법과 렌더링 개념이 적용됩니다. 사용자 에이전트 스타일시트는 이러한 폼 요소들이 기본적인 스타일과 동작을 일관되게 가지도록 정의하기 위해 상대적으로 더 많은 양의 기본 스타일 규칙이 적용되어 있습니다.
사용자 에이전트 스타일시트에 작성된 내용은 unset을 이용하여 비교적 간편하게 초기화를 진행할 수 있습니다.
input[type="text"] {
all: unset; /* input text요소의 모든 속성을 선택하여 unset 시도 */
}
all 속성은 모든 CSS 속성을 한 번에 다루는 기법입니다. 즉, input[type="text"] 요소에 지정된 모든 속성을 unset으로 초기화한 것입니다. 이는 input[type="text"]요소에 적용된 모든 스타일을 초기값 (initial) 또는 상속(inherit)으로 되돌립니다.
input[type="text"] 요소에는 사용자 상호작용을 위한 다양한 사용자 에이전트 스타일시트가 기본적으로 적용되어 있습니다. all: unset을 사용하면 이러한 스타일을 모두 초기화하게 되므로, 일부 필수 기능까지 제거될 수 있습니다. 따라서 all: unset을 적용한 후에는 input[type="text"] 요소의 기본 기능과 사용성을 유지하기 위해 필수적인 스타일을 반드시 추가 정의해야 합니다. 이렇게 함으로써 불필요한 스타일은 제거하면서도 입력 필드의 핵심 기능과 사용자 경험을 보장할 수 있습니다.
input[type="text"] {
all: unset; /* input text요소의 모든 속성을 선택하여 unset 시도 */
display: block;
width: 100%;
box-sizing: border-box;
padding: 0 20px;
line-height: 1;
height: 32px;
border: 1px solid #999;
}
이 접근 방식은 단순한 CSS 초기화를 넘어서 구체적인 디자인 요소를 포함하고 있습니다. 일견 CSS 초기화의 본래 취지와 거리가 있어 보일 수 있으나, input 요소가 웹사이트 전반에 걸쳐 일관된 형태로 사용된다는 점을 고려하면, 이러한 스타일 정의는 실용적인 관점에서 CSS 초기화의 확장된 형태로 볼 수 있습니다. 이는 기본적인 초기화와 함께 사용성과 디자인의 일관성을 동시에 확보하는 방법이 됩니다.
위 코드는 input요소가 가져야 할 최소한의 스타일 추가 정의일 뿐입니다. 실무적으로는 접근성을 위해 반드시 추가되어야 하는 요소들이 많이 있습니다.
폼 관련 가상 클래스를 적절히 활용하여 웹 접근성에 대한 확보를 합니다.