Collection of free vanilla JavaScript input type text code examples: placeholders, float labels, etc.


Related Articles

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


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

  • Sasha

Made with

  • HTML / CSS (SCSS) / JS

About a code

Input UI Animation

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

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

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