minstudio

입력 폼 심화 (Advanced Forms)

기본적인 한 줄짜리 빈칸(<input>) 외에, 사용자에게 더 풍부하고 직관적인 입력 방식을 제공하는 다양한 양식 태그들입니다. 마치 식당의 메뉴판이나 자판기의 버튼 같은 역할을 합니다.

📝 다양한 입력 방식 비교

  • • Select (드롭다운): 회원가입 시 "통신사 선택"이나 "국가 선택"처럼 정해진 보기 중에서 딱 하나만 고르게 할 때 매우 유용합니다. 공간을 적게 차지합니다.
  • • Textarea (장문 입력): 블로그에 긴 댓글을 남기거나, 고객센터에 긴 문의 글을 작성할 때 사용하는 커다란 네모 상자입니다. rows 속성으로 기본 높이를 정할 수 있습니다.
  • • Fieldset & Legend: 긴 설문조사에서 "1. 개인정보", "2. 관심사" 처럼 입력 구역을 네모난 테두리로 예쁘게 묶어서 분류해 주는 역할을 합니다.
태그명주요 속성설명
<select>, <option>value, selected클릭하면 밑으로 쭈욱 펼쳐지는 드롭다운 목록을 만듭니다.
<textarea>rows, cols여러 줄의 긴 텍스트(엔터 포함)를 입력받을 수 있는 커다란 입력창입니다.
<fieldset>, <legend>-연관된 폼 요소들을 시각적인 테두리로 묶고, <legend>로 그룹의 제목을 달아줍니다.
<datalist>idinput 태그에 연결하여, 구글 검색창처럼 글자를 칠 때 밑에 자동완성 추천 목록을 띄워줍니다.
 
<!-- 드롭다운 선택 -->
<div>
  <label for="country">국가 선택:</label>
  <select id="country" name="country">
      <option value="kr" selected>대한민국</option>
      <option value="us">미국</option>
      <option value="jp">일본</option>
  </select>
</div>
<br>

<!-- 장문 텍스트 입력 -->
<div>
  <label for="bio">자기소개:</label><br>
  <textarea id="bio" name="bio" rows="3" placeholder="자신을 소개해 주세요."></textarea>
</div>
<br>

<!-- 연관된 폼 요소 묶기 -->
<fieldset>
    <legend>연락처 정보</legend>
    <input type="email" placeholder="이메일">
    <input type="tel" placeholder="전화번호">
</fieldset>
<br>

<!-- 자동완성 제안 목록 -->
<div>
  <label for="browser">자주 쓰는 브라우저:</label>
  <input list="browsers" name="browser" id="browser" placeholder="더블클릭해보세요">
  <datalist id="browsers">
      <option value="Chrome">
      <option value="Firefox">
      <option value="Safari">
  </datalist>
</div>
실행 결과
입력 폼 심화 (Advanced Forms) | Minstudio