HTML Textarea:단계별 가이드

HTML textarea 태그는 양식에 여러 줄로 된 텍스트 입력 필드를 만드는 데 사용됩니다. <textarea>로 정의됩니다. 태그를 지정하고 문자를 무제한으로 저장할 수 있습니다.

HTML로 양식을 만들 때 긴 텍스트 문자열을 허용할지 결정할 수 있습니다. 예를 들어 소매업체 웹사이트에 대한 고객 문의 양식을 작성하는 경우 고객이 직면한 문제에 대한 자세한 설명을 수락하는 양식 요소를 만들 수 있습니다.

HTML <textarea> 태그가 들어옵니다. <textarea> 요소는 여러 줄 텍스트 편집 기능을 제공하는 양식 요소를 만드는 데 사용됩니다. 이 요소는 사용자로부터 더 긴 텍스트 응답을 수락하려는 경우에 유용합니다.

이 자습서에서는 몇 가지 예를 들어 HTML <textarea>를 사용하는 방법에 대해 설명합니다. 코드에 태그를 추가합니다. 이 튜토리얼을 마치면 <textarea>를 사용하는 데 필요한 모든 지식을 갖추게 될 것입니다. 전문가처럼 태그하세요!

HTML 텍스트 영역 태그

<textarea> 태그는 양식에서 여러 줄 텍스트 입력 제어 필드를 정의하는 데 사용됩니다. <textarea> 태그는 무제한의 문자를 담을 수 있습니다.

<textarea> 구문 태그는 다음과 같습니다.

<textarea rows="10" cols="10">
Placeholder contents
</textarea>

코드를 분해해 보겠습니다. <textarea> 태그는 웹 양식에서 텍스트 영역 상자를 정의하는 데 사용됩니다. <input>과 달리 태그, <textarea> 태그에는 여는 부분(<textarea>)이 모두 있어야 합니다. ) 및 닫는 태그(</textarea> ). 텍스트 영역이 표시할 기본 텍스트가 두 태그 사이에 포함되어 있기 때문입니다.

이 예에서는 두 가지 속성도 지정했습니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

• 행 기본적으로 텍스트 영역에 있어야 하는 행 수에 대해 브라우저에 지시합니다. 즉, rows 속성은 텍스트 영역의 높이를 지정합니다.
• 열 텍스트 영역이 기본적으로 가져야 하는 열의 수입니다. 즉, cols 속성은 텍스트 영역의 너비를 지정합니다.

지역 의류 매장을 위한 웹 양식을 구축한다고 가정해 보겠습니다. 이 양식은 고객이 구매에 대한 피드백을 제공할 수 있도록 해야 합니다. 사용자에게 자세한 피드백을 제출할 수 있는 공간을 제공하기 위해 <textarea>를 사용할 것입니다. 사용자의 피드백을 수집하는 HTML 요소입니다.

다음 코드를 사용하여 피드백 양식을 만들 수 있습니다.

<form>
	<label for="feedback">What feedback do you have for us?</label><br /><br />
	<textarea rows="5" cols="30" id="feedback" name="feedback">
	Your feedback goes here.
	</textarea>
</form>

코드 반환:

코드를 분해해 보겠습니다. 먼저 <form>을 선언했습니다. 웹 양식을 정의하는 데 사용되는 태그입니다. 그런 다음 <label>를 사용했습니다. 태그를 사용하여 사용자에게 What feedback do you have for us?를 묻는 페이지에 레이블을 추가합니다.

그런 다음 <textarea>를 사용했습니다. 태그를 사용하여 피드백 양식을 만듭니다. 다음과 같은 네 가지 속성을 지정했습니다.

• rows는 5로 설정되고 필드에 있어야 하는 행 수를 저장합니다.
• cols는 30으로 설정되고 필드에 있어야 하는 열 수를 저장합니다.
• id는 양식에 할당된 고유 식별자로, 양식을 제출할 때 사용됩니다.
• 이름은 양식을 식별하는 데도 사용되며 양식을 웹 서버에 제출하려는 경우 필요합니다.

