HTML <textarea> 태그, 다중 행 텍스트 입력 필드 만들기

HTML <textarea> 태그, 다중 행 텍스트 입력 필드 만들기

<textarea> 태그는 사용자가 여러 줄의 텍스트를 입력할 수 있는 폼 요소로, 피드백 폼, 댓글 섹션, 또는 긴 텍스트를 입력하는 곳에 자주 사용됩니다. 이 가이드에서는 <textarea> 태그의 기본 구조와 속성, 사용 예제에 대해 알아보겠습니다. <textarea>는 간단하면서도 강력한 기능을 제공하여 다양한 웹 애플리케이션에서 널리 사용됩니다.

 

 

목차

1. textarea 태그 기본 구조
2. textarea 태그 주요 속성
   1. rows와 cols 속성
   2. placeholder 속성
   3. maxlength와 minlength 속성
   4. readonly와 disabled 속성
3. textarea 태그 실전 예제
4. textarea 태그의 접근성 고려
5. 결론

 

textarea 태그 기본 구조

<textarea> 태그는 HTML에서 여러 줄의 텍스트 입력을 처리하기 위한 폼 요소입니다. 이 태그는 <input> 태그와 달리 자체 닫는 태그가 아니라, 여는 태그와 닫는 태그가 필요합니다. 기본 사용법은 다음과 같습니다:

<textarea></textarea>

위와 같은 기본 구조를 가지고 있으며, 태그 사이에 기본 값을 넣을 수도 있습니다. 예를 들어, 사용자가 입력을 시작하기 전에 기본적으로 표시될 텍스트를 지정할 수 있습니다.

<textarea>기본 텍스트</textarea>

이렇게 하면 사용자가 텍스트 입력 필드를 열었을 때 "기본 텍스트"가 미리 표시됩니다.

 

 

 

textarea 태그 주요 속성

<textarea> 태그는 여러 가지 속성을 제공하여 사용자 입력 필드의 동작을 제어할 수 있습니다. 주요 속성을 알아보겠습니다.

 

rows와 cols 속성

rows와 cols 속성은 텍스트 영역의 기본 크기를 결정합니다. rows는 텍스트 필드의 행 수(세로 길이)를, cols는 열 수(가로 길이)를 나타냅니다.

<textarea rows="5" cols="40"></textarea>

위의 예제는 5개의 행과 40개의 열을 가진 텍스트 입력 필드를 만듭니다. 이 속성들을 적절히 설정하여 입력 필드의 크기를 조정할 수 있습니다.

 

placeholder 속성

placeholder 속성은 사용자가 텍스트를 입력하기 전에 보여지는 안내 텍스트를 설정합니다. 이 속성은 사용자가 어떤 종류의 정보를 입력해야 하는지 명확히 안내할 때 유용합니다.

<textarea placeholder="내용을 입력하세요"></textarea>

이 속성을 사용하면, 입력 필드가 비어 있을 때 "내용을 입력하세요"라는 안내 문구가 나타납니다.

 

maxlength와 minlength 속성

maxlength와 minlength 속성은 사용자가 입력할 수 있는 텍스트의 최대 및 최소 길이를 제한할 때 사용됩니다.

<textarea maxlength="100" minlength="10"></textarea>

위 코드는 10자에서 100자 사이의 길이를 가진 텍스트만 입력할 수 있는 필드를 만듭니다. 이를 통해 입력 데이터의 유효성을 보장할 수 있습니다.

 

readonly와 disabled 속성

readonly와 disabled 속성은 텍스트 필드의 수정 가능 여부를 제어합니다. readonly는 필드를 읽기 전용으로 만들며, disabled는 필드를 비활성화합니다.

<textarea readonly>이 텍스트는 수정할 수 없습니다.</textarea>

<textarea disabled>이 필드는 비활성화되었습니다.</textarea>

이 두 속성은 데이터를 수정하거나 입력하는 기능을 제한하고, 필드의 상태를 관리하는 데 유용합니다.

 

 

 

 

textarea 태그 실전 예제

<textarea> 태그를 실제 프로젝트에 적용할 때, 다양한 속성과 스타일을 활용해 사용자 경험을 개선할 수 있습니다. 아래 예제는 다양한 속성을 사용한 텍스트 입력 필드입니다:

<textarea rows="10" cols="50" placeholder="여기에 텍스트를 입력하세요" maxlength="200"></textarea>

위 필드는 10행, 50열의 크기를 가지고 있으며, 최대 200자까지 입력할 수 있습니다. 또한 텍스트를 입력하기 전에는 안내 문구가 나타나도록 설정되어 있습니다.

 

 

 

textarea 태그의 접근성 고려

<textarea> 태그를 사용할 때는 접근성(Accessibility)도 고려해야 합니다. <label> 태그를 활용하여 필드의 목적을 명확히 하고, 시각 장애인도 쉽게 이용할 수 있도록 해야 합니다.

<label for="feedback">피드백을 입력하세요:</label>
<textarea id="feedback" name="feedback" rows="5" cols="40"></textarea>

위 코드에서는 label 태그를 사용해 텍스트 필드에 적절한 설명을 추가했습니다. for 속성으로 입력 필드와 연동되어, 스크린 리더 사용자에게도 명확한 안내를 제공합니다.

 

 

 

결론

<textarea> 태그는 여러 줄의 텍스트를 입력받을 때 매우 유용한 HTML 요소입니다. 다양한 속성과 함께 사용하면 사용자에게 적합한 텍스트 입력 환경을 제공할 수 있으며, 접근성까지 고려한 설계를 통해 더욱 향상된 사용자 경험을 제공할 수 있습니다. 이 가이드를 통해 <textarea> 태그의 사용법을 완벽히 익히고, 실제 프로젝트에 적절히 활용해보세요.