여러 줄 입력하는 <textarea> 태그 올바른 사용법

728x90

목 차

• 1. <textarea> 태그란?
• 2. 기본 구조
• 3. <textarea> 속성
• 3-1. name
• 3-2. id<
• 3-3. rows
• 3-4. cols
• 3-5. placeholder
• 3-6. disabled
• 3-7. readonly
• 3-8. maxlength
• 3-9. wrap
• 4. 예제
• 4-1. 기본 텍스트 입력 필드
• 4-2. placeholder 속성 적용
• 4-3. 비활성화 된 텍스트 영역 (disabled 속성)
• 4-4. 읽기 전용 텍스트 영역 (readonly 속성)
• 4-5. 제한된 문자수
• 4-6. 입력된 텍스트 가져오기
• 4-7. 텍스트 동적 변경

반응형

 

1. <textarea> 태그란?

• HTML의 <textarea> 태그는 여러 줄의 텍스트를 입력할 수 있는 입력 필드를 생성하는 데 사용됩니다. 주로 사용자로부터 긴 텍스트 데이터를 입력받기 위해 사용되며, 예를 들어 댓글 입력란, 메모 입력란 등에 사용됩니다.

 

---

 

 

2. 기본 구조

<textarea name="message" id="message" rows="4" cols="50">
textarea 태그 올바른 사용법
</textarea>

• <textarea>: 텍스트 입력 필드를 생성하는 태그
• Default text: 초기 텍스트로 표시되며, 사용자가 입력 필드에 입력하지 않았을 경우 기본 값으로 표시됩니다.

기본 예제 textarea 태그 올바른 사용법

 

---

 

 

3. <textarea> 속성

3-1. name

• 폼 데이터를 서버로 전송할 때 이 필드의 이름으로 사용됩니다.
• 예: <textarea name="comment"></textarea>

 

3-2. id

• 고유한 식별자를 지정하여 자바스크립트나 CSS에서 참조할 수 있게 합니다.
• 예: <textarea id="text1"></textarea>

 

 

3-3. rows

• 텍스트 입력 필드의 행(row) 개수를 설정합니다.
• 예: <textarea rows="5"></textarea>

 

3-4. cols

• 텍스트 입력 필드의 열(column) 개수를 설정합니다.
• 예: <textarea cols="30"></textarea>

 

3-5. placeholder

• 사용자가 입력 필드에 텍스트를 입력하기 전 표시될 안내 문구입니다.
• 예: <textarea placeholder="Enter your message"></textarea>

 

 

3-6. disabled

• 텍스트 입력 필드를 비활성화하여 사용자가 입력할 수 없게 만듭니다.
• 예: <textarea disabled></textarea>

 

3-7. readonly

• 텍스트를 읽을 수는 있지만 수정은 불가능하게 만듭니다.
• 예: <textarea readonly>This text is readonly</textarea>

 

3-8. maxlength

• 입력 가능한 최대 문자 수를 설정합니다.
• 예: <textarea maxlength="200"></textarea>

 

3-9. wrap

• 텍스트가 입력 필드 내에서 줄바꿈되는 방식을 설정합니다.
  • soft: 줄바꿈 없이 서버에 데이터 전송.
  • hard: 줄바꿈된 상태로 서버에 데이터 전송.
• 예: <textarea wrap="soft"></textarea>

 

 

---

 

4. 예제

4-1. 기본 텍스트 입력 필드

<textarea name="comments" rows="4" cols="50">
Enter your comments here...
</textarea>

 

 

4-2. placeholder 속성 적용

<textarea name="feedback" placeholder="Type your feedback here..."></textarea>

 

4-3. 비활성화 된 텍스트 영역 (disabled 속성)

<textarea name="disabledField" disabled>
This field is disabled.
</textarea>

 

4-4. 읽기 전용 텍스트 영역 (readonly 속성)

<textarea name="readonlyField" readonly>
This field is read-only.
</textarea>

 

 

4-5. 제한된 문자수

<textarea name="limitedField" maxlength="100" placeholder="Max 100 characters"></textarea>

 

4-6. 입력된 텍스트 가져오기

<textarea id="myTextarea" placeholder="Type something..."></textarea>
<button onclick="getTextareaValue()">Get Text</button>

<script>
  function getTextareaValue() {
    const textarea = document.getElementById("myTextarea");
    alert("You entered: " + textarea.value);
  }
</script>

 

 

4-7. 텍스트 동적 변경

<button onclick="setTextareaValue()">Set Text</button>
<textarea id="dynamicTextarea"></textarea>

<script>
  function setTextareaValue() {
    const textarea = document.getElementById("dynamicTextarea");
    textarea.value = "This text was set dynamically!";
  }
</script>