I am designing a new website now using a combination of photoshop and dreamweaver (yes, I know ). On my front page I am having a mailing list type set-up where users enter their name, email, then hit submit. I have done this before with success but am having some trouble with this current site. I am wanting to use custom form fields as well as a custom submit button. Now, I thought I had accomplished this but when I tried to add the <form action="gdform.php" method="post"> Code (markup): above the forms I encountered a problem. All of my tables messed up, resized, etc. I am thinking this is because each form and the submit button are all in different tables. In my previous website the entire form function was in one big table. I used separate tables because it was easy for me to create the custom button and custom forms and line everything up. My question: is it possible to input types and form actions in different tables and still work properly, if so how?
I dunno what you're doing to make "custom" inputs, but a custom submit is pretty easy. Have you thought of having the form in regular form tags and not in a table? I think then you can better control where your inputs and submits sit, etc. Post your code and an image representing what you WANT and maybe another showing what's going on bad. Which browser? Etc.
I am very new to coding, and am probably missing something fairly simple. Here is a screenshot of what it is supposed to look like: In Photoshop I created a new slice/table for the 'Download' button and the two form boxes. Ultimately I will have the name and email be forwarded to my email address (it's probably inefficient but will serve its purpose for the time being). Code: <tr> <td colspan="3" rowspan="7"> <img src="images/slicinggoodcopy2_27.gif" width="48" height="196" alt=""></td> <td colspan="4"><input name="textfield" type="text" size="12"> </form></td> <td> <img src="images/spacer.gif" width="1" height="23" alt=""></td> </tr> <tr> <td colspan="4"> <img src="images/slicinggoodcopy2_29.gif" width="98" height="23" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="23" alt=""></td> </tr> <tr> <td colspan="5" background="images/slicinggoodcopy2_30.gif"><input name="textfield2" type="text" size="12"></td> <td colspan="5" rowspan="2"> <img src="images/slicinggoodcopy2_31.gif" width="100" height="51" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="22" alt=""></td> </tr> <tr> <td colspan="5"> <img src="images/slicinggoodcopy2_32.gif" width="100" height="29" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="29" alt=""></td> </tr> <tr> <td colspan="2" rowspan="4"> <img src="images/slicinggoodcopy2_33.gif" width="33" height="104" alt=""></td> <td colspan="4"><input type="submit" value="" style="background-image:url(images/slicinggoodcopy2_34.gif); width:93px; height:18px; border:0; color:#036;font-family: Verdana; font-weight: bold;" /></td> HTML: Thanks for the help
You have closed the form way before your submit button. Open the form before the table and close it after it. You can place any form elements anywhere you like within the table this way without any problems.
Yeah, that </form> tag wasn't supposed to be there, I forgot to delete it when I was messing around previously. Would this code work? <td colspan="3" rowspan="7"> <img src="images/slicinggoodcopy2_27.gif" width="48" height="196" alt=""></td> <td colspan="4"><input name="textfield" type="text" size="12"> </td> <td> <img src="images/spacer.gif" width="1" height="23" alt=""></td> </tr> <tr> <td colspan="4"> <img src="images/slicinggoodcopy2_29.gif" width="98" height="23" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="23" alt=""></td> </tr> <tr> <td colspan="5" background="images/slicinggoodcopy2_30.gif"><input name="textfield2" type="text" size="12"></td> <td colspan="5" rowspan="2"> <img src="images/slicinggoodcopy2_31.gif" width="100" height="51" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="22" alt=""></td> </tr> <tr> <td colspan="5"> <img src="images/slicinggoodcopy2_32.gif" width="100" height="29" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="29" alt=""></td> </tr> <tr> <form action="gdform.php" method="post"><td colspan="2" rowspan="4"> <img src="images/slicinggoodcopy2_33.gif" width="33" height="104" alt=""></td> <td colspan="4"><input type="submit" value="" style="background-image:url(images/slicinggoodcopy2_34.gif); width:93px; height:18px; border:0; color:#036;font-family: Verdana; font-weight: bold;" /></td></form> HTML: It previews ok in firefox, but in IE it comes out like this: I don't even know if the above code would work properly though, since the form tags are only including the submit button, not the text fields.
Hm, I would do it completely different, and since the whole page is sliced tables (I'm assuming), I don't know how well my version would sit on yours. I would use semantic html forms with the majority of the stuff being one background image. Lemme see if I can take out your image and code this. I'll post a link here. You can then see if you can integrate it into your site.
Sorry for the double post, but I uploaded the homepage: http://www.thepokerstrategy.com It's poorly coded but at least you can get an idea of it.
I would strongly recommend you code another way. Trying to line up thousands of little pictures will not only make you bald soon (by tearing out your hair in frustration) but it makes your page filesize much bigger than it needs to be. That said, I've torn out many hairs with this simple little form. I don't understand why, as I've made these exact forms (tho in Xhtml but that shouldn't matter) with little problem. This is what I've got: http://stommepoes.jobva.nl/Andrew/andrewform.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Andrew Form</title> <meta name="description" content="Form Example"> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <meta name="generator" content="gEdit"> <style rel="stylesheet" type="text/css"> * { margin: 0; padding: 0; } img { border: none; } fieldset { border: none; } #login { height: 186px; width: 283px; color: #fff; background: #fff url(backgroundform.jpg) 0 0 no-repeat; font-family: Verdana, Arial, sans-serif; } #login form { width: 250px; height: 180px; padding-left: 2px; padding-top: 10px; } h4 { width: 260px; padding: 5px 0 15px 5px; font-size: 14px; } form div { margin-bottom: 10px; padding: 1px; } label { width: 55px; float: left; clear: left; text-align: center; font-size: 12px; font-weight: bold; } form input { width: 110px; } input#download { display: block; margin: 45px auto 0 auto; text-decoration: underline; width: 97px; height: 23px; outline: none; } </style> </head> <body> <div id="login" <form action="gdform.php" method="post"> <h4>Free Tournament Strategy Guide</h4> <fieldset> <legend></legend> <div> <label for="name">Name:</label> <input type="text" name="name" id="name"> </div> <div> <label for="email">Email:</label> <input type="text" name="email" id="email"> </div> <input type="image" id="download" src="download.gif" alt="Download"> </fieldset> </form> </div> </body> </html> Code (markup): I'm sure any of the gurus here can make the above more efficient and working in all browsers, but it's a start. I don't have a Windows machine to test on right now either. I'm not sure why, but though I've done it before, I can't seem to get Fake IE 4 Linux NOR Opera to change the size of the inputs. I've never had this problem before-- I just set it in ems or px and everything's fine. But the above code makes the inputs too long and too close to each other in Fake IE6 and Opera 9+. Looks of course fine in Konqueror and FF. Be aware that some browsers will set the way your forms look even if you code it correctly. Safari for Mac being the worst, but Opera changes things too. Konqueror makes the inputs look more like what you want, but that's a browser thing (it makes the corners slightly rounded and a dark little border around the text inputs). Anyway, the purpose of this was to have one background image: http://stommepoes.jobva.nl/Andrew/backgroundform.jpg and one image for the submit: http://stommepoes.jobva.nl/Andrew/download.gif Both images can be cleaned up so they look better, esp the corners of the download button, but this was a quickie (15 minutes-- I spent the day drinking in Rotterdam). That's a lot smaller than many multiple images and trying to piece them together like a puzzle.
Why dont you put the whole image with the heading text and the the book on one photoshop'd image and set it as bacground. Thats preety simple and not much messy too. And that ould load faster too.
Stomme poes, thanks very much for your effort. Just from posting that code you have given me some more stuff to research/learn. I website coding skills are VERY lacking, I am either going to have to take some classes or hire someone else to do it for me. I would prefer just learning myself online. Anyways, thanks for posting up that code and helping me, I am going to mess around with it a bit now. Thanks again
Andrew-- these links were immensely helpful when I first started dicking with forms. Here's the first of three pages about accessibility: http://www.webstandards.org/learn/tutorials/accessible-forms/beginner/ Here's A List Apart's article on accessible AND pretty forms: http://www.alistapart.com/articles/prettyaccessibleforms And here's John "Tyssen" 's site on tricking forms into obeying your css: http://www.tyssendesign.com.au/articles/css/legends-of-style/ The last one is where I got the <span> inside the legend and many times I have the fieldset hidden and use a div with the class name of "fieldset" for styling. The hardest thing is often the floating of stuff and getting stuff to line up in all browsers. In the example I gave you, I zero'd everything out in the CSS with * { margin: 0; padding: 0;} which I needed to do to get the forms to even remotely resemble each other. This apparently fvcks with the buttons and imputs themselves, and am looking for another way around this. Hope this helps.