Coding Is My Life

코딩은 인생

HTML 기초

[HTML 기초][HTML - 선택 박스 만들기]

산기대 컴공 2021. 1. 4. 23:05
728x90

선택 박스 만들기

선택 박스를 만드려면 select 태그와 option 태그를 이용해서 만들 수 있다.

<html>

  <head>
    <meta charset="utf-8">
  </head>

  <body>
    <h1>색상 선택</h1>
    <form>
      <select name=color>
        <option value="black">검정</option>
        <option value="red">빨간</option>
        <option value="blue">파란</option>
        <option value="green">초록</option>
      </select>
      <input type="submit">
    </form>
  </body>

</html>

 

이런식으로 코드를 작성하면 다음과 같이 화면에 나타나게 된다.

하지만 다중으로 선택을 하려면 select에 multiple 속성을 작성을 해야한다.

<html>

  <head>
    <meta charset="utf-8">
  </head>

  <body>
    <h1>색상 선택</h1>
    <form>
      <select name=color multiple>
        <option value="black">검정</option>
        <option value="red">빨간</option>
        <option value="blue">파란</option>
        <option value="green">초록</option>
      </select>
      <input type="submit">
    </form>
  </body>

</html>

이렇게 간단하게 만들 수 있습니다.

 

728x90

'HTML 기초' 카테고리의 다른 글

[HTML 기초][HTML - label]  (4) 2021.01.04
[HTML 기초][HTML - 버튼]  (0) 2021.01.04
[HTML 기초][HTML - 텍스트 입력받기]  (0) 2021.01.04
[HTML 기초][HTML - 입력받기]  (0) 2021.01.04
[HTML 기초][HTML 표 만들기 3]  (2) 2021.01.04