CODING FACTORY

HTML / textarea / 여러 줄의 문자열을 입력할 수 있는 양식

textarea

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

문법

<textarea></textarea>

예제

col 속성(attribute)으로 가로 크기를, row 속성으로 세로 크기를 정할 수 있습니다. 하지만, 크기 등 모양은 CSS에서 정하는 게 좋습니다.

<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>HTML</title>
    <style>
      * {
        font-size: 16px;
        font-family: Consolas, sans-serif;
      }
    </style>
  </head>
  <body>
    <form>
      <p><textarea cols="50" rows="10"></textarea></p>
      <p><input type="submit" value="Submit"></p>
    </form>
  </body>
</html>

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

<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>HTML</title>
    <style>
      * {
        font-size: 16px;
        font-family: Consolas, sans-serif;
      }
      textarea {
        width: 80%;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <form>
      <p><textarea placeholder="Input some text."></textarea></p>
      <p><input type="submit" value="Submit"></p>
    </form>
  </body>
</html>

readonly를 추가하면 읽기만 가능합니다.

<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>HTML</title>
    <style>
      * {
        font-size: 16px;
        font-family: Consolas, sans-serif;
      }
      textarea {
        width: 80%;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <form>
      <p><textarea placeholder="Read Only" readonly></textarea></p>
      <p><input type="submit" value="Submit"></p>
    </form>
  </body>
</html>

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

<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>HTML</title>
    <style>
      * {
        font-size: 16px;
        font-family: Consolas, sans-serif;
      }
      textarea {
        width: 80%;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <form>
      <p><textarea placeholder="Disabled" disabled></textarea></p>
      <p><input type="submit" value="Submit"></p>
    </form>
  </body>
</html>

기본값이 필요하다면 <textarea>와 </textarea> 사이에 입력합니다. 여러 줄이 가능합니다.

<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>HTML</title>
    <style>
      * {
        font-size: 16px;
        font-family: Consolas, sans-serif;
      }
      textarea {
        width: 80%;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <form>
      <p><textarea>
123
123
      </textarea></p>
      <p><input type="submit" value="Submit"></p>
    </form>
  </body>
</html>

HTML

HTML

최근 글