공부하면서 정리하는 HTML 태그: Select (셀렉트)

Select(셀렉트) 태그 개념

 

이름 그대로 선택목록을 만드는 태그이다.

 

아래의 드롭다운 리스트가 브라우저가 표현한 셀렉트 태그의 모습이다.

 

JavaScript TypeScript HTML

 

 

셀렉트 태그는 자신의 내부에

여러 개의 옵션(option) 태그를 포함하는 형식으로 작성한다.

 

ul, ol 태그가 li 태그를 포함하는 것과 같은 구성이다.

 

 

위에서 본 드롭다운 리스트의 HTML 코드는 다음과 같다.

<select>
  <option value="js">JavaScript</option>
  <option value="ts">TypeScript</option>
  <option value="html">HTML</option>
</select>


<!--
JavaScript, TypeScript, HTML 은 유저가 직접 보게될 값이다. 
value에 할당된 js, ts, html은 실제 서버로 전송될 값이다.
-->

 

 

 

주요 속성 (Attribute)들

 

• disabled: 옵션목록을 비활성화시킨다. 목록을 유저가 보거나 고를 수 없다.

 

비활성화된 모습

JavaScript TypeScript HTML

 

 

• form: 이 드롭다운 리스트를 연결할 폼을 지정해 주는 속성

<select form="formID"></select>

폼의 아이디를 적어넣어주면된다.

select 태그가 폼 밖에 있어도 폼과 연결할 수 있다.

 

• multiple: 드롭다운 목록에서 여러 개의 항목을 선택할 수 있다.

<select multiple></select>

JavaScript TypeScript HTML

 

 

• required: 사용자가 목록을 반드시 선택하게 하는 성분이다.

input 태그의 그것과 같다.

리스트 중 하나를 선택해야만 폼을 통해 "submit" 이벤트를 발생시킬 수 있다.

 

• size: 목록에 들어갈 option의 개수를 지정해 준다.

 

만약 옵션이 지정된 사이즈보다 많이 들어가 있다면,

스크롤 형식으로 전환된다.

 

<select size="2">
  <option value="js">JavaScript</option>
  <option value="ts">TypeScript</option>
  <option value="html">HTML</option>
</select>

 

 

JavaScript TypeScript HTML

 

 

• name: 폼에서 "submit"이벤트가 발생할 때 참조하게 되는 이름을 지정해 주는 속성

 

 

* HTML 태그자체에서 자바스크립트함수를 호출하는 속성과

id와 같은 기본속성은 제외했습니다.

 

 

 

읽어주셔서 감사합니다.

혹시 오류나 오탈자가 있다면 댓글로 알려주세요.