Cross browser compliant HTML/CSS form download with PSD file

 

 

Hello and Thank you for visiting designtopx.wordpress.com.

Please note: The new home for this post is can be found here –

New designtopx home


For your review and use, I am presenting a free HTML/CSS form that has been tested on all major browsers (on a Windows computer).  Here is what the final form looks like (view live version here – http://bit.ly/8aVJ6R ):

HTML form screenshot

HTML Source Code

  1. <!DOCTYPE html
  2. PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head>
  6. <title>EMPTY</title>
  7. <link href="form-style.css" rel="stylesheet" type="text/css" />
  8. </head>
  9. <body>
  10. <div id="form">
  11. <form action="#" method="post" >
  12. <fieldset>
  13. <div>
  14. <label for="title"><span>Title</span></label>
  15. <input type="text" name="title" class="title" value="Lorem ipsum dolor sitamet" />
  16. </div>
  17. <div>
  18. <label for="title"><span>Enter Description Here:</span></label>
  19. <textarea name="description">Pellentesque habitant morbi tristique senectus et netus etmalesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mivitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.Vestibulum erat wisi, condimentum sed, commodo vitae, </textarea>
  20. <input type="hidden" value="foo" name="foo" />
  21. <input type="hidden" value="bar" name="bar" />
  22. </div>
  23. <div>
  24. <input type="text" size="28" readonly="readonly" class="readonly" value="This text is Read-Only"name="pubDate" />
  25. <input type="hidden" value="baz" name="baz" />
  26. <span class="pad-left"><button type="submit">Send</button></span>
  27. </div>
  28. </fieldset>
  29. </form>
  30. </div>
  31. </body>
  32. </html>

* This source code was highlighted with Source CodeHighlighter

The CSS

  1. body {
  2. background-color:#797979;
  3. margin:0;
  4. font:13px Trebuchet MS, Arial, Helvetica, Sans-Serif;
  5. }
  6. #form{
  7. background:url(formdesign.png) no-repeat top left;
  8. width:469px;
  9. height:332px;
  10. position:relative;
  11. float:left;
  12. margin-top:55px;
  13. margin-left:15px;
  14. }
  15. #form form{
  16. position:relative;
  17. float:left;
  18. margin-top:55px;
  19. margin-left:15px;
  20. }
  21. fieldset{
  22. border:none;
  23. width:330px;
  24. }
  25. div{
  26. padding:0 0 5px;
  27. }
  28. input.title{
  29. color:#3399FF;
  30. font-size:14px;
  31. font-weight:bold;
  32. width:400px
  33. }
  34. input.readonly{
  35. color:#999;
  36. }
  37. label span{
  38. color:blue;
  39. }
  40. textarea{
  41. color:#3399FF;
  42. width:420px;
  43. height:160px;
  44. }
  45. .clear{
  46. position:relative;
  47. clear:left;
  48. }
  49. .pad-left:{
  50. padding-left:35px;
  51. }
  52. .push-30{
  53. position:relative;
  54. float:left;
  55. margin-left:30px;
  56. }

* This source code was highlighted with Source Code Highlighter.

The form looks the same in all the latest browsers (tested in IE7, Firefox 3.0.14, Opera  10.01, Safari 4.0.3)

*Download the source code here (includes .PSD for the form background) –  Linkzip_icon


About the Author

Kalim Fleet is a professional web designer and blogger with over 6 years experience. The web is his passion as he splits his time between blog writing, software development and social media. He loves using and developing new applications for the web, mobile, and desktop.

Advertisements

6 Responses to “Cross browser compliant HTML/CSS form download with PSD file”

  1. J. Hendrix Says:

    Thanks. I’ll give this one a try!

  2. 35+ Community Picks for Designers and Developers | tripwire magazine Says:

    […] Cross browser compliant HTML/CSS form download with PSD file […]

  3. Gordon Says:

    Looks good. Casual not too elegant but ok

  4. Jose Maria Says:

    Thanks dor tutorial! helpfull
    Happy new year


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: