본문 바로가기
IT/웹디자인

HTML 문서 입력 창 만들기 / textarea 태그

by Happy Log 2018. 5. 28.
반응형

HMLT - textarea

 

<textarea> 태그를 이용하여 입력 창 만들기를 학습 해 보도록 하겠습니다.

티스토리 블로그의 경우 댓글쓰기 입력창에 해당하는 부분입니다.

 

  기본형식

<textarea [속성]>입력창내용</textarea>

 

  속성

  • NAME = "변수명"
    → 입력한 내용을 저장 할 변수의 이름을 지정 합니다. 
  • ROWS = "행의 수"
    → 브라우저에 표시되는 문서 입력창의 줄 수를 지정합니다. 기본값을 1 입니다.
  • COLS = "열의 수"
    → 브라우저에 표시되는 문서 입력창의 열 수를 지정합니다. 기본값은 20 입니다.

  문서 입력 창 예제

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>
<html>
<head>
  <title>문서 입력창 예제</title>
</head>

  <from action="testPage.html" method="post">
    <textarea name="addText" rows="5" cols="30">
</textarea>

    <br/> 

    <input type="submit" value="보내기">

    <input type="reset" value="취소">

  </from>

</html>

 

  예제 결과

결과

 

보내기(submit) 버튼을 클릭하면 입력 된 내용이 전송 됩니다.

또한 취소(reset) 버튼을 클릭하면 입력 된 내용이 삭제 됩니다.

 

HTML 기초학습으로 더 깊이 있는 부분은 프로그래밍 부분에서 올리도록 하겠습니다.

반응형

댓글