HTML 폼(form)과 input 태그 사용법 – 로그인 화면 만들기

HTML 폼(form)과 input 태그 사용법 – 로그인 화면 만들기

지난 글에서는 HTML 표를 만들고 colspan과 rowspan으로 셀을 병합하는 방법을 알아보았습니다. 지금까지 배운 태그들이 정보를 “보여주는” 역할이었다면, 이번에 배울 폼(form)은 사용자에게 정보를 “입력받는” 역할을 합니다. 우리가 매일 사용하는 로그인 화면, 회원가입 페이지, 검색창, 설문조사, 댓글 입력란이 모두 폼으로 만들어져 있습니다. 오늘은 폼의 기본 구조와 다양한 input 태그를 알아보고, 마지막에는 직접 로그인 화면을 완성해 보겠습니다.

1. 폼(form)이란 무엇인가요?

폼은 사용자가 입력한 데이터를 한데 모아 서버로 보내는 입력 양식입니다. 은행 창구에서 작성하는 신청서를 떠올리면 이해가 쉽습니다. 신청서라는 종이가 <form> 태그이고, 이름·연락처를 적는 각각의 빈칸이 <input> 태그, 다 작성한 뒤 창구에 제출하는 행동이 전송 버튼에 해당합니다.

<form action="/login" method="post">
  <!-- 여기에 입력 요소들이 들어갑니다 -->
</form>

form 태그에는 두 가지 중요한 속성이 있습니다.

• action : 입력한 데이터를 보낼 주소입니다. 실제 서비스에서는 서버의 처리 페이지 주소를 적습니다.
• method : 데이터를 보내는 방식입니다. get은 주소창에 데이터가 보이는 방식으로 검색창에 주로 쓰이고, post는 데이터가 주소창에 드러나지 않아 로그인이나 회원가입처럼 민감한 정보를 보낼 때 사용합니다.

HTML만으로는 데이터를 실제로 저장하거나 로그인을 처리할 수 없고, 이 부분은 서버 프로그래밍의 영역입니다. 하지만 입력 화면을 만드는 것은 HTML의 역할이므로, 오늘은 화면을 완성하는 데 집중하겠습니다.

2. input 태그의 기본 사용법

<input>은 폼에서 가장 많이 쓰이는 태그로, type 속성에 따라 전혀 다른 입력창으로 바뀌는 것이 특징입니다. 닫는 태그 없이 단독으로 사용합니다.

<input type="text" name="username" placeholder="아이디를 입력하세요">

• type : 입력창의 종류를 정합니다.
• name : 서버로 데이터를 보낼 때 붙는 이름표입니다. 이 값이 없으면 입력한 내용이 전송되지 않으니 꼭 넣어야 합니다.
• placeholder : 입력창이 비어 있을 때 흐리게 보이는 안내 문구입니다.
• value : 입력창에 미리 채워 둘 기본값입니다.

3. 자주 쓰는 input type 정리

input의 type은 종류가 매우 많지만, 실무에서 자주 쓰는 것들만 알아도 대부분의 입력 화면을 만들 수 있습니다.

특히 email 타입은 @가 빠진 주소를 입력하면 브라우저가 자동으로 오류 메시지를 띄워 주고, 스마트폰에서는 @ 키가 있는 키보드가 나타납니다. 알맞은 type을 고르는 것만으로도 사용자 편의성이 크게 좋아집니다.

4. 체크박스와 라디오 버튼 사용법

체크박스와 라디오 버튼은 비슷해 보이지만 결정적인 차이가 있습니다. 체크박스는 여러 개를 동시에 선택할 수 있고, 라디오 버튼은 같은 name을 가진 것들 중 하나만 선택됩니다. 그래서 라디오 버튼은 반드시 묶고 싶은 항목끼리 name을 똑같이 맞춰야 합니다.

<p>관심 분야 (여러 개 선택 가능)</p>
<input type="checkbox" name="hobby" value="html"> HTML
<input type="checkbox" name="hobby" value="css"> CSS
<input type="checkbox" name="hobby" value="js"> 자바스크립트

<p>학습 수준 (하나만 선택)</p>
<input type="radio" name="level" value="beginner"> 입문
<input type="radio" name="level" value="middle"> 중급
<input type="radio" name="level" value="expert"> 고급

위 예시에서 직접 클릭해 보면 차이를 바로 느낄 수 있습니다. 라디오 버튼은 다른 항목을 누르면 기존 선택이 자동으로 해제됩니다.

5. label 태그로 사용성 높이기

입력창 옆의 설명 글자는 <label> 태그로 작성하는 것이 좋습니다. label의 for 속성과 input의 id 속성을 같은 값으로 연결하면, 글자를 클릭해도 입력창이 선택됩니다. 작은 체크박스를 정확히 누르기 어려운 모바일 환경에서 특히 편리하고, 화면 낭독기가 입력창의 의미를 읽어 줄 수 있어 웹 접근성 측면에서도 중요합니다.

<label for="agree">이용약관에 동의합니다</label>
<input type="checkbox" id="agree" name="agree">

6. input 외에 알아두면 좋은 폼 태그

① textarea – 여러 줄 입력
input의 text 타입은 한 줄만 입력할 수 있습니다. 문의 내용이나 댓글처럼 긴 글을 받을 때는 <textarea>를 사용하며, rows로 높이를 정할 수 있습니다.

<textarea name="message" rows="5" placeholder="문의 내용을 입력하세요"></textarea>

② select – 드롭다운 목록
선택지가 많을 때는 화면을 차지하지 않는 드롭다운 목록이 편리합니다. <select> 안에 <option>으로 항목을 나열합니다.

