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. Tailwind Input Text
  5. 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: -