Cách tạo form đăng ký (signup form) với HTML và CSS

Giới thiệu

Signup form (form đăng ký) khác với register form ở chỗ thường đơn giản hơn, tập trung vào onboarding nhanh. Thường có: Email, Password, Confirm Password, Checkbox "Nhớ tôi", nút Sign Up + Cancel.

Ví dụ hoàn chỉnh - Signup Form hiện đại

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sign Up Form</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * { box-sizing: border-box; }
    body { font-family: 'Segoe UI', system-ui, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
    .signup-card {
      width: 100%;
      max-width: 420px;
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 25px 50px rgba(0,0,0,0.15);
      padding: 48px;
      position: relative;
    }
    .signup-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
      border-radius: 20px 20px 0 0;
    }
    .form-header { text-align: center; margin-bottom: 32px; }
    .form-header h1 { margin: 0 0 8px; font-size: 28px; color: #1a1a1a; }
    .form-header p { margin: 0; color: #666; font-size: 15px; }
    .form-group { margin-bottom: 22px; position: relative; }
    label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px; color: #333; }
    .input-wrapper { position: relative; }
    input[type="email"], input[type="password"], input[type="text"] {
      width: 100%;
      padding: 14px 16px 14px 48px;
      font-size: 16px;
      border: 1.5px solid #e0e0e0;
      border-radius: 12px;
      background: #fafafa;
      transition: all 0.2s;
    }
    input:focus { outline: none; border-color: #667eea; background: #fff; box-shadow: 0 0 0 4px rgba(102,126,234,0.1); }
    .input-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #aaa; font-size: 18px; pointer-events: none; transition: color 0.2s; }
    .input-wrapper:focus-within .input-icon { color: #667eea; }
    .toggle-pwd { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #888; cursor: pointer; padding: 4px; font-size: 16px; }
    .toggle-pwd:hover { color: #333; }
    .checkbox-group { display: flex; align-items: center; gap: 10px; margin: 8px 0 24px; }
    .checkbox-group input { width: 18px; height: 18px; accent-color: #667eea; }
    .checkbox-group label { margin: 0; font-size: 13px; color: #555; cursor: pointer; }
    .checkbox-group a { color: #667eea; text-decoration: none; font-weight: 500; }
    .checkbox-group a:hover { text-decoration: underline; }
    .btn-group { display: flex; gap: 12px; margin-top: 8px; }
    .btn { flex: 1; padding: 14px; font-size: 15px; font-weight: 600; border: none; border-radius: 10px; cursor: pointer; transition: all 0.2s; }
    .btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; }
    .btn-primary:hover { box-shadow: 0 6px 20px rgba(102,126,234,0.4); }
    .btn-cancel { background: #fff; color: #667eea; border: 1.5px solid #e0e0e0; }
    .btn-cancel:hover { background: #f5f5f5; border-color: #667eea; }
    .btn:active { transform: scale(0.98); }
    .divider { display: flex; align-items: center; gap: 16px; margin: 24px 0; color: #999; font-size: 13px; }
    .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #e0e0e0; }
    .social-signup { display: flex; gap: 12px; }
    .social-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; font-size: 14px; font-weight: 600; border: 1.5px solid #e0e0e0; border-radius: 10px; background: #fff; color: #333; cursor: pointer; transition: all 0.2s; }
    .social-btn:hover { background: #f8f9fa; }
    .social-btn.google i { background: linear-gradient(45deg, #ea4335, #fbbc05, #34a853, #4285f4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .social-btn.github i { color: #24292e; }
    @media (max-width: 480px) { .signup-card { padding: 32px 24px; } .btn-group { flex-direction: column; } }
  </style>
</head>
<body>
  <div class="signup-card">
    <div class="form-header">
      <h1>Tạo tài khoản</h1>
      <p>Bắt đầu miễn phí trong 30 giây</p>
    </div>
    <form id="signupForm" novalidate>
      <div class="form-group">
        <label for="email">Email</label>
        <div class="input-wrapper">
          <input type="email" id="email" name="email" placeholder="you@example.com" required autocomplete="email">
          <i class="fas fa-envelope input-icon" aria-hidden="true"></i>
        </div>
      </div>
      <div class="form-group">
        <label for="password">Mật khẩu</label>
        <div class="input-wrapper">
          <input type="password" id="password" name="password" placeholder="Tối thiểu 8 ký tự" required autocomplete="new-password" minlength="8">
          <i class="fas fa-lock input-icon" aria-hidden="true"></i>
          <button type="button" class="toggle-pwd" aria-label="Hiện/ẩn mật khẩu"><i class="fas fa-eye"></i></button>
        </div>
      </div>
      <div class="form-group">
        <label for="confirmPassword">Xác nhận mật khẩu</label>
        <div class="input-wrapper">
          <input type="password" id="confirmPassword" name="confirmPassword" placeholder="Nhập lại mật khẩu" required autocomplete="new-password">
          <i class="fas fa-lock input-icon" aria-hidden="true"></i>
          <button type="button" class="toggle-pwd" aria-label="Hiện/ẩn mật khẩu"><i class="fas fa-eye"></i></button>
        </div>
      </div>
      <div class="checkbox-group">
        <input type="checkbox" id="terms" name="terms" required>
        <label for="terms">Tôi đồng ý <a href="#">Điều khoản</a> và <a href="#">Chính sách bảo mật</a></label>
      </div>
      <div class="btn-group">
        <button type="button" class="btn btn-cancel">Hủy</button>
        <button type="submit" class="btn btn-primary">Đăng ký</button>
      </div>
    </form>
    <div class="divider">HOẶC</div>
    <div class="social-signup">
      <button type="button" class="social-btn google"><i class="fab fa-google"></i> Google</button>
      <button type="button" class="social-btn github"><i class="fab fa-github"></i> GitHub</button>
    </div>
  </div>
  <script>
    document.querySelectorAll('.toggle-pwd').forEach(btn => {
      btn.addEventListener('click', () => {
        const input = btn.closest('.input-wrapper').querySelector('input');
        const icon = btn.querySelector('i');
        input.type = input.type === 'password' ? 'text' : 'password';
        icon.className = input.type === 'password' ? 'fas fa-eye' : 'fas fa-eye-slash';
      });
    });
    document.getElementById('signupForm').addEventListener('submit', (e) => {
      e.preventDefault();
      const pwd = document.getElementById('password').value;
      const confirm = document.getElementById('confirmPassword').value;
      if (pwd !== confirm) { alert('Mật khẩu không khớp!'); return; }
      alert('Đăng ký thành công! (Demo)');
    });
  </script>
</body>
</html>

Khác biệt Signup vs Register vs Login

Best Practices Signup Form

• Single column: Luôn 1 cột, dễ scan.
• Inline validation: Xanh khi valid, đỏ khi invalid (trên blur).
• Password requirements hiển thị trước: Không chỉ báo lỗi sau.
• Social login prominent: Google/GitHub giảm 50% drop-off.
• Cancel button: Cho phép thoát dễ dàng (trên modal).