여러 줄의 문자열을 입력하는 방법 - textarea

textarea는 문의 양식에서 여러 줄의 긴 문장을 입력할 수 있습니다.
1 min read

폼에서 직접 여러줄의 텍스트를 입력하는 영역을 만들 수 있습니다. 이 영역을 텍스트 영역(textarea)라고 하며 한 줄 이상의 문장을 입력할 때 사용하는 폼을 말합니다. 게시판에서 게시물을 입력하거나 회원가입 양식에서 동의 약관을 표시할 때 자주 사용합니다.

textarea

<textarea>는 여러 줄의 긴 문장을 입력할 수 있는 양식입니다.

  • cols : 가로 너비를 문자 단위로 지정합니다.
  • rows : 세로 길이를 줄 단위로 지정합니다.

 

예제

예제 1

<textarea></textarea>사이에 필요한 기본값을 입력합니다.

<form>
  <p><textarea>
abc
def
  </textarea></p>
  <p><input type="submit" value="Submit"></p>
</form>

 

예제 2

col 속성으로 가로 크기를, row 속성으로 세로 크기를 정할 수 있습니다.

<form>
  <p><textarea cols="40" rows="10"></textarea></p>
  <p><input type="submit" value="Submit"></p>
</form>

하지만, 크기 등 모양은 CSS에서 정하는 게 좋습니다.

 

예제 3

placeholder 속성으로 안내 문구를 넣을 수 있습니다.

<form>
  <p><textarea placeholder="Input some text."></textarea></p>
  <p><input type="submit" value="Submit"></p>
</form>

 

예제 4

readonly 속성을 추가하면 읽기만 가능합니다.

<form>
  <p><textarea placeholder="Read Only" readonly></textarea></p>
  <p><input type="submit" value="Submit"></p>
</form>

 

예제 5

disabled 속성을 추가하면 사용할 수 없고, 배경색이 바뀝니다.

<form>
  <p><textarea placeholder="Disabled" disabled></textarea></p>
  <p><input type="submit" value="Submit"></p>
</form>

You may like these posts

  • 표(table)에 제목이나 설명을 덧붙일 때 <caption> 태그를 사용하지만 <figcaption> 태그를 사용할 수도 있습니다. 두 가지 방법 모두 알아보겠습니다.   caption 먼저 <caption> 태그는 <t…
  • 줄바꿈 HTML은 연속한 여러 개의 빈 칸 또는 줄바꿈을 하나의 빈 칸으로 인식합니다. 따라서 코드 상에서 줄바꿈을 하거나 여러 번 띄어쓰기를 해도 한 번 띄어쓰기로 표현됩니다. 만약 블록 요소에서 줄바꿈을 하고 싶다면 <br> 태그를 이용합니다. 다음은 <br&g…
  • audio HTML5에서 배경 음악이나 효과음 등 오디오를 삽입할 때는 <audio> 태그를 사용합니다. 이때 대부분의 브라우저에서 mp3 파일을 지원하기 때문에 mp3 파일을 사용하는 것이 좋습니다.   기본형 <audio autoplay controls…
  • 표 만들 때 사용하는 태그 <table> : 표를 만듭니다. <tr> : 행을 만듭니다. <th> : 열의 제목이 들어가는 셀을 만듭니다. <td> : 내용이 들어가는 셀을 만듭니다. <thead>, <tbody>, …
  • img <img> 태그는 HTML 문서에 이미지를 삽입하는 태그입니다.   기본형 <img src="images.jpg" alt="No image" width="540" height="360"> 주요 속성은 다음과 같습니다. src : 이미지의 …
  • 구글 블로그(Blogger)에서 게시물을 작성하고 페이지와 테마 수정을 위해 필요한 HTML 기본지식 기본형 <name>Contents</name> <name>을 시작 태그, </name>을 종료 태그 라고 합니다. …

Post a Comment