# Form Components > Form patterns: login, signup, contact, search bar, multi-step wizard, and settings panel > 폼 패턴: 로그인, 회원가입, 문의, 검색바, 멀티스텝 마법사, 설정 패널 **Category**: Components | **Tags**: forms, login, signup, wizard, validation, tailwind | **Difficulty**: Beginner ## Preview ``` +----------+ +----------+ +----------+ | Login | | Signup | | Contact | | [email] | | [name] | | [name] | | [pass] | | [email] | | [email] | | [Submit] | | [pass] | | [msg] | +----------+ | [Submit] | | [Send] | +----------+ +----------+ +------- Multi-step Wizard --------+ | Step 1 > Step 2 > Step 3 | | [fields...] [Next ->] | +----------------------------------+ ``` ## Quick Start ```bash # 1. Copy the form you need from the code below # 2. Replace action URLs with your API endpoints # 3. All forms include built-in HTML5 validation (required, type, pattern) ``` ## Full Code ```html Form Components

Form Components

Welcome Back

Forgot password?
or continue with

Create Account

Contact Us

Search Bar

Ctrl K

Multi-Step Wizard

1
2
3

Settings Panel

Email Notifications

Receive updates about your account

Two-Factor Auth

Add extra security to your account

Dark Mode

Switch between light and dark themes

``` ## Customization Guide - **Form actions**: Replace `action="/api/..."` with your endpoint (Formspree, Netlify, custom) - **Validation**: Add `pattern`, `minlength`, `maxlength` attributes for client-side validation - **Social login**: Replace button text with SVG icons for Google, GitHub, Apple - **Wizard steps**: Add JS to show/hide step content and update step indicator colors - **Toggle switches**: The inline `onclick` handlers work standalone; replace with React/Vue state in frameworks - **Accessibility**: Add `aria-label`, `aria-required`, and proper `id`/`for` pairings for screen readers ## 2026 Trend Notes - Rounded input fields (`rounded-xl`) with subtle borders are the current standard - Social login divider ("or continue with") is expected UX for auth forms - Keyboard shortcut hint in search bar (`Ctrl+K`) follows the command palette pattern - Toggle switches with inline JS provide framework-agnostic interactivity - Multi-step wizards with numbered indicators reduce form abandonment