Create nice looking Web form using CSS and HTML

Sourav.Kayal
Posted by in HTML 5 category on for Beginner level | Points: 250 | Views : 3887 red flag

In this article, we are going to develop skype like textbox using CSS


Create nice looking Web form using CSS and HTML

In this article, we are going to create user interface like Skype interface using HTML and CSS. It's nice to know a bit of both and how to use them.

Here, at first we will create one sample form and will beautify this form using CSS.  If you are totally unaware of CSS and HTML then please check line introductions of those technologies below:

HTML: It’s a markup language used to create web application. Open any website then right click anywhere and go to view source option, most probably you will see lots of codes. Those are nothing but HTML code.

CSS: CSS stands for Cascading style sheet. It is not a programming language but a scripting language and used to beautify document.

Here we will see how to use them to design beautiful web form

 Create table using HTML

At first we will create one table using HTML like below

<table width="100%" align="left">
      <tr>
          <td width="117" align="right">My name:</td>
         <td width="165"><input name="name" type="text" class="inputbox" size="30" id="name" autocomplete="off"></td>          
      </tr>
      <tr>
          <td align="right">My pinclde:</td>
          <td> <input name="pincode" id="pincode" type="text" class="inputbox" size="30" autocomplete="off"></td>    
      </tr>
      <tr>
          <td align="right">My mobile number:</td>
          <td> <input  name="mobile" id="mobile" type="text" class="inputbox"  size="30" autocomplete="off"></td>    
      </tr>
      <tr>
          <td align="right">My e-mail ID:</td>
          <td> <input  name="email" id="email" type="text" class="inputbox" size="30" autocomplete="off"></td>    
      </tr>
      <tr>
          <td></td>
          <td align="left">
              <input type="submit" class="myButton" value="Submit">
              <input type="reset" class="myButton" value="Reset">
          </td>
     </tr>
     <tr>
          <td></td>
          <td>
              <div id="ERROR" style="color:#055A5F">
              </div>
          </td>
     </tr>
</table>

 This is our table containing form element. Now we will add few lines of CSS in <HEAD> section of HTML document to make it beautiful

Add CSS style in HEAD section of HTML Page

Add this style sheet to decorate all text boxes and two buttons containing in form.

/* CSS Document */
     .myButton {
       
        -moz-box-shadow:inset 0px 1px 0px 0px #dcecfb;
        -webkit-box-shadow:inset 0px 1px 0px 0px #dcecfb;
        box-shadow:inset 0px 1px 0px 0px #dcecfb;
        
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bddbfa), color-stop(1, #80b5ea));
        background:-moz-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
        background:-webkit-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
        background:-o-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
        background:-ms-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
        background:linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bddbfa', endColorstr='#80b5ea',GradientType=0);
       
        background-color:#bddbfa;
       
        -moz-border-radius:4px;
        -webkit-border-radius:4px;
        border-radius:4px;
       
        border:1px solid #84bbf3;
       
        display:inline-block;
        color:#ffffff;
        font-family:arial;
        font-size:18px;
        font-weight:bold;
        padding:4px 19px;
        text-decoration:none;
       
        text-shadow:0px 0px 0px #528ecc;
       
    }
    .myButton:hover {
       
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #80b5ea), color-stop(1, #bddbfa));
        background:-moz-linear-gradient(top, #80b5ea 5%, #bddbfa 100%);
        background:-webkit-linear-gradient(top, #80b5ea 5%, #bddbfa 100%);
        background:-o-linear-gradient(top, #80b5ea 5%, #bddbfa 100%);
        background:-ms-linear-gradient(top, #80b5ea 5%, #bddbfa 100%);
        background:linear-gradient(to bottom, #80b5ea 5%, #bddbfa 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80b5ea', endColorstr='#bddbfa',GradientType=0);
       
        background-color:#80b5ea;
    }
    .myButton:active {
        position:relative;
        top:1px;
    }
 
 
/* Text box Style */
.inputbox{
border-radius:5px;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
border: 1px solid #999;
}
.inputbox:focus{
 background-color:#FFF;
 border: 1px solid #07c;
 box-shadow: 0 0 10px #07c;
} 

And you will get below result


Conclusion:

This is the example of sample form beautification using CSS. Hope this is helpful
Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)