HTML-CSS] 텍스트 입력 상자인 textarea 태그의 사용법과 속성

이것이 <TEXTAREA> TAG 로 만든 입력 박스입니다. (현재, "읽기 전용 속성"을 주었습니다):

이것은 textarea 태그. 이것은 textarea 태그. 이것은 textarea 태그. 이것은 textarea 태그. 탭(Tab)도 그대로 표현. 이것은 textarea 태그가 레더링된 모습입니다. 이것은 textarea 태그가 레더링된 모습입니다. 이것은 textarea 태그가 레더링된 모습입니다. 이것은 textarea 태그가 레더링된 모습입니다. 이것은 textarea 태그가 레더링된 모습입니다. 이것은 textarea 태그가 레더링된 모습입니다.

※ 행끝에 붙어 있는 <br /> 태그는 이 블로거닷컴의 시스템에서 강제로 붙인 것입니다. <br /> 태그는 없는 것으로 간주하고 다음을 읽어주세요.


텍스트 입력 상자인 textarea 태그는, '프로그래밍 소스 등을 웹페이지에 그대로 표현'할 때나, '여러 줄로 된 텍스트 즉 Multiline Text 를 입력' 받을 때 사용됩니다.

textarea 태그 안에 있는 문자열은 '있는 그대로' 표시되고, HTML 소스에 있는 대로 행갈이가 됩니다. 원래 HTML은 2개 이상의 공백은 1개로 간주해 버립니다. 그러나 textarea 태그 안에 있는 공백은 그대로 표시됩니다.






또한 <TEXTAREA> 태그 안에 있는 다른 태그는 작동하지 않고, 그냥 문자열로서만 표시됩니다. 가령 <br /> 이런 태그를 사용하면 <br /> 태그 자체가 출력됩니다. 그러나 만약 <br /> 이런 태그를 그대로 상자에 표현하고자 할 때에는 &lt;br /&gt; 이런 식으로 표현해 주는 것이 좋습니다.

&
<
>

위의 3개의 문자는

&amp;
&lt;
&gt;

이렇게 바꾸어 주는 것이 '정석'입니다.

<textarea> 태그를 위한 속성들

편집이 불가능하게 만들려면 readonly="readonly" 속성을 사용합니다. (그냥 readonly 만 써주어도 되지만, XHTML 규약을 충족시키기 위해서는 readonly="readonly" 이렇게 표현해 주는 것이 좋습니다.)




cols="40" rows="10"
이것은 textarea 상자의 가로 길이와 세로 길이를 정해 주는 속성입니다. (그런데 파이어폭스와 IE에서의 차이가 아주 심합니다. 골치 아프더군요.)
업데이트:
style="height:200px;width:380px;"
이런 CSS 스타일을 적용하면 IE나 파폭에서 동일합니다. cols rows 속성으로는 잘 되지 않았습니다.



wrap="soft" : 자동으로 행갈이 (기본값)
wrap="hard" : 자동으로 행갈이
wrap="off" : 행갈이 하지 않기

wrap 속성으로, textarea 상자의 우측 변에서 문자열이 다음줄로 행갈이가 되도록 조정할 수 있습니다. 기본적으로 행갈이가 됩니다. 그런데 soft 와 hard 의 차이는 발견하지 못했습니다.

텍스트 자동 선택

onclick="this.select()" onfocus="this.select()"
이것은 textarea 태그 속의 내용을 마우스로 클릭하면 자동으로 선택되도록 하는 코드입니다.

---

Update 2021-09-02: 현재의 블로거닷컴에서는 br 태그를 강제로 붙이지 않습니다. 따라서 아래의 내용은 무효입니다.

블로거(blogger.com)에서는, textarea 태그 사용이 힘듦

블로거닷컴은 기본적으로 모든 행에 <br /> 을 붙여 강제로 행갈이 하는데, 그러면 textarea 태그의 특성과 충돌하여 뒤죽박죽이 됩니다.

다만 1줄로 된 텍스트는, 어차피 행갈이가 없기 때문에 textarea 태그 안에 넣어도 됩니다.

특히 URL 즉 인터넷 주소 등은 페이지 우측 가장자리에서 자동으로 행갈이가 되지 않고, 페이지를 뚫고 나가는 경우가 있는데, 이때는 textarea 태그를 쓸 수밖에 없더군요.


▶▶ [HTML/CSS] 긴 URL 의 행갈이(Wrap)를 위한 TEXTAREA 태그(tag)