[HTML] 여러 줄 입력하는 textarea 만들기

<textarea> 태그는 한 줄 이상의 문장을 입력할 때 사용하는 폼을 말합니다. 주로 게시판에서 게시물을 입력하거나 회원가입 양식에서 사용자 약관을 표시할 때 자주 사용됩니다. <textarea> 태그는 일반적으로 <form> 태그와 함께 사용되며, 사용자가 입력한 데이터를 서버로 보내기 위해 사용됩니다. 이 태그는 "name" 속성을 사용하여 입력 필드의 이름을 지정할 수 있습니다.

 

 textarea 만들기 

• name : 다른 폼 요소와 구분하기 위해 텍스트 영역의 이름을 지정합니다.
• cols : 텍스트 영역의 가로 너비를 문자 단위로 지정합니다.
• rows : 텍스트 영역의 세로 길이를 줄 단위로 지정합니다. 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생깁니다.

See the Pen textarea1 by wjdxo513 (@wjdxo513) on CodePen.

 

위의 예제에서는 가로(cols) 30개와 세로(rows) 10줄의 텍스트를 입력할 수 있는 상자를 생성합니다.

 

힌트 설정하기(placeholder)

• placeholder : 사용자가 텍스트를 입력할 때 도움이 되도록 입력란에 힌트 내용을 제공합니다.

See the Pen textarea2 by wjdxo513 (@wjdxo513) on CodePen.

 

입력을 할 수 있는 태그에서는 placeholder 속성을 많이 사용합니다. placeholder은 사용자가 입력을 할 때 도움이 되도록 힌트를 표시하며 해당 입력 태그를 클릭하면 힌트 내용이 사라집니다. 사용자에게 어떤 내용을 입력해야 할지 알려줄 수 있어 textarea 등 입력 태그에서 자주 사용됩니다.

 

required, readonly, disabled

• required : 내용을 폼에 입력한 후 submit을 했을 때 필수적으로 입력해야 하는 곳에는 required 속성을 지정해 필수 필드로 만들 수 있습니다.
• readonly : 텍스트를 입력하지 못하게 하고 사용자가 해당 태그의 텍스트를 읽게만 만들 수 있습니다.
• disabled : 텍스트를 입력하지 못하게 하고 비활성화 처리하며 배경이 회색으로 바뀝니다. 

See the Pen textarea3 by wjdxo513 (@wjdxo513) on CodePen.

 

textarea와 같이 사용할 수 있는 속성은 required, readonly, readonly 정도가 있을 것 같습니다. 위의 예제에서 각 속성의 특성을 확인해 보세요.