HTML textarea 텍스트 입력 박스 만들기

텍스트 박스는 사용자로부터 텍스트를 입력 받을 수 있는 요소입니다. 텍스트 박스를 클릭하거나 탭하면 깜박이는 커서가 나타나 입력 받을 준비가 되었음을 알려줍니다.

텍스트 박스는 text field와 text area의 두 가지 유형으로 분류됩니다. 이 두 입력 박스는 서로 다른 용도로 사용되며 사용자가 텍스트 상자에 뭘 입력해야 할지 알려줍니다.

text field는 이름, 번호, 짧은 텍스트와 같은 한 줄의 텍스트를 입력할 수 있는 작은 직사각형 상자입니다.

text area는 설명, 단락 등과 같은 여러 줄의 텍스트를 입력할 수 있는 더 큰 상자입니다.

모두 텍스트 입력을 다루지만 text field에서 Enter를 누르면 커서가 다음 필드로 이동하거나 양식을 제출하도록 할 수 있습니다.

반면에 text area에서 엔터키를 누르면 커서가 다음 줄로 이동하여 줄 바꿈이 생성됩니다.

Table of Contents

textfield 추가하기

사용자로 부터 무언가를 입력 받으려면 <input> 태그를 사용할 수 있습니다.

그런 다음 text field로 만들기 위해 type 속성을 text로 추가할 수 있습니다.

<form>
  <input type='text' />
</form>

이렇게 하면 모든 형태의 텍스트 값을 받을 수 있는 한 줄 텍스트 필드가 출력됩니다.

또한 사용자가 텍스트 필드에 입력할 내용을 알 수 있도록 <labal> 태그나 placeholder 속성과 같은 기타 속성을 추가할 수도 있습니다.

<form>
  <input type='text' placeholder='Enter your name...' />
</form>

Or

<form>
  <label>Name:</label> </br>
  <input type='text' />
</form>

필드가 허용하는 최대, 최소 텍스트의 양을 정의하도록 maxlength, minlength 속성을 추가할 수도 있습니다.

<form>
  <input type='text' maxlength="100" minlength="10" placeholder='Enter your name' />
</form>

또한 text field에 value 속성을 사용하여 기본 값을 전달할 수 있습니다.

<form>
  <input type='text' value='John Doe' placeholder='Enter your name...' />
</form>

여러 줄의 문자열을 입력해 댓글이나 리뷰를 쓸 수 있는 텍스트 영역은 <textarea> 태그로 추가할 수 있습니다.

text area의 크기는 cols와 rows 속성(또는 CSS)으로 지정할 수 있습니다.

<form>
  <textarea rows="5" cols="33"></textarea>
</form>

이는 기본 값을 설정하기 위해 value 속성을 사용하지 않습니다. 대신 여는 태그와 닫는 태그 사이에 기본 값을 배치합니다.

<form>
  <textarea rows="5" cols="33">
    This is the default comment...  
  </textarea>
</form>

<input> 태그와 마찬가지로 maxlength, minlenght, placeholder 속성을 사용할 수 있습니다.

<form>
  <textarea placeholder='Enter comment...' maxlength='1000' minlength='100'>
    This is the default comment...  
  </textarea>
</form>

이 포스트에서는 웹 페이지에서 표현하고자 하는 용도에 따라 <textarea> 및 <input> 태그를 사용하는 방법을 알아봤습니다.

textfield는 폼 양식 입력 시 이름, 번호 같은 한 줄의 텍스트를 입력하는 상자이고 엔터키를 누르면 다음 필드로 이동하거나 양식을 제출하도록 할 수 있습니다.

textarea는 댓글, 리뷰 등과 같은 여러 줄의 텍스트를 입력할 수 있는 더 큰 상자이고 엔터키를 누르면 커서가 다음 줄로 이동하여 줄 바꿈이 생성됩니다.