What I wish I’d known… How do I get my forms to work?

One of the most annoying things for people who are just learning HTML can be that the forms they build don’t actually work. Usually they learn how to create a form element in HTML, but then don’t find out how to make that form actually do anything till much later. This can be a bit disappointing. Today’s webpages are highly interactive: when people are used to  being able to leave a comment on every article, there isn’t a lot of demand for plain HTML/CSS brochure sites.

Making your form send an email is actually relatively straightforward and you can learn how to do it inside an hour. Of course you won’t have the same kind of understanding that would come from learning server-side scripting from the ground up, but it will at least let you begin to build modern websites.

Suppose you start with this basic HTML for your form and save it inside an HTML document called form.html:

<form>

<input type="text" name="firstName" id="firstName">

<input type="email" name="email" id="email">

<textarea name="message" id="message"></textarea>

</form>

The first thing you need to do is change your form tag to look like this:


In XHTML you actually needed to add these attributes for the page to validate, but that isn’t the case anymore with HTML5. What they do is basically set the form up to send its contents on to another page for processing. The action gives the name of the file they are being sent to and the method is, surprisingly enough, the method to use for sending them. There are two methods: post and get. The one you’ll usually want is post, so just use that for now.

In part 2, you’ll learn how to write the script to process the form contents and use them to send an email.