Collection of free vanilla JavaScript input type text code examples: placeholders, float labels, etc. Update of December 2019 collection. 16 new items.

Related Articles

  1. CSS Input Text
  2. jQuery Input Text
  3. React Input Text
  4. Vue Input Text


Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS) / JS

About a code

Clear Input Field

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

Responsive: yes

Dependencies: gsap.js

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS) / JS

About a code

Password Field

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

Responsive: yes

Dependencies: gsap.js

Author

  • Timothy Carambat

Made with

  • HTML / CSS / 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

Author

  • Chris Smith

Made with

  • HTML / CSS (SCSS) / JS

About a code

Form Focus

Concept for narrowing focus when completing a form.

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

Responsive: no

Dependencies: -

Author

  • mayur punjabi

Made with

  • HTML / CSS / JS

About a code

Neumorphic Show/Hide Password Input Field

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

Responsive: yes

Dependencies: -

Author

  • Manan Tank

Made with

  • CSS / JS

About a code

CYBERTYPE

A hyper reactive typer.

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

Responsive: yes

Dependencies: -

Author

  • Gabriele Corti

Made with

  • HTML / CSS / JS

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: -

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS) / JS

About a code

Email Validation Animation

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

Responsive: yes

Dependencies: -

Author

  • Vast Rideside

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Password Generator

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

Responsive: yes

Dependencies: snap.svg.js

Author

  • Milan Raring

Made with

  • HTML / CSS (SCSS) / JS

About a code

Password Validate Animation

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

Responsive: no

Dependencies: -

Author

  • Ryan Mulligan

Made with

  • HTML (Pug) / CSS (SCSS) / JS

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: -

Author

  • Natalia Davydova

Made with

  • HTML (Pug) / CSS (SCSS) / JS (Babel)

About a code

Password Strength Validator UI

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

Responsive: yes

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

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS) / JS

About a code

Birthday Input with Zodiac

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

Responsive: yes

Dependencies: -

Author

  • Florin Pop

Made with

  • HTML / CSS / JS

About a code

Image Password Strength

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

Responsive: yes

Dependencies: tailwind.css

Author

  • Jarrod Thibodeau

Made with

  • HTML (Pug) / CSS (SCSS) / JS (Babel)

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

Author

  • Steve Gardner

Made with

  • HTML / CSS (SCSS) / JS (TypeScript)

About a code

Droppy Woppy Input

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

Responsive: yes

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

Author

  • David A.

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Floaty Labels

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mikael Ainalem

Made with

  • HTML / CSS / JS

About a code

Bump Name

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

Responsive: no

Dependencies: bezier-easing.js

Author

  • Jason Yeung

Made with

  • HTML (Pug) / CSS (SCSS) / JS (Babel)

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: -

Author

  • Tero Auralinna

Made with

  • HTML / CSS (SCSS) / JS (Babel)

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

Author

  • @keyframers

Made with

  • HTML / CSS (SCSS) / JS

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

Author

  • Elior Tabeka

Made with

  • HTML / CSS (SCSS) / JS (TypeScript)

About a code

Push to Hide

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

Responsive: no

Dependencies: -

Author

  • Trevor Eyre

Made with

  • HTML / CSS (SCSS) / JS (Babel)

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

Author

  • Julien Dargelos

Made with

  • HTML / CSS (Sass) / JS

About a code

Tags Input

Tags input in JavaScript.

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

Responsive: yes

Dependencies: -

Author

  • Shehab Eltawel

Made with

  • HTML / CSS / JS

About a code

Input

Input with Snap.svg & validation.

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

Responsive: no

Dependencies: snap.svg.js

Demo image: Text Mask

Author

  • Text Mask

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.

Author

  • Shehab Eltawel

Made with

  • HTML / CSS / JS

About a code

Animated UI Text Input

Expanding text input in JavaScript.

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

Responsive: no

Dependencies: -

Author

  • Rik Schennink

Made with

  • HTML / CSS (SCSS) / JS

About a code

Pixie Dust Input

Type to have the input generate pixie dust.

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

Responsive: no

Dependencies: -

Author

  • Rachel Smith

Made with

  • HTML / CSS / JS

About a code

Dynamic 3D Confetti Text

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

Responsive: yes

Dependencies: three.js

Author

  • Yuan Qing Lim

About a code

Autosize Input

Effortless, dynamic-width text boxes in vanilla JavaScript.

Author

  • bartekd

Made with

  • HTML / CSS / JS

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: -