HTML <textarea> - 다중 입력창 (폼 form 양식)

HTML <textarea> - 다중 입력창 (폼 form 양식)

HTML <textarea> → 박스 형태의 입력창 만들기

- <textarea>~</textarea>으로 클로징 태그를 작성해야합니다.

- 사용자가 여러 줄의 데이터를 입력할 수 있는 창을 만드는 것입니다.

- rows 속성과 cols 속성을 이용하여 <textarea> 크기를 설정해 작성 영역을 만들수 있습니다.

 

[ textarea 기본 형태 ]

↓ <textarea>태그는 전체 선택 항목들을 감싸고 <option> 태그는 각 항목을 감싸는 형태입니다.

<textarea name="" cols="" rows=""></textarea>

 

<textarea>에서 자주 쓰는 속성
→ autofocus, cols, row, required, placeholder

• autofocus : 자동으로 텍스트를 입력할 영역을 알려주는 속성
• cols : 입력할 수 있는 글자수를 의미 (= 입력창의 너비를 결정)
  → 코드예시)  cols="숫자" ← 이 숫자는 작성가능한 숫자를 말한다.→ 예를들어)  cols="40"으로 작성하면 영어와 숫자는 40자를 한글은 20글자를 입력할 수 있음!
• rows : 입력할 수 있는 줄의 숫자를 의미 (= 입력창의 높이를 결정)
  → 예를들어)  rows="10"으로 작성하면 10줄 작성 가능하다는 의미!
• required : 텍스트 영역이 비워져 있는 경우 서버로 제출될 수 없다는 의미로 빈칸이면 값이 전송되지 않습니다.
• placeholder : 사용자에게 어떤 내용을 쓰면 좋을지 미리 알려주는 도움말역할을 해주며, 사용자가 텍스트를 입력하면 placeholder로 알려준 내용은 없어집니다.

 

[ 실전예시 ]

<p><strong>Q 현재 가장 궁금한 내용을 작성해주세요.</strong></p>
<form>
	<textarea cols="40" rows="10" autofocus required placeholder="ex,신청자격이 될까요?"></textarea>
    <br>
    <button type="submit">전송하기</button>
    <button type="reset">다시쓰기</button>
</form>

 

[ 실행시 화면 ]

html textarea code 실행화면 - chrome

 

[ 실행시 화면 - 입력창에 텍스트를 하나도 치지 않고 전송을 누르면 나타나는 화면 ]

html textarea - 속성 required 정상 작동시 실행화면 - chrome