HTML콤보박스

 

HTML 콤보박스 태그에 대하여 알아 보겠습니다. 태그명이 select로 셀렉트박스 라고 부르기도 합니다.

콤보박스의 사용목적 2가지에 대하여 알아보고, 각각의 예제를 살펴 보도록 하겠습니다.

 

  기본 태그 사용 법

<select name="콤보박스명">
  <option value="항목 값1">항목 텍스트1</option>
  <option value="항목 값2">항목 텍스트2</option>
</select>

 

 

  콤보박스 사용 목적

  1. 값의 전달 : 항목을 선택하여 해당 값을 전달하기 위한 목적
  2. 액션 발생 : 항목을 선택 시에 특정 액션을 발생 시키기 위한 목적 

 

      목적에 따른 사용 예제

    1.값의전달

    ※ 회원가입 등의 화면에서 성별에 대한 값을 사용자로 부터 선택 받아 값을 서버로 전달하기 위한 등의 목적에서 사용 됩니다. 다음 예제는 그와 같으 기능을 구현한 예제 입니다.

    <select name="성별">
      <option value="F">여성</option>
      <option value="M">남성</option>
    </select>

    2. 액션발생

    홈페이지 이동 또는 특정영역을 보여주거나 숨김 액션을 발생시키기 등의 다양한 액션발생을 위한 목적으로 사용 됩니다. 웹사이트 이동을 목적으로 사용하기 위한 예제 입니다.

    <select name="goUrl" onchange="window.open(this.value);">

      <option>사이트이동</option>
      <option value="tistory.com">티스토리</option>
      <option value="happylog.kr">HappyLog</option>
    </select>

    onchange : 콤보박스 값이 변경(다른값의항목을 선택) 되었을 경우 정의 된 내용이 실행 됩니다.

    window.open(url) : 자바스크립트 함수로 설정 된 url 화면을 오픈 합니다.

    this.value : 사용된 객체마다의 자신의 값을 가지고 있습니다. 콤보박스에서 사용 할 경우 선택 된 값을 가지고 있습니다.

     

     

      예제결과

    콤보박스 예제 결과

    Posted by 행복한 유유로그

    댓글을 달아 주세요

    1. Deborah 2018.06.06 09:02 신고  댓글주소  수정/삭제  댓글쓰기

      오늘도 잘 배우고 갑니다.

    2. 공수래공수거 2018.06.06 09:37 신고  댓글주소  수정/삭제  댓글쓰기

      이해는 잘 못합니다만 읽어 보았네요

      오늘도 기분좋은 하루 되시기 바랍니다^^