You are here : : Home > Free Resources > CSS Tutorials > CSS Form |
Free Web Design Resources
Browser Support | » | ![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
Language | » | CSS3, HTML4 & jQuery | |||
Difficulty | » | Intermediate | |||
Estimated Completion Time | » | 30 minutes. |
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.
Name › | |
---|---|
Email › | |
Address › | |
Username › | |
Password › | |
span
tag elements, right next to the Input Fields.span
tag elements will act as the popup messages. 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 |
table
has an id="form_table"
.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 ›</th>
<td>
<input type=text
name=name
>
<span>Enter Your Full Name</span>
</td>
</tr>
<tr>
<th>Email ›</th>
<td>
<input type=text
name=email
>
<span>Your Active Email Address</span>
</td>
</tr>
<tr>
<th valign=top
>Address ›</th>
<td>
<textarea type=text
name=address
style=height:80px
>
</textarea><span>Enter Your Full Address</span></td>
</tr>
<tr>
<th>Username ›</th>
<td>
<input type=text
name=username
>
<span>Type a username for this site</span>
</td>
</tr>
<tr>
<th>Password ›</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>
caption
element and add some height and width to it.input
textboxes and the textarea
have round corners and about 2 pixels thick grey colored border.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>
table
having id="form_table"
.th
tags of the table
.td
tags of the table
.td
tags.span
elements later. caption
tag element.caption
tag. comma
is used between the two selectors to apply same set of properties.submit], #form_table input[type=
reset] {
input
fields with type="submit"
and type="reset"
.input
or the textarea
fields gets focused their background color will change to a lighter shade. span
elements right next to the input
and textarea
fields.span
element.span
element will be hidden from view (using Display Property) until the input field is focused. span
elements are hidden from view now. We will make them appear only when the field is focused. <head>
tags. 1 2 3 4 5
<head>
<script type=text/javascript
src=jquery-1.5.2.min.js
></script>
</head>
src
attribute to the script
tag.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>
span
elements right next to the input
and textarea
fields Popup.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>
input,textarea).focus(function () {
span).show(
slow).css(
display,
inline); });
span
element right next
to the fields will pop out.span
element, so the message pops out from the right side. input,textarea).focusout(function () {
input
or textarea
. span).hide(
slow);
No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.