HTML Textarea 태그 완벽 가이드 – 기본 사용법부터 주요 속성까지

HTML <textarea> 태그는 폼(form) 안에서 여러 줄에 걸쳐 텍스트를 입력할 수 있는 입력 필드를 만들 때 사용합니다. <textarea> 태그로 정의되며, 입력 가능한 글자 수에는 제한이 없습니다.

HTML Textarea 태그란?

HTML로 폼을 만들다 보면 사용자에게 긴 텍스트를 입력받아야 하는 경우가 있습니다. 예를 들어 쇼핑몰 웹사이트에 고객 문의 폼을 만든다면, 고객이 겪고 있는 문제를 자세히 설명할 수 있는 넉넉한 입력 공간이 필요하겠죠.

바로 이럴 때 <textarea> 태그가 유용합니다. <textarea> 요소는 여러 줄 편집이 가능한 폼 요소를 생성하며, 사용자로부터 긴 응답을 받고 싶을 때 적합합니다.

이 글에서는 몇 가지 예제와 함께 <textarea> 태그를 코드에 활용하는 방법을 살펴보겠습니다. 글을 끝까지 읽으면 전문가처럼 <textarea> 태그를 다룰 수 있게 될 것입니다.

Textarea 태그 기본 문법

<textarea> 태그는 폼 안에서 여러 줄 텍스트 입력 컨트롤을 정의하는 데 사용되며, 무제한의 문자를 담을 수 있습니다.

기본 문법은 다음과 같습니다.

<textarea rows="10" cols="10">
플레이스홀더 내용
</textarea>

코드를 하나씩 살펴보겠습니다. <textarea> 태그는 웹 폼에 텍스트 영역 상자를 정의합니다. <input> 태그와 달리 <textarea> 태그는 반드시 시작 태그(<textarea>)와 종료 태그(</textarea>)를 모두 가져야 합니다. 그 이유는 텍스트 영역에 기본적으로 표시될 텍스트가 두 태그 사이에 위치하기 때문입니다.

위 예제에서는 두 가지 속성을 지정했습니다.

• rows: 텍스트 영역의 기본 행(row) 수를 브라우저에 알려줍니다. 즉, textarea의 세로 높이를 결정합니다.
• cols: 텍스트 영역의 기본 열(column) 수를 지정합니다. 즉, textarea의 가로 너비를 결정합니다.

실전 예제: 피드백 폼 만들기

동네 의류 매장을 위한 웹 폼을 만든다고 가정해 보겠습니다. 이 폼은 고객이 구매한 제품에 대한 피드백을 남길 수 있게 해야 합니다. 사용자가 상세한 피드백을 작성할 수 있도록 충분한 공간을 제공하기 위해 <textarea> 요소를 사용해 보겠습니다.

다음 코드로 피드백 폼을 만들 수 있습니다.

<form>
	<label for="feedback">저희에게 남기고 싶은 피드백은 무엇인가요?</label><br /><br />
	<textarea rows="5" cols="30" id="feedback" name="feedback">
	여기에 피드백을 입력하세요.
	</textarea>
</form>

코드 설명은 다음과 같습니다. 먼저 웹 폼을 정의하는 <form> 태그를 선언하고, 이어서 <label> 태그로 '저희에게 남기고 싶은 피드백은 무엇인가요?'라는 안내 문구를 페이지에 추가했습니다.

그다음 <textarea> 태그로 피드백 입력란을 만들었으며, 네 가지 속성을 지정했습니다.

• rows: 5로 설정되어 필드의 행 수를 저장합니다.
• cols: 30으로 설정되어 필드의 열 수를 저장합니다.
• id: 폼에 부여된 고유 식별자로, 폼 제출 시 활용됩니다.
• name: 역시 폼을 식별하는 데 사용되며, 폼을 웹 서버로 제출하려면 반드시 필요합니다.

<textarea> 태그는 모든 주요 브라우저에서 지원됩니다.

위 예제는 <textarea> 태그의 기본적인 구현 방식이지만, 폼을 더욱 발전시킬 수도 있습니다.

HTML Textarea 활용 예제

텍스트 영역을 더 효과적으로 만드는 방법을 보여주는 두 가지 심화 예제를 살펴보겠습니다.

1. 최소·최대 글자 수 제한하기

앞서 살펴본 의류 매장 예제로 돌아가 보겠습니다. 사용자가 간결하게 피드백을 작성하도록 유도하기 위해 입력 글자 수를 최대 1,000자로 제한하고, 동시에 폼이 비어 있지 않도록 최소 10자를 요구하고 싶다고 해봅시다.

이럴 때 minlength와 maxlength 속성이 사용됩니다. minlength는 사용자가 반드시 작성해야 하는 최소 글자 수를, maxlength는 사용자가 작성할 수 있는 최대 글자 수를 지정합니다.

앞서 만든 폼에 minlength와 maxlength 속성을 추가한 예제입니다.

<form>
	<textarea rows="5" cols="30" id="feedback" name="feedback" minlength="10" maxlength="1000">
	여기에 피드백을 입력하세요.
	</textarea>
</form>

폼 화면에는 눈에 띄는 변화가 없지만, 폼을 제출하려고 할 때 사용자가 1,000자를 초과해 작성했다면 폼 내용은 유효하지 않은 것으로 처리됩니다.

주의할 점은, 사용자가 10자 미만으로 작성했을 때도 textarea는 여전히 유효한 것으로 간주된다는 것입니다. 최소 글자 수 제한을 강제하려면 required 속성을 함께 지정해야 합니다.

2. 플레이스홀더 텍스트 사용하기

위 웹 폼에서는 폼 안에 기본 텍스트('여기에 피드백을 입력하세요.')를 직접 지정했습니다. 이 정보는 유용하지만, 사용자가 원하지 않는다면 기본 텍스트를 직접 삭제해야 한다는 번거로움이 있습니다.

플레이스홀더 값을 지정하고 싶다면 placeholder 속성을 사용하세요. 이 속성은 폼이 비어 있을 때만 표시되는 안내 텍스트를 정의하며, 사용자가 입력을 시작하는 순간 자동으로 사라집니다.

'여기에 피드백을 입력하세요.'라는 플레이스홀더를 가진 <textarea> 예제입니다.

<textarea placeholder="여기에 피드백을 입력하세요." rows="5" cols="30">
</textarea>

실행 결과를 보면 '여기에 피드백을 입력하세요.'라는 텍스트가 입력 상자에 나타납니다. 하지만 사용자가 타이핑을 시작하면 이 텍스트는 사라집니다. 이 텍스트가 플레이스홀더임을 알 수 있는 이유는 연한 회색으로 표시되기 때문입니다. 반면 첫 번째 예제처럼 태그 사이에 직접 넣은 기본 텍스트는 별도로 스타일을 지정하지 않는 한 검은색으로 표시됩니다.

HTML Textarea 주요 속성 정리

<textarea> 태그는 여러 태그 전용 속성을 지원하며, HTML의 모든 전역 속성(global attributes)도 함께 사용할 수 있습니다.

<textarea> 태그가 지원하는 주요 속성은 다음과 같습니다.

마무리

HTML <textarea> 태그는 여러 줄 텍스트 입력 요소를 만드는 데 사용됩니다. 사용자로부터 긴 데이터를 수집해야 할 때 특히 유용합니다.

이 글에서는 예제와 함께 <textarea> 태그로 텍스트 영역을 만드는 방법을 살펴보았고, 태그 전용 속성들을 정리한 참조표도 함께 제공했습니다. 이제 여러분도 HTML 전문가처럼 <textarea> 태그를 자유롭게 활용할 준비가 되었습니다!