textarea

HTML Reference

Contents

1 개요
2 문법
3 예제 - 기본
4 예제 - 기본값
5 예제 - 안내 문구
6 예제 - 읽기 전용
7 예제 - 비활성화

개요

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

문법

<textarea></textarea>

예제 - 기본

col 속성으로 가로 크기를, row 속성으로 세로 크기를 정할 수 있습니다. 하지만, 크기 등 모양은 CSS의 width, height로 정하는 게 좋습니다.

<!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>

예제 - 기본값

기본값이 필요하다면 <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>

예제 - 안내 문구

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>

Post Views: 1

HTML Reference

HTML / Reference / q

q는 인용임을 나타내는 태그입니다. 인용임을 나타내는 태그에는 blockquote와 q가 있는데, blockquote는 블록 요소이고 q는 인라인 요소입니다.

HTML / Reference / pre

pre 태그는 HTML에서 "preformatted text"를 정의하는 데 사용됩니다. 이 태그는 HTML 문서에서 텍스트를 작성한 그대로 표시하도록 하여, 공백과 줄바꿈을 유지하는 특징이 있습니다. 일반적으로 코드 블록, ASCII 아트, 또는 공백과 줄바꿈을 유지해야 하는 텍스트를 표시할 때 사용됩니다.

HTML / Reference / figure, figcaption

figure는 사진, 이미지, 다이어그램 등을 감싸는 테그입니다. figcaption은 figure 요소에 캡션을 만듭니다. figure 요소의 자식 요소이며, 제일 처음 또는 제일 마지막에 위치합니다.

HTML / Reference / noscript

noscript 태그는 HTML 문서에서 JavaScript가 비활성화되어 있을 때 표시할 콘텐츠를 지정하는 데 사용됩니다. 사용자의 브라우저가 JavaScript를 지원하지 않거나, JavaScript가 비활성화되어 있는 경우에만 이 태그 내의 콘텐츠가 렌더링됩니다.

HTML / Reference / select

select 태그는 드롭다운 목록을 생성하는 데 사용됩니다. 사용자는 이 드롭다운에서 하나 이상의 옵션을 선택할 수 있습니다. 드롭다운 목록의 내용은 option 태그로 만듭니다.