'입력 양식(form)' 강의에서 아래와 같은 회원가입 양식을 구현하겠다고 말씀드렸습니다. 그 첫 번째 단계로 <input> 태그를 사용합니다.

<input> 태그는 입력 양식 태그 중에서도 가장 중요하고 많이 쓰이는 태그입니다. 주로 사용자에게 입력을 받기 위해 사용되며, 빈 태그이기 때문에 종료 태그를 사용하지 않습니다. <input> 태그에는 텍스트뿐만 아니라 제출 버튼, 파일 업로드, 날짜 등 매우 다양한 값이 입력될 수 있습니다.

<input> 태그에 type이라는 속성을 설정하여 어떤 값을 입력할 것인지 결정합니다. 아래 예제를 통해 다양한 <input> type의 조합을 직접 확인해봅시다.

일반 텍스트와 이메일 주소, 비밀번호 등 문자로 이루어진 값을 입력하거나,

버튼, 체크박스 등 형식을 입력 받을 뿐만 아니라,

그 외 다양한 값을 입력 받는 형식을 만듭니다.

<input>태그에는 type뿐만 아니라 name이라는 속성도 매우 중요하게 사용됩니다. 사용자가 서버로 데이터를 전송할 때, 입력 받은 데이터를 구분하기 위해 name 속성을 키(key)로, 입력 받은 데이터를 값(value)으로 전송합니다. 그때문에 이 name 속성은 전송하는 데이터를 구분하는데 매우 중요한 역할을 수행합니다.

다음 예시를 직접 작성 후 실행하여 주소 창을 확인해보시기 바랍니다.

추가로 placeholder라는 속성도 때에 따라 유용하게 사용하 수 있습니다. 바로 우리가 입력창에서 자주 보았던 '아이디를 입력하세요'와 같은 가이드 문구를 지정하는데 사용하는 속성입니다.

placeholder 속성을 사용하여 입력한 값은 입력 칸 안에 나타나며, 입력 칸을 클릭하여 값을 입력하면 해당 문구가 사라지는 것을 볼 수 있습니다. placeholder 속성과 비슷하지만 조금 다른 속성이 있습니다. 바로 value입니다. value는 말 그대로 값을 할당하는 속성이기 때문에 <input>에서 value에 값을 넣으면 그 값이 입력 칸 안에 나타나는 것은 placeholder와 동일하나, 입력 칸을 클릭하더라도 값이 남아 있는 것을 볼 수 있습니다. 따라서 value 속성을 사용한다면 값이 초기값으로 들어가게 되는 것이죠. 이를 조금만 응용해서 생각하면, 사용자가 입력 칸 안에 직접 'a'라는 값을 입력한 경우 value 속성 값이 'a'로 변경되는 것입니다.

자, 비밀번호 입력을 위한 입력 칸을 하나 더 만들어봅시다.

위 코드를 실행해보면 type="password"는 text와 다르게 입력 칸에 값을 입력하면 별표로 표시되어 노출되지 않음을 볼 수 있습니다.

여기까지 잘 진행했다면 잠시 숨을 고르고 무엇이 부족한지 고민해볼까요? 마지막으로 <input> 태그와 세트로 사용되는 <label> 태그에 대해 살펴보겠습니다. <label> 태그는 <input> 태그의 id 속성과 함께 입력 양식의 역할이 무엇인지 알려주는 이름표 역할을 수행합니다. <label> 태그에서 for 속성을 함께 사용한다면 for 속성의 값으로 <input> 태그의 id속성의 값을 입력합니다.

여기서 <label> 태그에 해당하는 이름표를 클릭하면 입력 칸이 활성화되는 것을 볼 수 있습니다.

좀 더 예쁜 입력 양식을 만들기 위해 한 가지 팁을 드리겠습니다. 바로 <div> 태그를 이용하는 겁니다.  아이디와 비밀번호는 서로 다른 입력 칸이기 때문에 <div>태그로 따로 감싸서 구분해봅시다.