CREATING A CSS FORM

March 20, 2017 ,

Steps For Creating the CSS Form

  1. Create the Form
  2. Create Popup Message element
  3. Style the Form using CSS
  4. Jquery to trigger and Animate the popup.

Step 1 : Creating the Form

The Forms are normally created in tabular format so we will create the Form using the tables.
The table will have two columns. One for Labelling the Input fields. The other one for the input field element.
Here how it looks without CSS Styling. 
Contact Us Form
Name ›
Email ›
Address ›
Username ›
Password ›

 

Step 2 : The Popup Message Elements

Now we will add Input Field related messages inside span tag elements, right next to the Input Fields.
These span tag elements will act as the popup messages.

Contact Us Form
Name › Enter Your Full Name
Email › Your Active Email Address
Address › Enter Your Full Address
Username › Type a username for this site
Password › More than 8 Characters long
Here's the HTML Code for the Table
Notice the table has an id="form_table".
We'll use this id later for styling the form and triggering the popups using jQuery.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48


<form name=form1 method=post action=>
<table border=0 id=form_table>
<caption>Contact Us Form</caption>
  <tr>
    <th width=25%>Name &#8250;</th>
    <td>
        <input type=text name=name>
        <span>Enter Your Full Name</span>
    </td>
  </tr>
  <tr>
    <th>Email &#8250;</th>
    <td>
    <input type=text name=email>
    <span>Your Active Email Address</span>
    </td>
  </tr>
  <tr>
    <th valign=top>Address &#8250;</th>
    <td>
    <textarea type=text name=address style=height:80px>
    </textarea><span>Enter Your Full Address</span></td>
  </tr>
  <tr>
    <th>Username &#8250;</th>
    <td>
    <input type=text name=username>
    <span>Type a username for this site</span>
    </td>
  </tr>
  <tr>
    <th>Password &#8250;</th>
    <td>
    <input type=password name=password>
    <span>More than 8 Characters long</span>
    </td>
  </tr>
  <tr>
    <th> </th>
    <td>
    <input type=submit name=submit value=Submit Form>
    <input type=reset name=reset>
    </td>
  </tr>
</table>
</form>

 

Step 3 : Style the Form Using CSS

Now we'll convert the ordinary looking Contact Form into a Cool looking form using CSS Stylesheet.
We will use a background image for the caption element and add some height and width to it.
The input textboxes and the textarea have round corners and about 2 pixels thick grey colored border.
The background color will also change when these fields are foucused.
The Submit and Reset Buttons have same width and the same background color as the input fields.

Here's the CSS Code for the Form
Paste this code inside the head tags.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<style type=text/css>

#form_table{
 background:#2c2c2c;
 border:4px solid #0170e4;
 width:450px;
 margin: 30px auto;
 font-family: arial;
 color:#fff;
 }
#form_table th {
 text-align: right;
 color: #eee;
 font-size: 14px;
 }
#form_table td {
 position: relative;
 width: 40%;
 }
#form_table caption {
 background:url(images/caption.jpg) center left;
 height: 58px;
  line-height: 58px;
  width: 450px;
  font-size: 21px;
  font-weight: bolder;
  }
#form_table input, #form_table textarea {
 width: 250px;
 background-color: #353535;
 display: inline;
 color: #ddd;
 border:2px solid #444;
 margin:2px 5px;
 font-family: arial;
 height: 28px;
 font-size: 13px;
 border-radius:8px;
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
}
#form_table input[type=submit], #form_table input[type=reset] {
 width: 120px;
 }
#form_table input:focus, #form_table textarea:focus{
 background:#555;
 }
#form_table input + span, #form_table textarea + span {
 display: none;
 background:url(images/message2.png) no-repeat center left;
 line-height: 32px;
 font-size: 12px;
 font-weight: bold;
 color: #000;
 padding:0px 20px;
 position: absolute;
 width: 180px;
 z-index:99;
 }
 
</style>
The Explanation
Line 3 › #form_table { 
→ Selector of the table having id="form_table".
→ Properties like background color, border size and color, width are defined here.

Line 11 › #form_table th { 
→ Selects the th tags of the table.
→ White colored text is applied to the table heading.

Line 16 › #form_table td { 
→ Selects the td tags of the table.
→ Width and Relative position are defined here for the td tags.
→ Relative position is important here, it will help to position the span elements later.

Line 20 › #form_table caption { 
→ For selecting the caption tag element.
→ Background image, width, height etc. are declared here for the caption tag.

Line 28 › #form_table input, #form_table textarea { 
→ Here a comma is used between the two selectors to apply same set of properties.
→ Properties like border, backgound, width etc are defined here.
→ Rounded Corners have been used here for the text and textarea fields.

Line 42 › #form_table input[type=submit], #form_table input[type=reset] { 
→ For selecting the input fields with type="submit" and type="reset".
→ Same width is applied to the submit and reset buttons.

Line 45 › #form_table input:focus, #form_table textarea:focus{ 
→ When the input or the textarea fields gets focused their background color will change to a lighter shade.

Line 48 › #form_table input + span, #form_table textarea + span { 
→ For Selecting the span elements right next to the input and textarea fields.
→ Background is added to the span element.
→ By default span element will be hidden from view (using Display Property) until the input field is focused.

 

Step 4 : Apply jQuery For Popups

The span elements are hidden from view now. We will make them appear only when the field is focused.
For the Popup Effect, jQuery Library needs to be included in the webpage.
Include jQuery Library
jQuery can be downloaded from › jQuery.com ‹.

We will include jQuery inside the <head> tags.
Here's the code:
1
2
3
4
5

<head>

   <script type=text/javascript src=jquery-1.5.2.min.js ></script>
 
</head>
There's an alternate way to include jQuery Library on the webpage without downloading jQuery file.
This can be done by adding src attribute to the script tag.
Set the value of src attribute to "http://ajax.googleapis.com/ ajax/libs/jquery/1.4.2/jquery.min.js";
1
2
3
4
5
6
   
<head>

   <script type=text/javascript src=http://ajax.googleapis.com/
   ajax/libs/jquery/1.4.2/jquery.min.js ></script>
 
</head>
The jQuery Code
This code will make the span elements right next to the input and textarea fields Popup.
Paste this code inside the head tags.
1
2
3
4
5
6
7
8
9
10
11
12

<script type=text/javascript >

$(document).ready(function(){
  $(input,textarea).focus(function () {
         $(this).next(span).show(slow).css(display,inline);
    });
  $(input,textarea).focusout(function () {
         $(this).next(span).hide(slow);
    });
});
 
</script>
The Explanation

Line 3 › $(document).ready(function(){ 
→ This function will run only when the page(document) loads completely.

Line 4 › $(input,textarea).focus(function () {
→ This function selects the the input and textarea fields.
→ This function runs only when the fields are focused with cursor.

Line 5 › $(this).next(span).show(slow).css(display,inline); });
→ The span element right next to the fields will pop out.
→ The Pop up Effect will show up slowly.
→ Display Inline property is added to the span element, so the message pops out from the right side.

Line 7 › $(input,textarea).focusout(function () {
→ This function runs when foucusout event occurs on input or textarea .

Line 8 › $(this).next(span).hide(slow);
→ The Pop up Effect will hide slowly.

Post a Comment

No comments

Subscribe to: Post Comments ( Atom )
Powered by Blogger.