HTML <textarea> 태그 – 올바른 이해와 사용 방법

`<textarea>` 태그의 정의 및 사용법

<textarea> 태그는
여러 줄로 된 텍스트 입력 필드를 나타내는 태그입니다.

사용자가 댓글 작성, 리뷰 작성, 간단한 메모 작성, 소스 코드 입력 등 여러 줄의 일반 텍스트를 쉽게 입력할 수 있도록 하는 데 유용합니다.

HTML

<div style="display:flex;">
    <label for="user-comment" style="margin-right: 0.5em;">댓글</label>
    <textarea id="user-comment" rows="6" cols="22"></textarea>
</div>

기술적인 문법 요약

textarea 태그의 기술적인 구문 요약
허용되는 콘텐츠	텍스트
가능한 부모 요소	(`<textarea>`의 입력 값 자체가 구문적 내용이므로) 구문적 내용을 허용하는 모든 요소
암시적인 `role` 속성의 값	`textbox`
허용되는 `role` 속성의 값	없음

초기 입력 값 지정하기

<input type="text">에서는 초깃값을 value 속성으로 지정하지만,
<textarea> 태그는 value 속성을 지원하지 않습니다.

<textarea> 태그에서 초깃값을 지정하려면 콘텐츠에 직접 삽입하면 됩니다.

관련 속성 사용하기

<textarea>의 관련된 속성에 대해 알아보겠습니다.

`rows`와 `cols` 속성

cols 속성은 컨트롤이 표시되는 너비(평균 문자 너비)를 양의 정수로 지정합니다. 지정되지 않으면 기본값은 20입니다.

rows 속성은 컨트롤이 표시되는 텍스트의 줄 수 있습니다. 양의 정수로 지정하며, 지정되지 않으면 기본값은 2입니다.

`placeholder` 속성

placeholder 속성은 값이 설정되지 않은 경우 컨트롤에 표시되는 텍스트를 지정합니다.
이 값은 사용자의 데이터 입력을 돕기 위한 짧은 힌트를 나타냅니다. 힌트는 샘플 값 또는 예상 형식에 대한 간략한 설명일 수 있습니다.

HTML

<div style="display: flex;">
    <label for="user-comment" style="margin-right: 0.5em;">댓글</label>
    <textarea
        id="user-comment"
        rows="6"
        cols="22"
        placeholder="간단한 의견을 입력하세요..."></textarea>
</div>

접근성 고려사항

placeholder 속성이 해당 컨트롤의 레이블(이름표)을 대신할 수 없습니다.
컨트롤의 레이블(이름표)은 <label>을 사용해야 합니다. 콘텐츠에 예기치 않은 기술적 문제를 일으킬 수 있습니다.

자세한 사항은 <input> 태그의 접근성 고려사항을 참조하세요.

`readonly`와 `disabled` 속성

readonly와 disabled 속성은 컨트롤을 변경 혹은 편집할 수 없게 만듭니다.
하지만 이 두 속성에는 몇 가지 차이점이 있습니다.

readonly 속성은 컨트롤 읽기 전용 속성이라고도 부르며, 내용을 편집할 수 없지만 포커스가 가능하고, 양식 제출 시 해당 값도 같이 제출됩니다.

disabled 속성은 컨트롤 비활성 속성이라고도 부르며, 내용을 편집할 수 없고 포커스도 가능하지 않으며, 양식 제출 시 해당 값은 제출되지 않습니다.

이 두 속성은 모두 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

`minlength`와 `maxlength` 속성

minlength 속성은 사용자가 입력할 수 있는 최소 문자열 길이(문자 개수)를 지정합니다.

maxlength 속성은 사용자가 입력할 수 있는 최대 문자열 길이(문자 개수)를 지정합니다. 이 값을 지정하지 않으면 사용자는 무제한의 문자를 입력할 수 있습니다.

`required` 속성

양식을 제출하기 전에 사용자가 컨트롤의 입력 값을 지정해야 함을 나타냅니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML

<form>
    <div style="display: flex; margin-bottom: 1em;">
        <label for="user-comment" style="margin-right: 0.5em;">댓글</label>
        <textarea
            id="user-comment"
            rows="6"
            cols="22"
            placeholder="간단한 의견을 입력하세요..."
            required></textarea>
    </div>
    <button type="submit">제출</button>
</form>

`<textarea>`의 한계와 `contenteditable` 속성의 간단한 언급

`<textarea>`의 한계

<textarea> 태그는 사용자로부터 여러 줄의 텍스트를 입력받기 위해 고안된 것으로, 단순한 텍스트 입력만 가능하며 텍스트의 굵기, 기울임, 링크 등의 서식을 직접 입력하거나 적용할 수 없습니다. 사용자는 이러한 이유로 인해 복잡한 텍스트 편집 기능을 추가하기 어렵다는 한계가 있습니다.

`contenteditable` 속성

contenteditable 속성을 사용하면 <textarea> 태그가 아니더라도, 예를 들어 <div> 태그에서 콘텐츠를 편집할 수 있습니다. 물론 서식 있는 텍스트(굵게, 기울임, 링크 등)를 입력할 수도 있습니다. 또한 이메일 내용 작성이나 블로그 포스팅 시 사용되는 편집기를 구현할 때 유용하게 사용됩니다.

HTML contenteditable 속성

contenteditable 속성은
요소의 콘텐츠를 편집할 수 있는지 여부를 지정합니다.
이 속성은 true로 설정하면 요소의 콘텐츠를 편집할 수 있고 false로 설정하면 편집할 수 없습니다.

비교 요약

textarea 태그와 contenteditable 속성의 비교 요약
특징	`<textarea>`	`contenteditable` 속성
다양한 텍스트 서식	불가능	가능
데이터 전송	폼과 함께 쉽게 전송 가능	추가 처리 필요
사용 용이성	간단	복잡
유연성	제한적	높음

브라우저 호환성

textarea 태그와 관련 속성의 브라우저 호환성
태그와 관련 속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`<textarea>`	1	12	1	4
`rows`	1	12	1	4
`cols`	1	12	1	4
`placeholder`	4	12	1	4
`readonly`	1	12	1	4
`disabled`	1	12	1	4
`minlength`	40	17	51	10.1
`maxlength`	4	12	4	5
`required`	4	12	4	5

명세서

textarea 태그의 명세서 사양
명세서 사양
`<textarea>`	HTML Standard #the-textarea-element

참고문헌

MDN - <textarea> The Textarea element

<textarea> 태그의 정의 및 사용법

기술적인 문법 요약

초기 입력 값 지정하기

관련 속성 사용하기

rows와 cols 속성

placeholder 속성

접근성 고려사항

readonly와 disabled 속성

minlength와 maxlength 속성

required 속성

<textarea>의 한계와 contenteditable 속성의 간단한 언급

<textarea>의 한계

contenteditable 속성

비교 요약

브라우저 호환성

명세서

참고문헌

같이 보기

`<textarea>` 태그의 정의 및 사용법

`rows`와 `cols` 속성

`placeholder` 속성

`readonly`와 `disabled` 속성

`minlength`와 `maxlength` 속성

`required` 속성

`<textarea>`의 한계와 `contenteditable` 속성의 간단한 언급

`<textarea>`의 한계

`contenteditable` 속성