[HTML] 폼에서 사용하는 여러 가지 태그

✨여러 줄을 입력하는 텍스트 영역 <textarea> 태그

폼에서 텍스트를 여러 줄 입력하는 영역 = 텍스트 영역
<textarea> 태그는 게시판에서 글을 입력하거나 회원 가입 양식에서 사용자 약관을 표시할 때 자주 사용한다.

• 기본형

  <textarea>내용</textarea>

• <textarea> 태그에서는 ① 너비 크기를 지정하는 cols 속성과,
  ② 화면에 텍스트를 몇 줄 표시할지 지정하는 rows 속성을 사용

  • cols 에서 지정하는 글자 수는 영문자를 기준으로 한다.
    한글 1글자는 영문자 2글자에 해당하므로, cols="40" 으로 지정하면 한글은 20글자 정도가 된다.

• <textarea> 태그의 속성

  종류	설명
  cols	텍스트 영역의 가로 너비를 문자 단위로 지정한다.
  rows	텍스트 영역의 세로 길이를 줄 단위로 지정한다. 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생긴다.

  
  

✨드롭다운 목록을 만들어 주는 <select>, <option> 태그

사용자가 내용을 직접 입력하지 않고 여러 옵션 중에서 선택하게 하려면 드롭다운 목록이나 데이터 목록을 사용한다.

• 드롭다운 목록
  • 목록을 클릭했을 때 옵션이 요소 아래쪽으로 펼쳐짐
  • <select> 태그로 드롭다운 목록의 시작과 끝을 표시
  • 그 안에 <option> 태그를 사용해 원하는 항목을 추가
    • <option> 태그 안에 value 속성을 이용해 서버로 넘겨주는 값을 지정
• 기본형

  <select>
    <option value="값1">내용1</option>
    <option value="값2">내용2</option>
    ...
  </select>

  
  

 💡 <select> 태그의 속성 알아보기

• 기본적으로 옵션이 하나만 표시

• 옆에 있는 화살표를 클릭해 나머지 옵션을 살펴본 후 필요한 항목 선택 가능

• <select> 태그의 속성

  종류	설명
  size	화면에 표시할 드롭다운 항목의 개수 지정
  multiple	드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용

  
  

 💡 <option> 태그의 속성 알아보기

• <option> 태그에서만 사용하는 속성

  종류	속성
  value	해당 항목을 선택할 때 서버로 넘겨줄 값을 지정
  selected	드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여줄 항목을 지정

  
  

 🧩 드롭다운 목록 만들기

• 코드

  <label for="prod1">상품 선택</label>
  <select id="prod1">
    <option value="special_3" selected>선물용 3kg</option>
    <option value="special_5" selected>선물용 5kg</option>
    <option value="family_3" selected>가정용 3kg</option>
    <option value="family_5" selected>가정용 5kg</option>
  </select>

• 결과
  

✨데이터 목록 만들어주는 <datalist>, <option> 태그

데이터 목록을 사용하면 텍스트 필드에 값을 직접 입력하지 않고 미리 만들어 놓은 값 중에서 선택할 수 있다.

데이터 목록을 만들 때는 <datalist> 태그를 이용해 데이터 목록의 시작과 끝을 표시하고 그 사이에 <option> 태그를 사용해 각 데이터의 옵션을 표시한다. 이때 value 속성을 사용해서 서버로 넘겨줄 값을 지정하는데, 이 값이 텍스트 필드에도 나타난다.

• 기본형

  <input type="text" list="데이터 목록 id">
  <datalist id="데이터 목록 id">
    <option value="서버로 넘길 값 1">선택 옵션1</option>
    <option value="서버로 넘길 값 2">선택 옵션2</option>
  </datalist>

  
  

 🧩 데이터 목록 만들기

• 포장 여부를 데이터 목록으로 만들고, 텍스트 필드에서 그 값을 선택해서 사용하는 것

• 코드

  <label for="prod2">포장 여부</label>
  <input type="text" id="prod2" list="pack">
  <datalist id="pack">
    <option value="package">선물 포장</option>
    <option value="no_package">선물 포장 안 함</option>
  </datalist>

• 결과
  
  
  

✨버튼을 만들어 주는 <button> 태그

<button> 태그를 이용하여 폼을 전송하거나 리셋하는 버튼을 삽입할 수 있다.

• 기본형

  <button type="submit">내용</button>
   <button type="reset">내용</button>
   <button type="button">내용</button>

• <button> 태그의 type 속성은 버튼이 활성화되었을 때 어떤 동작을 할지 지정한다.
  submit , reset , button 중에서 선택할 수 있고, 만약 지정하지 않으면 submit 을 선택한 것으로 간주한다.

  • <button> 태그의 type 속성

    종류	설명
    submit	폼을 서버로 전송한다. <input type="submit"> 과 같은 기능을 한다.
    reset	폼에 입력한 내용을 초기화한다. <input type="reset"> 과 같은 기능을 한다.
    button	버튼 형태만 만들 뿐, 자체 기능은 없다. <input type="button"> 과 같은 기능을 한다.

    
    
• 화면 낭독기로 웹 문서를 읽어 줄 때, <button> 태그를 만나면, 이 부분에 버튼이 있다는 것을 알고 정확히 전달한다.

출처: Do it! HTML+CSS+자바스크립트 웹 표준의 정석 (고경희, 이지스퍼블리싱)