CSS Form Design Template Without Table

This post is for the persons who need to have clean layouts in forms without the table layout.I have developed a small piece of code using which forms can be customized to any layout.Feel free to reuse this code in your projects.You could play around with it.You could straightly add this css code in your project and could design the form layout easily.This could be used to design signup forms,login forms, and other complex form structures.

WORKING:

We have split our form wrapper in to two parts col-1 and col-2 . Where the col-1 and col-2 width are adjustable based on the need.The lables are added in the col-1 and textbox’s are added in col-2.

A pictorial representation should be easy to understand.

forms

sample html code

<div class="col-1">

           <label>Name</label>
</div>

 <div class="col-2">

          <input type="text" name="name" id="name" />
</div>

In similar way the labels and text box’s are added at the col-1 and col-2

FINAL HTML CODE:

<div id="form_wrapper">
            <form id="form" name="form" method="post" action="index.html">
                <h1>Sign-up form</h1>
                <p>FLEXIBLE FRAMEWORK FOR FORMS IN CSS WITHOUT TABLE</p>

                    <div class="col-1">

                        <label>Name
                        <span class="small">Enter Full Name</span>
                        </label>

                         <label>Email
                        <span class="small">Add a valid address</span>
                        </label>

                        <label >Password
                        <span class="small">Min. size 6 chars</span>
                        </label>

                        <label >Gender
                        <span class="small">Enter your gender</span>
                        </label>

                         <label >Country
                        <span class="small">Enter your country</span>
                        </label>
                    </div>
                    <div class="col-2">

                        <input type="text" name="name" id="name" />

                        <input type="text" name="email" id="email"   />

                        <input type="text" name="password" id="password"/>

                        <input type="radio" name="password" id="password"/> Male
                        <input type="radio" name="password" id="password"/>Female

                        <select>
                            <option>Country1</option>
                            <option>Country2</option>
                        </select>
                    </div>

                    <center>
                      <button type="submit">Sign-up</button>
                    </center>

            </form>

</div>

FORM.CSS

 p, h1, form, button{border:0; margin:0; padding:0;}
 .spacer{clear:both; height:1px;}
 /* ----------- FORM LAYOUT ----------- */
 #form_wrapper
 {
     margin:0 auto;
     height:auto;
     width:500px;
     padding:14px;
     border:solid 10px #7F9B4E;
     background:#f4f8ef;

 }

 .col-1
 {

     width:30%;
     float:left;
 }
 .col-2
 {
     width:65%;
     float:right;  
 }

 /* -----------FORM LAYOUT  ----------- */

 #form_wrapper h1
 {
     font-size:24px;
     font-weight:bold;
     margin-bottom:8px;
     text-align:center;
 }
 #form_wrapper p{
 font-size:12px;
 color:#666666;
 margin-bottom:20px;
 padding-bottom:10px;
 text-align:center;
 }
 #form_wrapper label{

 margin-bottom:18px;
 font-weight:bold;
 text-align:right;
 display:block;
 }
 #form_wrapper .small{
 color:#666666;
 font-size:11px;
 font-weight:normal;
 text-align:right;
 display:block;
 }
 #form_wrapper input{
 margin-bottom:15px;
 font-size:12px;
 padding:5px 2px;
 border:solid 2px #738f47;
 width:100%;
 box-shadow: inset 0 0 5px rgba(0,0,0,0.1),inset 0 3px 2px rgba(0,0,0,0.1);
 -webkit-transition: all 0.3s ease-out;
 -moz-transition: all 0.3s ease-out;
 -ms-transition: all 0.3s ease-out;
 -o-transition: all 0.3s ease-out;
 transition: all 0.3s ease-out;
 font-weight:bold;
 }

 #form_wrapper input[type="radio"]
 {
     margin-bottom:30px;

     border:1px solid black;
     width:15px;
 }
 #form_wrapper select
 {
     padding:5px 2px;
     width:100%;
     border:solid 2px #738f47;
     margin-bottom:15px;
 }
 #form_wrapper input:focus{
 background-color:#738f47;
 }
 #form_wrapper button
 {
 clear:both;
 margin-left:50px;
 width:125px;
 height:31px;
 background:#7F9B4E;
 text-align:center;
 line-height:31px;
 color:#FFFFFF;
 font-size:11px;
 font-weight:bold;
 }
 #form_wrapper button:hover
 {
       background-color:#fff;
       color:black;
       border:1px solid green;
       cursor:pointer;
 }

 

Once you added the above css you could start designing your form using div layout itself. To adjust the size of the form , change the widths of the #form_wrapper ,col-1,col-2.Some transition effects are also added to make the form look good.A sample sign up form is designed using above code.check the demo

For any queries feel free to comment below.

 

0saves
If you like this post, contribute us by sharing this in your network
Ver peliculas online