Monday, September 27, 2010

Author: Bimal | Posted at: 1:51 AM | Filed Under:
Your First HTML Form

 


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


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 Web site. 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 you should be able to manipulate form items and attributes.
  • a Web page you want feedback on (and a server location for your feedback page)
  • 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 
    <html>
 <head>
 <title>Feedback Form</title>
 </head>
 <body bgcolor="#ffffff">
  3. Give your page a heading. 
    <h1>Feedback Form</h1>
  4. Start your form. Your form tag will have a couple of special elements:
    • 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. 
    Name: <input type="text" name="name" size="30" /><br />
 Please rate my site from 1 to 10 (1 = bad and 10 = good): <br />
 <select name="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><br />
 How would you suggest I improve it?<br />
 <textarea name="improve" rows="5" cols="30"></textarea><br />
 <input type="submit" value="Send Feedback" /> <input type="reset" />
  6. Don't forget to close your form: 
    </form>
  7. Put the final closing HTML tags on your Web page: 
    </body>
 </html>
  8. Upload your form to your Web site.
  9. Validate your HTML to make sure that you haven't made any typos or other errors.
  10. Link to your form.

0 comments:

Post a Comment