Material Design styled text fields - HTML, CSS, and JavaScript

Published: 29 November 2022
on channel: Jeff Claybrook

444

TLDR;
Semantic HTML
CSS
Vanilla JavaScript

Demo link:
https://jeffclaybrook.github.io/Form-...

Source code:
https://github.com/jeffclaybrook/Form...

CDN Stylesheet URLs
Font: https://fonts.googleapis.com/css2?fam...
Icons: https://fonts.googleapis.com/css2?fam...

In this tutorial, you'll create a form that has Material Design styled input fields and a Material Design styled textarea using semantic HTML, custom CSS, and vanilla JavaScript.

Overview
Outlined text fields
Animated text field label
Toggle password visibility
Character counter
Error helper text for required fields left blank

Timestamps:
00:00 - HTML
02:58 - CSS
13:42 - JavaScript

Feedback is welcome! Happy coding!

On this page of the site you can watch the video online Material Design styled text fields - HTML, CSS, and JavaScript with a duration of hours minute second in good quality, which was uploaded by the user Jeff Claybrook 29 November 2022, share the link with friends and acquaintances, this video has already been watched 444 times on youtube and it was liked by 12 viewers. Enjoy your viewing!

264,230

6.9K