본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

Form 요소 3 (button과 select, fieldset)

최초 작성일
최종 수정일
이번 시간에는...
지난 폼 시간에 다루지 못 했던, button 태그와 select 태그, fieldset과 legend에 대해 알아 봅니다.

이번 시간에는 지난 두 시간 동안 다루지 못한 폼 요소들을 마저 다루어 보도록 하겠습니다.

select 요소와 option 요소

select 요소는 사용자가 폼에서 선택할 수 있는 옵션의 목록을 보여주는 폼 요소 입니다. 어떻게 보면 역할이 라디오 타입의 인풋(input[type=radio])과 비슷한 역할을 가지고 있지만, 라디오 타입의 input은 모두 다 펼쳐 보여지는 반면, 이 select 요소는 옵션들은 모두 숨기고, 선택된 한 가지만 보여 줍니다. 그리고 한 가지만 선택하는 것이 아닌, 여러 개를 선택할 수도 있습니다.

select 요소는 내부에 한 개 이상의 option 요소를 가지고 있습니다. 사용자는 option을 선택하고, 선택된 option 요소의 값이 서버에 전송 됩니다.

기본적으로 다음과 같은 방식으로 작성합니다.

select 요소의 속성

select 요소는 다른 폼 요소들과 마찬가지로 disabledname 속성을 사용할 수 있습니다. 하지만, 그 외에도 select 요소만의 속성이 몇 가지 있습니다.

multiple 속성

기본적으로 select 요소는 option을 한 개만 선택할 수 있습니다. 하지만 이 multiple 속성을 줄 경우, 사용자가 값을 여러 개 선택할 수도 있게 되며, 선택 시에는 Ctrl키나 Shift 키를 누르면서 선택하거나, 마우스로 드래그를 해서 선택할 수 있습니다.

이 속성은 불린 속성으로 다음과 같이 사용 합니다.

Ctrl이나 Shift키를 누른채 선택하면 여러 개를 선택하실 수 있습니다.

size 속성

이 속성은 option을 몇 개를 보여줄지 정하는 속성 입니다. 기본적인 select 요소의 노출 수는 1개, multiple 속성이 있는 경우 4개가 기본 값 입니다.

option 요소의 속성과 optgroup

이 option 요소는 자신의 내부에 다른 요소를 포함할 수 없고, 오로지 텍스트만을 포함할 수 있습니다. 이 요소 역시 다른 폼 요소들과 마찬가지로 disabled 속성을 사용할 수 있으며, selected 속성이 있을 경우, select의 기본 선택된 옵션으로 지정 됩니다.

optgroup 요소

optgroup 요소는 option 요소들을 그룹화 해주는 요소 입니다. label 속성으로 그룹의 명칭을 지어주며, disabled 속성으로 해당 그룹으로 묶인 option들을 비활성화 할 수 있습니다.

button 요소

지난 input 요소의 타입들을 살펴 보았을 때, "submit", "reset", "button" 타입의 input은 버튼 형태였던 것을 기억하실 것 입니다. 이 세가지 타입은 모두 지금 살펴 볼 button 요소로 대체가 가능 합니다.

button 요소는 다음과 같이 사용합니다.

type속성을 지정해 주지 않은 경우, 기본 적으로 reset 타입으로 동작 합니다.

각 타입별 역할은 input 요소의 타입과 완전 동일 합니다. 다만, 이 button 요소와 input 요소의 가장 큰 차이점은 button은 "열고 닫는 태그" 이고, input은 "스스로 닫는 태그" 라는 점 입니다.

그렇기 때문에 button 요소는 span, img같은 인라인 요소를 안에 포함할 수 있습니다. 이를 통해서 나중에 CSS로 스타일을 줄 때 보다 다양한 스타일이 가능해 집니다.

fieldset 요소와 legend 요소

fieldset 요소는 폼 요소들을 그룹화 하는데 사용하며, 해당 그룹의 이름은 legend 요소로 지어 집니다.

이러한 폼 요소들의 그룹화는 스크립트에서 접근 시 보다 용이하게 만들어주며, 사용자의 접근성 또한 높여 줍니다. 다음과 같이 작성 합니다.

로그인

legend 요소는 fieldset의 첫번째 자식으로 사용해야 하며, 인라인 요소를 포함할 수 있습니다. 또한, fieldset요소는 자식으로 fieldset 요소를 중첩 할 수 도 있습니다.

다음은 중첩된 사용 예제 입니다.

검증기 완성

이제 드디어 3강에 걸쳐서 폼 요소들을 살펴 보았습니다. 아무래도 폼은 주로 스크립트나 서버와의 통신과 함께 쓰이기 때문에 완전히 알았다고 할 수 없지만, 그래도 각 요소들의 특징과 쓰임새에 대해서는 다 이해 하셨으리라 생각 합니다.

이제 우리가 만들어 본 검증기에 이번 시간에 배운 요소들만 마저 넣어 볼 수 있습니다. 아마 이제 스스로 넣으실 수 있으리라 보고, 자세한 설명 보다는 완성된 예시를 첨부 합니다.

다음 예시에는 일단 버튼 형태의 inputbutton 태그로 변경했고, select를 이용해서 문서 타입 옵션을 추가했습니다. 그리고 마지막으로 fieldset을 이용하여 상세 옵션을 그룹화 했습니다. 폼 요소들의 name 속성 값은 W3C 검증기 페이지에서 확인하고 넣어야 한다는 점 주의하세요.

이것 저것 추가가 되어 소스가 조금 복잡해 보일 수 있지만, 차근차근 만들어 보시면 쉽게 이해 하실 수 있을 겁니다.

마크 업 검증기 완성 버전
/attach/demo/html-3/form-final.html
모바일의 경우 새창열기로 확인 가능합니다.
새창열기
요점 정리
  • select 요소는 여러 option 요소들 중 사용자가 선택하도록 하는 폼
  • select 요소에 multiple 속성을 사용할 경우 여러 개 선택 가능
  • optgroup 요소를 option 요소들을 그룹화 할 수 있음
  • button 요소는 input의 버튼 형태 타입을 대체 가능하며, 내부에 인라인 요소들 사용 가능
  • fieldset 요소는 폼 요소들을 그룹화 해주며, legend 요소로 폼 그룹의 이름을 지정

이 글이 유용하셨다면 친구들에게 공유 해주세요.