웹사이트를 만들다 보면 사용자의 정보를 받아야 할 때가 반드시 옵니다. 회원가입, 로그인, 검색창, 댓글 등 모든 ‘입력’의 순간에 쓰이는 것이 바로 HTML Form(양식)입니다.
오늘은 이 태그들을 조합해서 ‘가장 기본적인 로그인 창’을 직접 코딩해 보겠습니다. 이 원리만 알면 검색창이나 회원가입 페이지도 식은 죽 먹기입니다.
1. 기본 골격: <form> 태그
모든 입력 요소는 <form>이라는 울타리 안에 있어야 서버로 전송될 수 있습니다.
<form action=”/login” method=”POST”>
<!– 여기에 입력창들이 들어갑니다 –>
</form>
- ✅ action: 입력받은 데이터를 어디로 보낼지(도착지 URL) 정합니다.
- ✅ method: 어떻게 보낼지 정합니다. (로그인처럼 보안이 중요하면 POST, 단순 검색은 GET을 씁니다.)
2. 핵심 부품: <input> 태그 유형별 정리
사용자에게 입력을 받는 태그입니다. type 속성에 무엇을 적느냐에 따라 모양과 기능이 완전히 달라집니다.
① 아이디 입력창 (type=”text”)
가장 기본적인 텍스트 상자입니다.
<input type="text" name="username" placeholder="아이디를 입력하세요">
② 비밀번호 입력창 (type=”password”)
입력한 내용이 점(●●●)으로 가려집니다. 보안 필수 요소입니다.
<input type="password" name="userpw" placeholder="비밀번호">
③ 제출 버튼 (type=”submit”)
이 버튼을 누르면 폼 안의 내용이 서버로 전송됩니다.
<input type="submit" value="로그인">
💡 코드캠의 실전 TIP: <label>을 꼭 쓰세요!
많은 초보자들이 <input>만 덩그러니 씁니다. 하지만 시각장애인용 스크린 리더나 사용 편의성을 위해 <label> 태그로 입력창에 이름을 붙여주는 것이 웹 표준입니다. 아래 완성 코드를 참고하세요.
3. [실습] 로그인 페이지 완성 코드
위의 내용들을 합쳐서 실제 작동하는 로그인 폼을 만들어 봅시다. 이 코드를 복사해서 .html 파일로 저장해 보세요.
<form action=”#” method=”POST”>
<!– 아이디 입력 –>
<label for=”userid”>아이디</label>
<input type=”text” id=”userid” name=”username” placeholder=”ID를 입력하세요” required>
<!– 비밀번호 입력 –>
<label for=”userpw”>비밀번호</label>
<input type=”password” id=”userpw” name=”password” placeholder=”비밀번호 8자리” required>
<!– 로그인 버튼 –>
<input type=”submit” value=”로그인 하기”>
</form>
📌 코드 포인트 해석
- placeholder: 입력창 안에 흐릿하게 보이는 도움말입니다.
- required: 이 속성을 넣으면 빈칸인 상태로 제출 버튼을 눌렀을 때 “입력란을 작성하세요”라는 경고창이 자동으로 뜹니다. (자바스크립트 없이도 가능!)
- for & id: 라벨의
for값과 인풋의id값을 일치시키면, 글자(라벨)만 클릭해도 입력창에 커서가 깜빡입니다.
오늘은 HTML로 웹사이트의 문을 달아보았습니다. <form>은 택배 상자고, <input>은 그 안에 담길 물건이라는 점만 기억하시면 됩니다.
하지만 지금 만든 로그인 창은 디자인이 없어서 조금 투박하죠? HTML은 뼈대일 뿐이니까요. 다음 단계는 CSS로 이 뼈대에 예쁜 옷을 입혀주는 것입니다.
