Home
HTML

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

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

폼에서 직접 여러줄의 텍스트를 입력하는 영역을 만들 수 있습니다. 이 영역을 텍스트 영역(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>

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

Post a Comment