HTML: 간단하게 form 폼 만들기, select 속성 예제

form 만들 때 가장 자주 쓰게 되는 요소 중에 하나인 select 요소를 사용해서 사용자가 입력한 데이터를 받아 저장하는 폼을 만들어 보겠습니다.

오늘 먹은 메뉴를 선택하는 드롭다운 리스트를 HTML 사용해서 만들어 보는 간단한 예제로 살펴보겠습니다. 간단한 폼을 만들어서 선택하고 원하는 링크로 데이터를 전송하는 방법까지 정리해보겠습니다.

참고로 해당 예제의 전체 코드는 제 GitHub에 올려 놓았으니 확인 하시면서 복사도 해보시고 연습 해 보세요! 

 

---

select 속성

시작하기에 앞서 알아야 하는 select 속성들이 몇 가지 있습니다.

• name :
• option : 드롭다운 리스트에서 사용자가 선택할 수 있는 각 항목들입니다. 사용자에게 표시될 텍스트를 표시하고, 사용자가 선택할 수 있는 선택지입니다.

각 요소를 자세히 살펴보겠습니다.

option

다음은 점심 메뉴를 선택하는 드롭다운 박스를 만드는 예제입니다! 옵션으로 김밥, 타코, 쌀국수, 반미를 넣으려면 아래와 같이 작성해주면 됩니다.

<select>
    <option value="kimbab">kimbab</option>
    <option value="tacos">tacos</option>
    <option value="pho">pho</option>
    <option value="bahnmi">bahn mi</option>
</select>

만약 여기서 한 단계 더 나아가서 옵션 그룹들을 지정하고 싶을 경우에는 optgroup 태그로 해당되는 옵션들을 감싸 주면 됩니다. 그렇게 할 경우 user에게는 아래 사진과 같이 표시됩니다.

개인적인 생각으로는 이건 개인정보 입력 페이지에서 국가 선택할 때 사용하면 유용할 것 같습니다. 왜냐하면 몇몇 사이트에서는 회원가입 하면서 국가 선택하다가 대한민국을 찾지 못 해 몇 분씩 날려 먹는 것이 너무 불편할 때가 많았거든요. (특히 항공사 홈페이지..부들부들..)

여러 항목 선택할 때는 multiple

위 코드에서 select 태그 안에 multiple 이라고 적어주기만 하면 여러 항목을 선택할 수 있게 됩니다!

<select multiple>

첫 줄만 이렇게 바꿔주면 되니 왜 HTML이 쉽다 쉽다 하는지 알겠네요.

name

<select name="lunch">

서버로 양식 데이터를 전송할 때 "lunch"라는 이름과 선택된 메뉴의 값을 함께 전송하게 됩니다.

submit

select 태그에 원하는 메뉴들을 적어 넣었으면 제출하기 버튼을 만들어줘야 무언가 실행이 되겠죠?

<input type="submit" value="선택">

여기서 value 속성은 버튼에 표시되는 글자입니다. '선택'을 '제출'로 바꾸면 아래와 같이 표시되는 것이죠!

 

이렇게 html form을 제출을 하면 어디로 보내지는지는 form 태그 자체에 적혀 있습니다. 

<form action="html10-form-res.html" method="get">

지난 번에 다뤘던 get method 를 사용해서 action="" 부분에 적힌 url 로 데이터 전송을 하는 것입니다. 

 

여기까지 참 쉽고 간단한 HTML 폼 만들기였습니다!