HTML 텍스트 영역 — textarea · cols · rows · autocomplete 완전 정리

 

 

Web Development · HTML Form

HTML 텍스트 영역 —
textarea · cols · rows · autocomplete

여러 줄 입력 + 자동완성의 비밀 + 회원가입 폼 종합

시작 오늘 분석할 코드

회원가입 폼 + 회사 소개. 핵심은 <textarea>(여러 줄 입력)와 autocomplete(브라우저 자동완성). 그리고 label 안 em으로 빨간 별표(*) 강조.

<input type="text" id="new_id" size="20" autocomplete="on" required> <textarea name="intro" cols="60" rows="5"> 열심히 사는 사람들의 손을 잡아주는 곳 - 이지스 퍼블리싱 ... </textarea>

1 <textarea> — 여러 줄 입력의 표준

<input>은 한 줄만, <textarea>는 여러 줄을 받을 수 있다. 자기소개·코멘트·문의 내용 등에 사용.

<input type="text">

한 줄
닫기 태그 없음 (빈 태그)
value 속성에 초기값
이름·아이디 등

<textarea>

여러 줄
닫기 태그 있음
태그 사이 텍스트가 초기값
코멘트·자기소개 등

※ textarea의 초기값은 value 속성이 아니라 태그 사이 텍스트로 넣는다. <textarea>초기 내용</textarea>. 띄어쓰기·줄바꿈도 그대로 보존됨.

---

2 cols · rows — 크기 지정

속성	의미	단위
cols	가로 글자 수	글자 폭
rows	표시할 줄 수	줄

※ 크기를 넘으면 자동 스크롤바가 생긴다. cols/rows는 시각적 표시 영역만 정의, 실제 입력 가능량은 무제한 (maxlength로 제한 가능).

※ 모던 웹은 cols/rows 대신 CSS의 width/height를 권장. 픽셀 단위로 정밀 + 반응형 가능.

---

3 autocomplete — 브라우저 자동완성

autocomplete는 브라우저가 이전 입력값을 기억해 자동완성으로 보여주는 기능을 제어한다.

값	동작
on (기본)	자동완성 허용
off	자동완성 차단
name	이름 자동완성
email	이메일 자동완성
tel	전화번호 자동완성
street-address	주소 자동완성
new-password	새 비밀번호 (제안 모드)
current-password	로그인 비밀번호

※ 비밀번호 입력란에 autocomplete="off"를 강제해도 모던 브라우저는 무시할 수 있다. 비밀번호 관리자 사용을 권장하는 방향.

---

4 label 안 em — 별표(*) 강조 패턴

이번 코드는 <label>아이디 <em>*</em></label>처럼 별표를 em으로 감싸 빨간 굵은 별표로 표시한다. 필수 입력 표시의 표준 패턴.

<style> form label em { color: red; font-weight: 800; } </style> <label>아이디 <em>*</em></label> ↓ 결과 ↓ 아이디 * ← *만 빨갛고 굵음

---

반응형

5 자주 하는 실수

실수	증상	해결
textarea를 빈 태그로	닫기 태그 없으면 깨짐	반드시 </textarea>
value 속성에 초기값	적용 안 됨	태그 사이에 텍스트
cols/rows로만 크기	반응형 안 됨	CSS width/height
비밀번호 autocomplete="off"	브라우저가 무시	new-password 사용
resize 못 막음	사용자가 크기 변경	resize: none CSS

---

핵심 한 줄 요약

<textarea>여러 줄 입력 — 닫기 태그 필수

초기값태그 사이 텍스트로

cols / rows가로 글자 수 / 줄 수

autocomplete자동완성 제어 (on/off/email 등)

new-password새 비밀번호 — 추천 모드

label em필수 별표 빨간 강조 패턴

resize: none사용자 크기 조절 막기

Tags

#textarea #cols #rows #autocomplete #em #HTML #텍스트영역 #여러줄입력 #폼 #회원가입 #fieldset #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

textarea, cols, rows, autocomplete, em, HTML, 텍스트영역, 여러줄입력, 폼, 회원가입, fieldset, 웹개발, 티스토리