본문으로 건너뛰기

<input> 입력 태그 심화

input 입력 태그 심화

<form>과 함께 사용하는 <input />

input 태그는 대부분 <form>(양식폼) 태그와 함께 사용합니다.

예를 들어 회원가입 화면에서 input 태그로 사용자에게 데이터를 입력을 받고, <form> 태그로 입력 받은 데이터를 서버에 전송합니다.

form 태그 활용 예시
<form action="/submit" method="post">
<input type="text" name="username" placeholder="사용자 이름" />
<input type="password" name="password" placeholder="비밀번호" />
<input type="submit" value="제출" />
</form>

입력폼에 대한 더 자세한 내용은 다음 수업에서 다루도록 하겠습니다.


label 태그 활용

label 태그는 input 입력란의 설명이나 제목을 나타냅니다.

label 태그를 사용할 때는 input 태그의 id 속성과 label 태그의 for 속성을 같은 값으로 지정해야 합니다.

label 태그 예시
<label for="username">사용자 이름:</label>

<input type="text" id="username" name="username" />

유효성 검사 (Validation)

유효성 검사는 입력된 정보가 올바른지 확인하는 것을 뜻합니다.

아래 input은 required 속성을 사용해 input이 값을 갖고 있는지 유효성을 검사합니다.

required 활용 유효성 검사
<input type="email" name="useremail" required />