Keeping DRY with progressive enhancement

I'm building a website with very small amounts of Javascript, just to add things to the page (like a contact form) without having to go to a new page.

I understand that I should build the contact page anyways (just in case the user doesn't have javascript tu开发者_如何学编程rned on) and then use javascript if they've got it.

So where do I store the HTML for the form if I don't want to have it in two places?

(Normally I'm not so picky, but I'm curious on this one.)

If you have access to a server-side language, you can keep a separate snippet of the form in an external page. Then, you can include the snippet into the HTML content page with an appropriate include call. This has the added benefit that, for your JavaScript, you can pull the contact form from this snippet file using AJAX. In fact, many plugins allow you to display DHTML windows with HTML content. For example, check out ThickBox.

Without a server-side language, you can do something similar with frames. Just display the form snippet in a frame when you need to reference it. Personally, I don't like frames very much, so this isn't a very attractive solution for me, but you can use it if you choose (and style the frames appropriately).

Just put your HTML for the contact form in a .html file. Assuming you're using PHP or something, just include the file in your contact page and include it in the section for your dynamic contact form. The form should still submit to the same server-side page and have the same look and feel..

e.g. contactForm.html

<div class="contact-form">
<input ....>
</div>