Create Attractive Form Using HTML, CSS and JavaScript

The web has changed a lot in the previous few years and introduction of new technologies like HTML5 and CSS3 has given a boost to it.

We all see a lot of attractive forms on modern day websites. In this tutorial we will learn how to make one using HTML, CSS and a little bit of JavaScript.

So lets start. Here we will make three files:

1. form.html (Frame of the form)
2. style.css (styling of the form)
3. script.js (Make the form interactive)

 

form.html

So let’s first create the frame of our form, add the below code into the form.html file.

 

style.css

Now we will add some styling to our form. Add the below code to style.css to make your form attractive.

 

script.js

Now we will add some interactive elements to our form. The below javascript code will empty the input field when the user will click on it and will restore it if the user leaves it empty. Add the below code into the script.js file.

 

Now we have successfully made our form after doing all the above things correctly your form will look something as shown below.

Create Attractive Form Using HTML, CSS and JavaScript
If you have any queries then please comment them below.

 

Tutorial by: Mohd Shibli
Find out more by the author at: http://www.psychocodes.in
Follow the author on facebook: http://www.fb.com/mohd.shibli.940

4 thoughts on “Create Attractive Form Using HTML, CSS and JavaScript

  1. Belal Khan

    Nice post.. But I was just wondering.. what was the need of using javascript?? I mean what you have done with javascript can be easily done by using placeholder tag in html.

    Reply
    1. Admin Post author

      Thanks, yes you are right it can be done without javascript.

      Reply
  2. weight loss friend

    Hi! I’ve been following your web site for some time now and finally got the bravery to go ahead and
    give you a shout out from New Caney Texas! Just wanted to say keep up the excellent job!

    Reply
  3. suneeshpk

    Iwish t publish a stylish photo changing on the top of my blog .please send me the code which i s

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *