HTML의 <textarea> 요소에 적용되는 required 속성은 폼(form)을 제출하기 전에 해당 텍스트 영역을 반드시 작성해야 한다는 것을 방문자에게 알려주는 역할을 합니다. 만약 방문자가 required 속성이 설정된 textarea를 비워둔 상태에서 제출 버튼을 클릭하면, 브라우저는 경고 메시지를 표시하며 폼이 제출되지 않습니다.
required 속성 기본 문법
<textarea required>
required 속성은 별도의 값 없이 단독으로 작성하는 불리언(Boolean) 속성입니다. 이 속성이 추가된 textarea는 빈 값일 경우 폼 제출이 차단됩니다.
required 속성 예제
다음은 <textarea> 요소에 required 속성을 적용한 실제 구현 예제입니다.
코드
<!DOCTYPE html> <html> <body> <h2>Subject-wise rank</h2> <form action=""> <label for="stinfo">Student:</label> <input type="text" id ="stinfo"><br> <label for="sub">Subject:</label> <input type="text"><br> <label for="rank">Rank:</label> <input type="number"><br> <label for="marks">Marks:</label> <input type="number"><br> <label for="remark">Remarks</label><br> <textarea rows="6" cols="70" required></textarea><br> <input type="submit"> </form> </body> </html>
실행 결과
예제 코드 분석
위 예제에서는 여러 입력 필드와 제출 버튼으로 구성된 폼을 만들었습니다.
<form action=""> <label for="stinfo">Student:</label> <input type="text" id ="stinfo"><br> <label for="sub">Subject:</label> <input type="text"><br> <label for="rank">Rank:</label> <input type="number"><br> <label for="marks">Marks:</label> <input type="number"><br> <label for="remark">Remarks</label><br> <textarea rows="6" cols="70" required></textarea><br> <input type="submit"> </form>
여기서 핵심 부분은 다음 코드입니다. textarea에 required 속성을 설정했기 때문에, 해당 영역을 채우지 않고 폼을 제출하려고 하면 브라우저에 경고 메시지가 나타나며 폼 제출 자체가 차단됩니다.
<textarea rows="6" cols="70" required></textarea>
정리
- required 속성은 폼 제출 전 필수 입력을 강제하는 HTML5 유효성 검사 속성입니다.
- 값 없이 단독으로 사용하며,
<textarea required>형태로 작성합니다. - 필드가 비어 있으면 브라우저가 자동으로 경고를 표시하고 제출을 막아줍니다.
- 별도의 JavaScript 코드 없이 간편하게 필수 입력 검증을 구현할 수 있습니다.