Appia의 IT세상

[초보HTML배우기 15]HTML - Form, 콤보 박스(Select box)만들기(select) 본문

Programming/HTML&CSS

[초보HTML배우기 15]HTML - Form, 콤보 박스(Select box)만들기(select)

Appia 2020. 8. 10. 07:15
반응형

 [초보HTML배우기 15]HTML - Form, 콤보 박스(Select box)만들기(select)

 

이번 포스팅에서는 GUI 프로그래밍에서 많이들 사용하는, 리스트 박스라고도 하고, 또는 콤보 박스(Control)박스라고도 하는 부분에 대해서 포스팅을 해보겠습니다. 먼저, 대략적인 형태를 보면 다음과 같은 형태입니다. 

Control Box 화면 

위의 상자 부분을 클릭하면, 그 밑에 선택할 수 있는 리스트들이 존재합니다. 그런 부분들을 콤보 박스(Select box)라고 합니다. 

 

위와 같은 화면을 HTML로 작성하는 부분에 대해서 한번 살펴보겠습니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
       <select name = "Appia">
          <option value = "Python" selected>파이썬</option>
          <option value = "MATLAB">매트랩</option>
          <option value = "HTML">HTML</option>
       </select>
    </form>
 </body>
</html>
cs

위와 같은 코드로 작성하면 콤보 박스(Select box)를 클릭하여 리스트를 확인하면 다음과 같은 화면을 볼 수 있습니다.

Control 박스 선택 예시 

우선 select를 이용하여 콤보 박스(Select box)의 이름을 지정합니다. 그런 후 다음 코드에서와 같이 각 맴버들을 추가해 주시면 됩니다. 

        <select name = "Appia">
          <option value = "Python" selected>파이썬</option>
          <option value = "MATLAB">매트랩</option>
          <option value = "HTML">HTML</option>
       </select>
cs

 

그리고 상기와 같이 기본 선택된 항목에 대해서는 <option value = "Python" selected>파이썬</option>과 같이 selected부분을 추가해주시면 됩니다. 

 

그럼 위의 태그에 대한 각 속성에 대해서 살펴보겠습니다. 먼저 select에 대한 속성은 다음과 같습니다. 

속성 이름 속성 설명
name  server등에서 객체을 인식할 때 사용되는 이름
size  한번에 보여질 option의 갯수
multiple 여러개 선택 제공 

그럼 위의 속성들을 추가한 코드를 조금 수정해서 다시 HTML에 표시해보도록 하겠습니다. 

    <form>
       <select name = "Appia" multiple size=4>
          <option value = "Python" selected>파이썬</option>
          <option value = "MATLAB">매트랩</option>
          <option value = "HTML">HTML</option>
       </select>
    </form>
cs

위와 같이 코드를 수정해보겠습니다. 그런 후에 html 상으로 표시하면 다음과 같은 화면이 나타납니다. 

즉, 위에서 size=4이나, 현재 option항목이 3개라서 위와 같이 표현이 됩니다. 그리고, 다중 선택이 가능해집니다. 위와 같은 형태로 콤보박스(Select Box)를 생성할 수가 있습니다.

 

이번 포스팅에서는  [초보HTML배우기 15]HTML - Form, 콤보 박스(Select box)만들기(select)라는 주제로 간단한 콤보박스를 생성하는 부분에 대해서 살펴봤습니다. 

 

반응형
저작자표시 비영리 변경금지

'Programming > HTML&CSS' 카테고리의 다른 글

[초보HTML배우기 17]HTML - 버튼(button)만들기(input)  (0) 2020.08.16
[초보HTML배우기 16]HTML - 파일 업로드 박스(upload box)만들기(input)  (0) 2020.08.13
[초보HTML배우기 14]HTML - Form, 라디오 버튼(radio button)만들기(input)  (0) 2020.08.07
[초보HTML배우기 13]HTML - Form, Checkbox만들기(input)  (0) 2020.08.04
[초보HTML배우기 12]HTML - Form - Text Input 생성하기 (input, textarea)  (0) 2020.07.31
'Programming/HTML&CSS' Related Articles more
Comments