32 JavaScript Input Text

About a code

Clear Input Field

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

About a code

Password Field

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

About a code

Color Changing Cursor in TextArea

Changing the color of an input cursor as it reaches the max length attr of a textarea.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: tailwind.css

About a code

Form Focus

Concept for narrowing focus when completing a form.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Neumorphic Show/Hide Password Input Field

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

CYBERTYPE

A hyper reactive typer.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Input Type Password

Animate SVG paths with CSS transitions. Use grid properties to lay the elements of a form.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Email Validation Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Password Generator

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: snap.svg.js

About a code

Password Validate Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Password Input Light

Let the light reveal your password! A silly experiment using a show/hide toggle on a password input.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Password Strength Validator UI

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css, bootstrap.js

About a code

Birthday Input with Zodiac

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Image Password Strength

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: tailwind.css

About a code

Animated Input Labels

After creating Input Racetrack, my mind started chugging with other ideas for animating input labels. So here are a few new creations with GSAP and Splitting!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: tweenmax.js, splitting.js

About a code

Droppy Woppy Input

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: three.js, cannon.js, tweenmax.js

About a code

Floaty Labels

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Bump Name

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: bezier-easing.js

About a code

Talking Ghost Chat Input

A little concept of a ghost reading your input text and "hiding" when you are typing out your message.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Material Design Like Form Input Text Fields

This example demonstrates how to create Material Design like form input text fields.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap-reboot.css, bootstrap-grid.css

About a code

Show/Hide Password

David Khourshid and Stephen Shaw rapid-fire build several text animations with Splitting.js and CSS!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: splitting.css, splitting-cells.css, splitting.js

About a code

Push to Hide

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Autocomplete

Demonstration of a fully accessible autocomplete/search component in vanilla JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: fuse.js

About a code

Tags Input

Tags input in JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Input

Input with Snap.svg & validation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: snap.svg.js

About a code

Text Mask

Text Mask is an input mask library. It can create input masks for phone, date, currency, zip code, percentage, email, and literally anything.

About a code

Animated UI Text Input

Expanding text input in JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Pixie Dust Input

Type to have the input generate pixie dust.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Dynamic 3D Confetti Text

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: three.js

About a code

Autosize Input

Effortless, dynamic-width text boxes in vanilla JavaScript.

About a code

Fancy Input Field

Trying to make input field that is a bit more fancy than the regular boring box.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -