Form Snippets — Free HTML CSS JS Copy-Paste Form Components

Forms are where users take meaningful action — sign up, purchase, configure settings, upload files, and enter sensitive data. Poorly designed form components create friction, increase drop-off, and make products feel unpolished. Well-crafted form components reduce cognitive load, prevent errors, and build trust. This collection covers every form component a modern web product needs.

Every snippet is plain HTML, CSS, and vanilla JavaScript with no external dependencies. Each component demonstrates a real production technique that you can study, adapt, and ship immediately.

Floating Label Input achieves the animated label-to-placeholder transition with zero JavaScript. The CSS :placeholder-shown pseudo-class detects whether the input is empty. The ~ sibling combinator targets the label. When the field is empty, the label sits inside the input as placeholder text. When the user types, :placeholder-shown becomes false and a CSS transition floats the label up to the top edge. No JS event listener needed.

OTP / PIN Input auto-advances focus as each digit is entered, handles paste-to-fill (splitting a 6-digit code across all inputs at once), and handles backspace-to-previous navigation. This is the exact interaction pattern users expect from two-factor authentication flows.

Password Strength Meter runs four regex tests — minimum length (8+ chars), uppercase letter presence, digit presence, and symbol presence — and scores 0–4. The result is a coloured bar (red → orange → yellow → green) with a text label. Each rule check is a separate test so users get targeted feedback about which requirement they have not yet met.

Credit Card Input auto-formats the number as XXXX XXXX XXXX XXXX using a replace regex that inserts spaces every 4 digits. It detects the card type (Visa, Mastercard, Amex, Discover) from the first digit and updates a type indicator. The preview below the inputs shows the formatted number, cardholder name, and expiry in a card-face layout.

Multi-Step Form uses three step dots that transition between done (filled with checkmark), active (accent ring), and pending (grey) states. Navigation guards prevent advancing if the current step's required fields are empty. A progress label shows "Step 2 of 3." Each step's content panel shows and hides via display toggling.

File Dropzone handles drag-and-drop events (dragover, drop) and click-to-browse. Dropped files get name, size, and extension-based colour badge entries in a file list. A simple size formatter shows bytes as KB, MB, or GB. The dropzone border changes colour while a file is being dragged over it.

Tag Input lets users type a tag and press Enter or comma to add it to a list. Duplicate tags are rejected silently. The backspace key removes the last tag when the input is empty. Each tag has a × remove button. Tags render as chips in a wrapping flex row.

Segmented Control shows a sliding pill indicator that moves to the selected segment via CSS left and width transitions. moveIndicator() reads btn.offsetLeft and btn.offsetWidth at click time — actual pixel values — and sets the pill's position. Works for any label length.

Range Slider, Toggle Switch, Star Rating, Colour Picker, and Search Box complete the collection with the remaining essential form patterns, all with live preview and full export support.