이번 포스팅에서는 HTML 폼의 주요 제어 요소인 셀렉트 박스, 옵션, 버튼, 레이블에 대해 알아보겠습니다. 이론부터 실습까지, 이 요소들을 어떻게 사용하는지 자세히 학습해 봅시다.
자동목차
이론
HTML 폼에서는 사용자의 입력을 제어하는 다양한 요소들이 사용됩니다. 이번 섹션에서는 그중 셀렉트 박스(<select>), 옵션(<option>), 버튼(<button>), 레이블(<label>)에 대해 알아보겠습니다.
실습
아래의 코드는 셀렉트 박스, 옵션, 버튼, 레이블을 활용한 간단한 설문조사 폼의 예시입니다.
<form>
<label for="fruit">가장 좋아하는 과일을 선택하세요:</label><br>
<select id="fruit" name="fruit">
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="cherry">체리</option>
</select><br>
<button type="submit">제출</button>
</form>
코드 설명
- <label>: 입력 필드의 설명을 제공하는 태그입니다. for 속성을 통해 어떤 입력 필드의 라벨인지 지정합니다.
- <select>: 셀렉트 박스를 생성하는 태그입니다. 이 태그 안에 <option> 태그를 넣어 사용자가 선택할 수 있는 옵션을 제공합니다.
- <option>: 셀렉트 박스 안의 옵션을 나타내는 태그입니다. value 속성을 통해 각 옵션이 선택됐을 때 전송될 값을 지정합니다.
- <button>: 버튼을 생성하는 태그입니다. type 속성을 "submit"으로 설정하면, 버튼을 클릭했을 때 폼 데이터가 서버로 제출됩니다.
마무리
HTML 폼의 제어 요소들은 사용자의 입력을 받아 처리하는 데 중요한 역할을 합니다. 이번 포스팅을 통해 셀렉트 박스, 옵션, 버튼, 레이블 등의 활용 방법을 알아보았습니다. 이론 학습 후에는 반드시 실습을 통해 이해도를 높이는 것을 권장드립니다.