Practice

In this practice we're going to build a basic contact form for the site we've been devoloping during the tutorial series. Before we start, you'll need to create a new file in the website's root directory (as seen in the tutorial "Organizing a website") and fill it with the basic structure of HTML documents (as seen in the tutorial "The document structure"). You can call this new file "contact.html".

Be aware that, given the scope of this website, the practice won't include the server-side mechanisms to process the form's data. This should consist of a script written in a server-side language supported by the server you'll work with. You can find more information about this subject in the section Beyond HTML.

So, once we have our file ready, we'll begin by adding a title and a small paragraph to introduce the visitor to this form. Remember that we'll only work with whatever goes inside the body here, but the rest (like the head) should be in your file.

<h1>Have something to say?</h1>
<p>Through this form you can send me a message to help me get rid of errors in the pages, to improve my blog, or to just to say hello. Anything you have to say is very welcome, so don't hesitate and drop a few words. I'll be happy to write back to you!</p>

Now that we got a frame, let's get that form running. In the first place, we're creating the form container and specifying, in its action attribute, the URL of the spcript that's supposed to process the form's data. Here I'll put the address of my processing agent but, once you're ready to go to the next level, you should try to build your own processing agent and update the value of the action attribute. I'm also adding the target attribute to avoid annoying redirections during tests.

<h1>Have something to say?</h1>
<p>Through this form you can send me a message to help me get rid of errors, to improve my blog, or to just to say hello. Anything you have to say is very welcome, so don't hesitate and drop a few words. I'll be happy to write back to you!</p>
<form action="../../form-result.php" target="_blank">
 
</form>

The next thing is to decide what fields we'll add to our form. Let's see: we need people to contact us and send a message. We can gather this information with a multi-line text input. But we'd also want to know who's writing, so we need to get a name. And this is a job for the single-line text input. Lastly, if we're planning to answer the message, we'll also need an e-mail address. For this purpose we're using a single-line text input but, if you feel daring, you could try the e-mail input as well.

As in the tutorial, we'll be using paragraphs to present each one of these controls and the text associated to them. Remember that a single-line text input is inserted with the input element, having the value "text" in its type attribute, and the multi-line text input wiht the textarea element. Let's see how it looks like.

<h1>Have something to say?</h1>
<p>Through this form you can send me a message to help me get rid of errors in the pages, to improve my blog, or to just to say hello. Anything you have to say is very welcome, so don't hesitate and drop a few words. I'll be happy to write back to you!</p>
<form action="../../form-result.php" target="_blank">
  <p>Your name: <input type="text" name="fullname"></p>
  <p>Your e-mail address: <input type="text" name="email"></p>
  <p>
    Your message:<br>
    <textarea name="message"></textarea>
  </p>
</form>

This is starting to look good. But users won't be able to send this form until we provide a submit button. We do this with the input element having the value "submit" in the type attribute. Additionally, we're setting up a reset button, in case the user needs to wipe all the fields and start over.

<h1>Have something to say?</h1>
<p>Through this form you can send me a message to help me get rid of errors in the pages, to improve my blog, or to just to say hello. Anything you have to say is very welcome, so don't hesitate and drop a few words. I'll be happy to write back to you!</p>
<form action="../../form-result.php" target="_blank">
  <p>Your name: <input type="text" name="fullname"></p>
  <p>Your e-mail address: <input type="text" name="email"></p>
  <p>
    Your message:<br>
    <textarea name="message"></textarea>
  </p>
  <p>
    <input type="submit" value="Send message">
    <input type="reset" value="Start over">
  </p>
</form>

It's time to associate control an labels. In this step we'll properly define a label for each control in the form. The process is simple enough and consists of wrapping the control and its label with the label element.

<h1>Have something to say?</h1>
<p>Through this form you can send me a message to help me get rid of errors in the pages, to improve my blog, or to just to say hello. Anything you have to say is very welcome, so don't hesitate and drop a few words. I'll be happy to write back to you!</p>
<form action="../../form-result.php" target="_blank">
  <p><label>Your name: <input type="text" name="fullname"></label></p>
  <p><label>Your e-mail address: <input type="text" name="email"></label></p>
  <p>
    <label>
      Your message:<br>
      <textarea name="message"></textarea>
    </label>
  </p>
  <p>
    <input type="submit" value="Send message">
    <input type="reset" value="Start over">
  </p>
</form>

In the final stage we're grouping the controls by their thematic. We'll do this in two steps: frist we'll create a set of controls with what we have so far; and second, we'll add a new group with some checkboxes.

In the first place, we're wrapping the controls already present in our form (both single-line text inputs and the multi-line text input) with a fieldset element. Additionally, we're adding a title for the group, by inserting a legend at the begining of the group, right after the fieldset opening tag.

<h1>Have something to say?</h1>
<p>Through this form you can send me a message to help me get rid of errors in the pages, to improve my blog, or to just to say hello. Anything you have to say is very welcome, so don't hesitate and drop a few words. I'll be happy to write back to you!</p>
<form action="../../form-result.php" target="_blank">
  <fieldset>
    <legend>Message</legend>
    <p><label>Your name: <input type="text" name="fullname"></label></p>
    <p><label>Your e-mail address: <input type="text" name="email"></label></p>
    <p>
      <label>
        Your message:<br>
        <textarea name="message"></textarea>
      </label>
    </p>
  </fieldset>
  <p>
    <input type="submit" value="Send message">
    <input type="reset" value="Start over">
  </p>
</form>

And now, to conclude, we'll be adding a new fieldset and a proper legend for it. And within this group, we're providing the visitor with a list of topics you're willing to talk about in the future. This will allow users contacting you, to vote for the topics they'd like to see more posts about in you site. So, are you ready? Let's do this.

<h1>Have something to say?</h1>
<p>Through this form you can send me a message to help me get rid of errors in the pages, to improve my blog, or to just to say hello. Anything you have to say is very welcome, so don't hesitate and drop a few words. I'll be happy to write back to you!</p>
<form action="../../form-result.php" target="_blank">
  <fieldset>
    <legend>Message</legend>
    <p><label>Your name: <input type="text" name="fullname"></label></p>
    <p><label>Your e-mail address: <input type="text" name="email"></label></p>
    <p>
      <label>
        Your message:<br>
        <textarea name="message"></textarea>
      </label>
    </p>
  </fieldset>
  <fieldset>
    <legend>New topics</legend>
    <p>
      What topics would you like me to talk about more in my site?<br>
      <label><input type="checkbox" name="html"> HTML</label>
      <label><input type="checkbox" name="graphics"> Graphics</label>
      <label><input type="checkbox" name="videogames"> Videogames</label>
      <label><input type="checkbox" name="art"> Art</label>
      <label><input type="checkbox" name="music"> Music</label>
    </p>
  </fieldset>
  <p>
    <input type="submit" value="Send message">
    <input type="reset" value="Start over">
  </p>
</form>

And that's it. Forms are a hard-to-learn feature of HTML, particularly because, if you want them to make sense, you need to support them with some kind of scripting, being it server-side or client-side. But they're also very powerful, specially when developing complex applications.

The subjects treated in this tutorial are limited only to the sido of forms that has to do with HTML, barely peeking at operations carried out server-side. But this should be enough to give you an idea of how forms work in HTML. Whenever you jump to the server-side scripting area, you'll have the bases to better understand the processing of data sent by a form.