Cross browser compliant HTML/CSS form download with PSD file

November 20, 2009 — Kalim Fleet

 

 

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.

Posted in web design tools. Tags: , , , , , . 6 Comments »

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

  1. J. Hendrix Says:
    November 21, 2009 at 12:05 am

    Thanks. I’ll give this one a try!

    Reply
  3. 35+ Community Picks for Designers and Developers | tripwire magazine Says:
    November 22, 2009 at 7:33 am

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

    Reply
  4. Gordon Says:
    November 22, 2009 at 10:02 pm

    Looks good. Casual not too elegant but ok

    Reply
  5. Jose Maria Says:
    December 31, 2009 at 6:54 pm

    Thanks dor tutorial! helpfull
    Happy new year

    Reply

Leave a Reply

«