<textarea> 태그는 모든 주요 브라우저에서 지원됩니다.

위의 예는 <textarea>의 기본 구현입니다. 태그를 사용하지만 양식을 더 발전시킬 수 있습니다.

HTML 텍스트 영역 예제

<textarea>를 사용하는 방법을 설명하기 위해 두 가지 고급 예제를 더 살펴보겠습니다. 태그를 사용하여 텍스트 영역을 만듭니다.

최소 및 최대 길이

옷가게의 예로 돌아가 보겠습니다. 사용자가 피드백을 작성할 때 간결하게 작성하도록 장려하기 위해 사용자가 제출하는 문자 수를 1000자로 제한하고 싶다고 가정합니다. 또한 사용자가 양식에 내용을 작성할 수 있도록 최소 글자수 제한을 10자로 설정하려고 합니다.

이것이 minlength 및 maxlength 속성이 필요한 곳입니다. minlength는 사용자가 작성해야 하는 최소 문자 수를 지정하는 데 사용되며 maxlength는 사용자가 양식에 작성할 수 있는 최대 문자 수를 지정하는 데 사용됩니다.

다음은 minlength 및 maxlength 속성이 설정된 이전 웹 양식의 예입니다.

<form>
	<textarea rows="5" cols="30" id="feedback" name="feedback" minlength="10" maxlength="1000">
	Your feedback goes here.
	</textarea>
</form>

양식 반환:

양식에 눈에 띄는 변경 사항은 없지만 양식을 제출하려고 하면 사용자가 1000자 이상을 작성한 경우 양식 내용이 유효하지 않은 것으로 간주됩니다.

사용자가 양식에 10자 미만을 작성하더라도 텍스트 영역은 여전히 ​​유효한 것으로 간주됩니다. 최소 제한을 적용하려면 required를 지정해야 합니다. 속성.

자리 표시자 텍스트

위의 웹 양식에서 양식 내부에 기본 텍스트를 지정합니다. 이 텍스트는 Your feedback goes here.라고 명시되어 있습니다. 이것은 유용한 정보이지만 사용자가 양식 응답에서 기본 텍스트를 원하지 않으면 수동으로 삭제해야 합니다.

자리 표시자 값을 지정하려면 placeholder를 사용할 수 있습니다. 기인하다. 이 속성은 양식이 비어 있을 때 표시되는 자리 표시자 값을 나타냅니다. 사용자가 상자에 입력을 시작하자마자 자리 표시자가 사라집니다.

다음은 <textarea>의 예입니다. Your feedback goes here. :

<textarea placeholder="Your feedback goes here." rows="5" cols="30">
</textarea>

코드 반환:

보시다시피 Your feedback goes here. 텍스트 상자에 나타납니다. 그러나 사용자가 입력을 시작하면 이 텍스트가 사라집니다. 이 텍스트는 밝은 회색이기 때문에 자리 표시자임을 알고 있습니다. 반면 이 기사의 첫 번째 예에서 지정한 기본 텍스트는 완전히 검은색 텍스트로 표시됩니다(달리 지정하지 않는 한).

HTML 텍스트 영역 속성

<textarea> 태그는 여러 태그별 속성을 허용합니다. 또한 <textarea> 태그는 HTML의 모든 전역 속성을 지원합니다.

다음은 <textarea>에서 지원하는 태그별 속성입니다. 태그:

결론

HTML <textarea> 태그는 여러 줄 텍스트 입력 요소를 만드는 데 사용됩니다. 사용자로부터 더 긴 데이터 문자열을 수집하려는 경우 유용할 수 있습니다.

이 자습서에서는 예제를 참조하여 <textarea>를 사용하는 방법에 대해 설명했습니다. 태그를 사용하여 텍스트 영역을 만듭니다. 이 자습서에서는 <textarea>에서 제공하는 태그별 속성이 포함된 참조 테이블도 제공했습니다. 꼬리표. 이제 <textarea>를 사용할 준비가 되었습니다. HTML 전문가처럼 태그하세요!