textarea 태그 - 바로 실행해보면서 배우는 HTML5/CSS3

<input type="text">라고만 설정했다면 문장을 길게 작성했을 때 줄 바꿈 없이 계속 한 줄로 이어 써지기 때문에 꽤 불편한 상황이 발생할 수 있습니다. <textarea> 태그는 이렇게 한 번에 많은 양의 글을 입력 받을 때 사용합니다. 바로 코드에 적용해봅시다.

<h3>회원가입</h3>
<form action="my-app" method="get">
	<div>
		<label for="userid">아이디: </label>
		<input type="text" id="userid" name="id" placeholder="아이디를 입력하세요.">
	</div>
	<div>
		<label for="password">비밀번호: </label>
		<input type="password" id="password" name="password" placeholder="비밀번호를 입력하세요.">
	</div>
	<div>
		<label for="gender">성별: </label>
		<select name="gender" id="gender">
			<option value="male">남성</option>
			<option value="female">여성</option>
		</select>
	</div>
	<div>
		<label for="job">직업: </label>
		<select name="job" id="job">
			<option value="student">학생</option>
			<option value="teacher">선생님</option>
			<option value="etc">기타</option>
		</select>
	</div>
	<div>
		<label for="introduce">자기소개: </label>
		<textarea name="introduce" id="introduce" placeholder="자기소개를 입력하세요" cols="20" rows="6"></textarea>
	</div>
</form>

<textarea> 태그는 rows, cols 속성과 사용할 수 있는데, 값으로 숫자를 넣으면 <textarea>의 크기를 조정할 수 있습니다. 정확히 말하자면 cols는 글자 수 만큼, rows는 글 줄 수 만큼 조정됩니다.

<textarea> 태그는 빈 요소가 아니기 때문에 종료 태그가 존재합니다. 만약 요소 안에 내용을 작성한다면 value속성과 동일하게 사라지지 않는 값으로 처리되는 것을 기억해두시기 바랍니다.

Practice

이론에서 살펴본 코드를 직접 작성하여 결과를 확인한 뒤, 구성 요소를 변경하며 어떤 변화가 일어나는지 확인해봅시다.

learn

Practice

Q & A

Q&A forum that anyone can ask and answer.
Share your questions and answers with other students and grow together!

Registered Questions(0)