<select name="region">
  <option value="">지역을 선택하세요</option>
  <option value="seoul">서울</option>
  <option value="busan">부산</option>
  <option value="jeonbuk">전북</option>
</select>

③ button – 버튼
<button type="submit">은 <input type="submit">과 같은 역할을 하지만, 버튼 안에 아이콘이나 다른 태그를 넣을 수 있어 요즘은 button 태그를 더 많이 사용합니다.

7. 입력값 검사 속성 활용하기

HTML에는 자바스크립트 없이도 입력값을 간단히 검사하는 속성들이 있습니다. 잘못된 값이 그대로 전송되는 것을 막아 주므로 적극적으로 활용해 보세요.

• required : 반드시 입력해야 하는 필수 항목으로 지정합니다. 비워 두고 전송하면 경고가 나타납니다.
• minlength / maxlength : 입력할 수 있는 최소·최대 글자 수를 정합니다. 비밀번호를 8자 이상으로 제한할 때 유용합니다.
• min / max : number나 date 타입에서 입력 가능한 범위를 정합니다.
• autofocus : 페이지가 열리자마자 해당 입력창에 커서가 위치합니다.

단, HTML의 입력값 검사는 사용자 편의를 위한 기능일 뿐 보안 장치는 아닙니다. 실제 서비스에서는 서버에서도 반드시 한 번 더 검사해야 한다는 점을 기억해 두세요.

8. 실습: 로그인 화면 완성하기

이제 지금까지 배운 내용을 모두 모아 로그인 화면을 만들어 보겠습니다. 아이디·비밀번호 입력창, 로그인 상태 유지 체크박스, 로그인 버튼으로 구성하고, CSS를 조금 더해 실제 서비스처럼 보이도록 꾸몄습니다. 아래 코드를 login.html로 저장해 브라우저에서 열어보세요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>로그인</title>
  <style>
    body {
      background: #f2f4f7;
      font-family: sans-serif;
    }
    .login-box {
      width: 320px;
      margin: 80px auto;
      padding: 30px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .login-box h1 {
      text-align: center;
      font-size: 24px;
    }
    .login-box label {
      display: block;
      margin-top: 14px;
      font-size: 14px;
    }
    .login-box input[type="text"],
    .login-box input[type="password"] {
      width: 100%;
      padding: 10px;
      margin-top: 6px;
      border: 1px solid #ccc;
      border-radius: 6px;
      box-sizing: border-box;
    }
    .login-box button {
      width: 100%;
      margin-top: 20px;
      padding: 12px;
      background: #e44d26;
      color: #fff;
      border: none;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="login-box">
    <h1>로그인</h1>
    <form action="/login" method="post">
      <label for="userid">아이디</label>
      <input type="text" id="userid" name="userid"
             placeholder="아이디를 입력하세요" required autofocus>

      <label for="userpw">비밀번호</label>
      <input type="password" id="userpw" name="userpw"
             placeholder="8자 이상 입력하세요" minlength="8" required>

      <label>
        <input type="checkbox" name="remember"> 로그인 상태 유지
      </label>

      <button type="submit">로그인</button>
    </form>
  </div>
</body>
</html>

완성된 화면은 대략 아래와 같은 모습입니다.

아이디나 비밀번호를 비워 둔 채 로그인 버튼을 누르면 “이 입력란을 작성하세요”라는 안내가 나타나고, 비밀번호를 8자 미만으로 입력해도 경고가 뜨는 것을 확인할 수 있습니다. 이것이 앞에서 배운 required와 minlength 속성의 효과입니다. 실제 로그인 처리는 서버가 필요하기 때문에 버튼을 눌러도 다른 페이지로 넘어가지는 않지만, 화면 자체는 실제 서비스와 거의 같은 구조로 완성되었습니다.

9. 폼을 만들 때 자주 하는 실수

• name 속성 누락 : 화면에서는 정상적으로 보여도 name이 없으면 데이터가 전송되지 않습니다. 모든 입력 요소에 name을 꼭 넣어 주세요.
• 라디오 버튼이 여러 개 선택됨 : 묶어야 할 라디오 버튼의 name이 서로 다르게 작성된 경우입니다. 같은 그룹은 name을 통일하세요.
• label 클릭이 안 됨 : label의 for 값과 input의 id 값이 정확히 일치하는지 확인하세요. 대소문자도 구분합니다.
• 비밀번호를 get 방식으로 전송 : get 방식은 주소창에 입력값이 그대로 노출됩니다. 로그인처럼 민감한 정보는 반드시 post 방식을 사용하세요.

마무리하며

오늘은 사용자에게 정보를 입력받는 폼의 기본 구조부터 다양한 input 타입, 체크박스와 라디오 버튼의 차이, label과 textarea·select 같은 보조 태그, 그리고 입력값 검사 속성까지 살펴본 뒤 실제 로그인 화면을 완성해 보았습니다. 폼은 웹사이트와 사용자가 소통하는 창구인 만큼, 어떤 정보를 어떤 방식으로 입력받을지 고민하는 습관을 들이면 훨씬 사용하기 편한 페이지를 만들 수 있습니다. 실습으로 오늘 만든 로그인 화면을 응용해 이메일, 생년월일, 관심 분야, 약관 동의가 포함된 회원가입 화면도 직접 만들어 보세요. 다음 글에서는 웹페이지의 구조를 의미 있게 나누는 HTML 시맨틱 태그에 대해 알아보겠습니다. 궁금한 점은 댓글로 남겨 주세요!