1. Technology

Your First HTML Form

It's Easier than You Think to Make Your Site Interactive Using HTML Forms

By

html_editor_coding_mac.2012
95Berlin/Flikr/CC BY 2.0

Forms may seem like a really tricky part of HTML, but you will find that it can be a simple matter to create a useful feedback form for your website. You don't need to know CGI or programming to do it.

Tools For Building an HTML Form

  • a text editor
    You can use your favorite HTML editor, but it should be able to manipulate form items and attributes.
  • a web host to place your feedback form on
  • an email address to receive the feedback
  • 30 minutes of free time

Steps to Build an HTML Form

  1. Open your text editor to create a blank page
  2. Build the main page container elements
    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Feedback Form</title>
      </head>
      <body>
  3. Give your page a heading.
    <h1>Feedback Form</h1>
  4. Start your form. Your FORM element will have a some special attributes:
    • action="mailto:your email address"
      This will send the form results to your email address (be sure to change it to your personal address)
    • method="get"
      This sends it all as one request to the mail program (the post method has some unusual results in most browsers)
    • enctype="text/plain"
      This makes the results readable in your email box
    <form action="mailto:your email address" method="get" enctype="text/plain">
  5. Add the questions to your form. My feedback form will have 3 questions: name, rating, and comments.
    <p>
      Name: <input type="text" id="name" size="30">
    </p>
    <p>
      Please rate my site from 1 to 10 (1= bad and 10= good): <br />
      <select id="rating"><br />
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option selected>10</option>
      </select>
    </p>
    <p>
      How would you suggest I improve it?<br />
      <textarea id="improve" rows="5" cols="30"></textarea>
    </p>
    <p>
      <input type="submit" value="Send Feedback"> <input type="reset">
    </p>
  6. Don't forget to close your form:
    </form>
  7. Put the final closing HTML tags on your web page:
      </body>
    </html>
  8. Save the page as feedback-form.html
  9. Upload your form to your website.
  10. Validate your HTML to make sure that you haven't made any typos or other errors.
  11. Link to your form.

Congratulations! You now have a working feedback form on your site! You can see this form in action, or just view the HTML for the form on the next page.

©2014 About.com. All rights reserved.