1. 다중 선택 및 리스트
HTML 폼은 사용자가 웹 페이지와 상호작용할 수 있도록 다양한 기능을 제공합니다. 텍스트 필드와 버튼 외에도, 다중 선택 및 리스트 요소를 통해 더 유연하고 편리한 데이터 입력 인터페이스를 만들 수 있습니다. 오늘은 이들을 다뤄볼게요.
HTML 폼에서는 리스트에서 선택할 수 있는 요소를 만드는 몇 가지 방법을 제공합니다. 가장 많이 사용되는 요소로는
<select>와 <option>, 그리고 체크박스와 라디오 버튼이 있습니다.
드롭다운 리스트: <select>와 <option>
태그 <select>는 드롭다운 리스트를 생성하고,
<option>은 그 리스트 내의 옵션을 추가하는 데 사용됩니다. 사용자는 리스트에서 하나 또는 여러 옵션을 선택할 수 있어요.
단일 선택: 기본적으로 <select>는 하나의 옵션만 선택할 수 있게 합니다.
<label for="country">국가를 선택하세요:</label>
<select id="country" name="country">
<option value="ru">러시아</option>
<option value="us">미국</option>
<option value="de">독일</option>
</select>
<label for="country">국가를 선택하세요:</label>
<select id="country" name="country">
<option value="ru">러시아</option>
<option value="us">미국</option>
<option value="de">독일</option>
</select>
다중 선택: multiple 속성을 추가하면 사용자가 Ctrl (Windows) 또는 Cmd (Mac)을 누른 상태로 클릭하여 여러 옵션을 선택할 수 있어요.
<label for="languages">언어를 선택하세요:</label>
<select id="languages" name="languages" multiple>
<option value="ru">러시아어</option>
<option value="en">영어</option>
<option value="de">독일어</option>
</select>
<label for="languages">언어를 선택하세요:</label>
<select id="languages" name="languages" multiple>
<option value="ru">러시아어</option>
<option value="en">영어</option>
<option value="de">독일어</option>
</select>
이 경우, 선택된 요소의 데이터를 값 배열 형태로 서버에 전송합니다.
체크박스: <input type="checkbox">
체크박스는 사용자에게 주어진 리스트에서 하나 이상을 선택할 수 있도록 지원합니다. 각 체크박스는 <input type="checkbox"> 태그로 만들어집니다.
<label><input type="checkbox" name="interests" value="sports"> 스포츠</label>
<label><input type="checkbox" name="interests" value="music"> 음악</label>
<label><input type="checkbox" name="interests" value="travel"> 여행</label>
<label><input type="checkbox" name="interests" value="sports"> 스포츠</label>
<label><input type="checkbox" name="interests" value="music"> 음악</label>
<label><input type="checkbox" name="interests" value="travel"> 여행</label>
체크박스의 name 속성이 동일한 경우, 체크된 모든 체크박스 데이터가 배열 형태로 전송됩니다.
라디오 버튼: <input type="radio">
라디오 버튼은 그룹 중 하나의 옵션만 선택할 수 있게 해줍니다. 동일한 name 값을 가진 라디오 버튼은 그룹으로 묶이며, 그 중 하나만 선택 가능합니다.
<p>성별을 선택하세요:</p>
<label><input type="radio" name="gender" value="male"> 남성</label>
<label><input type="radio" name="gender" value="female"> 여성</label>
<p>성별을 선택하세요:</p>
<label><input type="radio" name="gender" value="male"> 남성</label>
<label><input type="radio" name="gender" value="female"> 여성</label>
라디오 버튼은 "예/아니오", 성별, 특정 나이 그룹 선택 등 고정된 항목을 선택할 때 편리합니다.
2. 다양한 유형의 폼 요소
HTML에는 여러 <input> 유형이 있으며, 이는 데이터 입력을 보다 정밀하게 하고 사용자와의 상호작용을 향상시킬 수 있습니다.
GO TO FULL VERSION