[HTML5] 여러 줄의 텍스트 입력 필드를 만드는 데 사용 하는<textarea>and</textarea>

2023. 9. 25. 11:20HTML5

<textarea> 요소는 웹 양식에서 여러 줄의 텍스트 입력 필드를 만드는 데 사용됩니다. 이를 통해 사용자는 댓글, 메시지 또는 기타 유형의 자유 형식 텍스트 데이터와 같은 더 많은 양의 텍스트를 입력하고 편집할 수 있습니다. 텍스트 영역은 <input> 요소로 생성된 한 줄 텍스트 입력 필드와 비교할 때 사용자로부터 더 긴 텍스트 응답을 수집하는 데 유용합니다.


<textarea> 요소의 기본 구조는 다음과 같습니다.

<textarea name="message"row="4" cols="50">기본 텍스트가 여기에 표시됩니다.</textarea>

<textarea> 요소의 속성과 사용법을 분석해 보겠습니다.

  • <textarea>: <textarea> 요소의 여는 태그입니다.
  • name: name 속성은 양식이 제출될 때 관련된 데이터를 식별하는 데 사용되는 텍스트 영역에 이름을 할당합니다. 양식 내에서 고유해야 합니다. "message"는 텍스트 영역의 이름이며, 이는 양식이 제출될 때 식별되는 방법입니다.
  • rowscols: 이 속성은 텍스트 영역에 표시되는 행과 열의 수를 정의합니다. row="4"는 텍스트 영역이 4개의 보이는 줄을 표시하도록 설정됩니다. 그리고 cols="50"은 텍스트 영역이 한 줄에 50개의 문자를 표시하도록 설정됩니다.
  • 기본 텍스트: "기본 텍스트는 여기에 표시됩니다."라는 텍스트입니다. 처음에는 텍스트 영역 내부에 나타나며 사용자는 이를 자신의 텍스트로 바꿀 수 있습니다.

    CSS를 사용하여 텍스트 영역의 스타일을 지정하여 크기, 글꼴, 색상 등의 모양을 제어할 수도 있습니다. 일반적으로 설명 상자, 피드백 양식 및 사용자가 더 긴 텍스트 입력을 제공해야 하는 기타 시나리오와 같은 다양한 목적으로 사용됩니다.

    텍스트 영역이 포함된 양식이 제출되면 사용자가 입력한 텍스트가 양식 데이터의 일부로 서버에 전송되고 서버는 그에 따라 이를 처리할 수 있습니다.