HTML <textarea> 태그는 사용자가 폼 내에서 자유 텍스트를 입력하고 제출할 수 있도록 합니다. 이 랩에서는 <textarea> 입력을 포함하는 간단한 HTML 폼을 생성하고 일반적으로 사용되는 몇 가지 속성을 적용해 보겠습니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
index.html이라는 이름의 빈 HTML 파일을 생성하고 기본 HTML5 보일러플레이트 코드를 입력합니다.
<!doctype html>
<html>
<head>
<title>HTML Textarea Tag Tutorial</title>
</head>
<body>
<!-- Your HTML code here -->
</body>
</html>HTML body 에 <form> 요소를 추가합니다. 이 폼을 사용하여 사용자로부터 정보를 수집할 것입니다.
<form>
<!-- Form elements go here -->
</form><form> 요소 안에 <textarea> 요소를 추가합니다. rows 및 cols 속성을 설정하여 텍스트 영역의 크기를 사용자 정의할 수 있습니다.
<form>
<label for="feedback">Enter your feedback:</label>
<textarea id="feedback" name="feedback" rows="10" cols="50"></textarea>
</form>여기서는 입력 필드 (feedback) 를 설명하는 레이블과 "feedback"의 id 속성을 가진 textarea 입력을 추가했습니다. name 속성은 서버 측에서 입력 필드를 식별하는 데 사용됩니다.
폼 및 입력 요소에 다른 HTML 속성을 추가할 수 있습니다. 예를 들어, 사용자가 텍스트를 입력하도록 보장하기 위해 required 속성을 추가할 수 있습니다.
<form>
<label for="feedback">Enter your feedback:</label>
<textarea
id="feedback"
name="feedback"
rows="10"
cols="50"
required
></textarea>
<input type="submit" value="Submit Feedback" />
</form>여기서는 사용자가 피드백을 제출할 수 있도록 type이 submit인 input 요소를 추가했습니다. 이제 textarea에 required 속성이 추가되었으므로 사용자는 빈 폼을 제출할 수 없습니다.
마지막으로, 폼과 입력 요소에 몇 가지 CSS 스타일을 적용하여 폼을 시각적으로 더 매력적으로 만들 수 있습니다.
<style>
form {
border: 1px solid #ccc;
padding: 10px;
margin: 20px auto;
max-width: 500px;
}
label,
textarea,
input[type="submit"] {
display: block;
margin-bottom: 10px;
width: 100%;
}
</style>여기서는 테두리를 설정하고, 패딩과 마진을 추가했으며, 폼의 최대 너비를 제한했습니다. 또한 레이블, 텍스트 영역 및 제출 입력 요소의 표시 및 너비를 조정했습니다.
이 랩에서는 <textarea> 입력을 사용하여 기본적인 HTML 폼을 만들고 일반적으로 사용되는 속성을 적용하는 방법을 배웠습니다. 또한 폼 요소의 모양을 사용자 정의하기 위해 몇 가지 CSS 스타일을 적용했습니다. 요구 사항에 따라 폼 및 입력 요소를 추가로 사용자 정의할 수 있습니다.
