And here we go. Understand I am far from a PHP or Web security guru. I'm not even a PHP or Web security novice, so I'm going to spare you from offering any advice on those subjects, especially considering how that any advice I would give on those two topics would probably be wrong at best, and downright dangerous at worst. So I'm going to stick to what I know best. XHTML, CSS and usability/accessibility. I'm not going to focus as much on the latter as I will on the former two, so bear with me. The first thing I'm going to do is set my DOCTYPE declaration. Note that I'm using XHTML, so any time you see a self closing element like <br /> or <input />, bear in mind that you MUST NOT USE THEM in standard HTML. Remove the space and forward slash (and use a matching DOCTYPE) if using standard HTML instead of XHTML. Since Internet Explorer cannot understand XHTML when served as an application of XML, I'm going to serve it as HTML instead. I'm also going to omit the XML encoding at the top of the DOCTYPE (in fact, nothing will go there, not even blank space), so we can keep Internet Explorer 6 on the same page as every other modern browser on the face of the earth. With that out of the way, here's what we have so far. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Semantic Email Contact Form</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="description" content="The Current Web Page's Description Goes Here." /> <style type="text/css" media="screen"> /* normally I'd link to a stylesheet, but I'm embedding it here for demonstration purposes only; make sure your stylesheet is linked in your pages */ </style> </head> <body> </body> </html> Code (markup): That's it. Inside the body will go the contact form. I'm going to start by declaring the accept-charset, action, ID and method attributes for the form. If you're paying attention, you'll notice that I have a # mark inside the action attribute. This is just a placeholder for the location of the script (even if it's $PHP_SELF) that will process the form, gather the information and send it on its merry way to Grandma's house - sorry, I meant your inbox. I've also set the method to "post" since your users will be posting data, not getting it (GET is useful for search forms and bookmarking form data, but is fraught with security issues, so it's normally not worth using). I also set the ID of the form to "contact-form" as well. This will be used as a CSS hook. Since CSS uses the DOM to position objects (your HTML) on the page, this humble ID can also be used by JavaScript to manipulate the form data for such tasks as form pre-validation and ensuring that your visitors REALLY want to delete the data on the form instead of submitting it. No JavaScript should ever touch the HTML itself; instead use what's called unobtrusive JavaScript (scripts called from external files) if you decide to take advantage of this. And finally charset-accept is used to identify which character encoding is to be used for the form data. This must match the character encoding you declared when saving your Web page AND the HTTP headers sent by your server. <form accept-charset="iso-8859-1" action="#" id="contact-form" method="post"> </form> Code (markup): Remember earlier when I said that Internet Explorer is a turd? Well it is, and fortunatley there's a fix for it. I'm going to use a DIV and give it a class of "fieldset" - this DIV will contain the fieldset and will also be used to style the form in place of the fieldset as well. While I'm at it, I might as well stick the fieldset element in there too. <form accept-charset="iso-8859-1" action="#" id="contact-form" method="post"> [b]<div class="fieldset"> <fieldset> </fieldset> </div>[/b] </form> Code (markup): The thing to remember about fieldsets is that if you use them, you have to use a legend to identify what it is. You only have to do this once per fieldset though. Using a legend is also pretty straightforward. Type <legend></legend> and then the text inside it. That's it, you're done. Or are you? Well as it turns out, the CSS that will be used on the <div class="fieldset"></div> tag pair will cause Firefox to mess up the legend, and since legends are inline elements, another DIV cannot be used to fix it. Enter the humble span. Just wrap the span around your content and call it a day. <form accept-charset="iso-8859-1" action="#" id="contact-form" method="post"> <div class="fieldset"> <fieldset> [b]<legend><span>Contact Form:</span></legend>[/b] </fieldset> </div> </form> Code (markup): Now that those little twerps are taken care of, feeling all nice smug and special, we can get to the real meat and potatoes of the form. The stuff that puts hair on the form's chest, and makes it a manly man. Ok, not really. In fact it doesn't do any of that. Enter the label and input. The label is used to assocaite its contents (plain text describing what the form input is for) with the input. It takes one value - the for="" attribute. This attribute must match the ID given to the input element, since it is unique. It basicaly a beautiful woman saying "I belong to Joe Sixpack - back off or else!" And of course, Joe Sixpack would be the input. <form accept-charset="iso-8859-1" action="#" id="contact-form" method="post"> <div class="fieldset"> <fieldset> <legend><span>Contact Form:</span></legend> [b]<label for="name">Your Name:</label> <input id="name" name="name" size="20" maxlength="50" tabindex="0" type="text" /><br />[/b] </fieldset> </div> </form> Code (markup): I set the name="" attribute to be the same as the ID for simplicity's sake, but the name="" attribute (which is NOT deprecated - obsolete - in form elements or controls) is needed for the PHP script that will process the form. I also set the default "suggested" text size for the input at 20, which is the browser default anyway. This is good for people who don't have CSS support (such as some mobile users), while maxlength is used to set the maximum number of characters (you know , letters, numbers and whatnot) the input can contain. I also set the tabindex to 0 for the benefit of Opera users, though this isn't necessary. Finally I closed the input and used a line break to force a new line. You'll note that I did repeat the process with the email and subject inputs as well. <form accept-charset="iso-8859-1" action="#" id="contact-form" method="post"> <div class="fieldset"> <fieldset> <legend><span>Contact Form:</span></legend> <label for="name">Your Name:</label> <input id="name" name="name" size="20" maxlength="50" tabindex="0" type="text" /><br /> [b]<label for="email">Your Email Address:</label> <input id="email" name="email" size="20" maxlength="50" tabindex="0" type="text" /><br /> <label for="subject">Subject:</label> <input id="subject" name="subject" size="20" maxlength="90" tabindex="0" type="text" /> <br />[/b] </fieldset> </div> </form> Code (markup): The next big thing will be the text area for the email content. Afterall, what's the point of providing a contact form if the people who want to contact you can't say anything, right? Well, this takes care of it. Rather than put the input alongside the label, I'm going to stick it INSIDE the label. This is perfectly valid and won't cause any issues. Just set the rows and columns, then make sure there's no blank space between the opening and closing textarea tags and you'll be fine. <form accept-charset="iso-8859-1" action="#" id="contact-form" method="post"> <div class="fieldset"> <fieldset> <legend><span>Contact Form:</span></legend> <label for="name">Your Name:</label> <input id="name" name="name" size="20" maxlength="50" tabindex="0" type="text" /><br /> <label for="email">Your Email Address:</label> <input id="email" name="email" size="20" maxlength="50" tabindex="0" type="text" /><br /> <label for="subject">Subject:</label> <input id="subject" name="subject" size="20" maxlength="90" tabindex="0" type="text" /> <br /> [b]<label for="message">Type Your Message:<br /> <textarea id="message" name="message" rows="12" cols="60"></textarea> </label>[/b] </fieldset> </div> </form> Code (markup): And now we get to the closing part. If they can't send the email, then the form is going to be useless. Many people suggest against using a reset button, but I prefer to include it for the benefit of dialup users, especially if the page is pretty beefy (content, images, and the like). I do however strongly recommend that you tie the reset button into a JavaScript application that will force an alert box prompting the user to confirm that they really REALLY want to delete their email and start over from scratch. Note that this will have no effect on people whose browsers do not either support JavaScript or have it enabled, so consider this an enhancement, not a critical function. I'm going to put a BR element next to the label that contains the textarea so I can force a line break. Note I could use a DIV instead to contain the submit and reset buttons, but I like to use as little HTML as possible for the job, and this really fits the bill. Instead of giving the submit and reset buttons IDs, I'm going to give them classes, so I can use the values over and over again, especially if there are other forms (like a poll or something) on the page. Of course, each submit button would be tied in with the ID set on the form element in the first place, so that shouldn't matter any. <form accept-charset="iso-8859-1" action="#" id="contact-form" method="post"> <div class="fieldset"> <fieldset> <legend><span>Contact Form:</span></legend> <label for="name">Your Name:</label> <input id="name" name="name" size="20" maxlength="50" tabindex="0" type="text" /><br /> <label for="email">Your Email Address:</label> <input id="email" name="email" size="20" maxlength="50" tabindex="0" type="text" /><br /> <label for="subject">Subject:</label> <input id="subject" name="subject" size="20" maxlength="90" tabindex="0" type="text" /> <br /> <label for="message">Type Your Message:<br /> <textarea id="message" name="message" rows="12" cols="60"></textarea> </label>[b]<br /> <input class="submit" type="submit" value="Send Email" /> <input class="reset" type="reset" value="Clear Form" />[/b] </fieldset> </div> </form> Code (markup): Here is the completed form, in all its raw XHTML (albeit served as HTML, but aside from Tommy Olsson, who cares anyway?) glory. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Semantic Email Contact Form</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="description" content="The Current Web Page's Description Goes Here." /> <meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished" /> <style type="text/css" media="screen"> </style> </head> <body> <form accept-charset="iso-8859-1" action="#" id="contact-form" method="post"> <div class="fieldset"> <fieldset> <legend><span>Contact Form:</span></legend> <label for="name">Your Name:</label> <input id="name" name="name" size="20" maxlength="50" tabindex="0" type="text" /><br /> <label for="email">Your Email Address:</label> <input id="email" name="email" size="20" maxlength="50" tabindex="0" type="text" /><br /> <label for="subject">Subject:</label> <input id="subject" name="subject" size="20" maxlength="90" tabindex="0" type="text" /> <br /> <label for="message">Type Your Message:<br /> <textarea id="message" name="message" rows="12" cols="60"></textarea> </label><br /> <input class="submit" type="submit" value="Send Email" /> <input class="reset" type="reset" value="Clear Form" /> </fieldset> </div> </form> </body> </html> Code (markup): I'll discuss the CSS in the next post, but before I can do that, I need you to tell me HOW you want the form to look (hint: provide an image file).
Well I was expecting only one or two replies but this is crazy, I have to say I am now totaly confused about the right way to do it now I did manage to get a little something together though, check it out here and let me know what you think http://www.domestic-energy-assessor.org.uk/contact.php If you are no completely sure about this please don't reply because as I am trying to learn myself all this different replies are just confusing. Thanks!