HTML textarea, 여러 줄의 텍스트를 입력하는 폼 생성 태그

TEXTAREA 태그란?

HTML <textarea> 태그는 여러 줄의 텍스트를 입력받을 수 있는 폼을 생성하는데 사용합니다. 이메일 폼을 만든다고 가정할 때 내용을 넣는 폼을 생각하면 이해가 빠릅니다.

 

사용법

<form>
  <label for="blog">New Blog Post: </label>
  <br>
  <textarea id="blog" name="blog" rows="5" cols="30">
  </textarea>
</form>

• <form>과 <label>태그를 엽니다
• <textarea>태그를 만듭니다
  • id, name : id는 해당 폼을 고유하게 식별하는데 사용하고, name은 해당 요소의 이름을 정의해서 서버로 데이터를 전송할 때 식별자로 이용합니다. id는 유일해야 하지만, name은 동일한 이름을 사용해서 묶을 수 있습니다.
  • rows : 텍스트 입력할 수 있는 줄 수 입니다.
  • cols : 텍스트를 입력할 수 있는 너비입니다.
  • placeholder : 텍스트 입력란에 기본적으로 표시되는 임시 텍스트입니다

 

예시화면

See the Pen textarea by 40's Programmer (@40sProgrammer) on CodePen.

 

<textarea>와 </textarea> 사이에 텍스트를 입력하면 어떻게 될까요?

입력 폼 안에 텍스트가 미리 삽입됩니다. 물론 사용자가 지울 수도 있구요.

카페 같은 커뮤니티에서 글을 쓸 때 미리 양식 등이 세팅되어 있는 경우를 볼 수 있는데 비슷한 기능이라고 보시면 됩니다.

 

See the Pen textarea2 by 40's Programmer (@40sProgrammer) on CodePen.