HTML textarea 태그 – 여러 줄의 문자열 받기

폼(form)에서 입력 양식을 만들 때 주로 input 태그를 사용합니다. input 태그는 간단한 한 줄 정도의 내용을 받을 때 사용하지만 댓글이나 메모와 같이 여러 줄의 문자열을 입력받아야 되는 경우도 있습니다. 그럴 경우에는 textarea 태그를 사용하시면 됩니다.

textarea 태그

1. 사용법

<textarea> 내용 </textarea>

2. textarea 태그 주요 속성

속성	설명
cols	너비 지정
rows	높이 지정
placeholder	힌트를 표시
disabled	비활성화 처리
readonly	읽기 전용
autofocus	페이지 로드 할때 커서 이동
maxlength	최대 문자 수
minlength	최수 문자 수
required	필수 입력 처리

사용 예제

1. 소스 코드

<!DOCTYPE html>
<html>
<head>
     <title>textarea 태그</title>
</head>
<body>
     <div style="margin-bottom: 10px;">[댓글 입력]</div>
     <textarea id="memo" cols="50" rows="5" maxlength="1000" 
               placeholder="댓글은 1000자 이내로 입력하세요."></textarea>
     
     <div style="margin: 20px 0px;">readonly</div>
     <textarea cols="50" rows="3" readonly>읽기 전용</textarea>

     <div style="margin: 20px 0px;">disabled</div>
     <textarea cols="50" rows="3" disabled>비활성화</textarea>

     <div style="margin: 20px 0px;">CSS 적용</div>
     <textarea style="width: 50%; height: 50px" required>비활성화</textarea>
</body>
</html>