Jessett.com home  

html

html tag library
html editors
hex colors
forms
xhtml

home > html > forms

forms

Forms are a useful way of gathering information from your web site's visitors. The most common form found on web sites is one that allows visitors to contact the webmaster. The advantage with forms over a simple mailto link is that you can ask visitors specific questions you would like the answers to. As with all aspects of web design, consider usability. Don't ask your visitors too many questions - they simply won't answer them. Keep forms as short as possible.

how to make a simple form

  1. You have to add the form tag:
  2. <form>

  3. You then need to add the method by which the form will send the information to you. For these purposes we're just going to use a mailto rather than a form script. If you would like to use a script, there are plenty of free ones on the web (scroll to the bottom of this page).
  4. <form action="mailto:yourname@youremailaddress.com" method="POST">

  5. To have a nicely laid out form, it's best to put the elements inside a table, so add the following after your form tag:
  6. <table border="0" cellpadding="4" cellspacing="2">
    <tr>
    <td align="right">Name</td>
    <td align="left"> <input type="text" name="name" size="15">
    </td>
    </tr>
    <tr>
    <td align="right">Email address</td>
    <td align="left"> <input type="text" name="email" size="15">
    </td>
    </tr>
    <tr valign="top">
    <td align="right">
    <p>Comments</p>
    </td>
    <td align="left">
    <textarea name="comment" cols="23" rows="5"></textarea>
    </td>
    </tr>
    <tr>
    <td align="right">&nbsp;</td>
    <td align="left">
    <input type="submit" name="submit" value="Send">
    <input type="reset" name="reset" value="Reset">
    </td>
    </tr>
    </table>

  7. This should produce a form that looks like this when viewed in the browser:

     

    Name
    Email address

    Comments

     

  1. Finally, add your closing form tag:

    </form>

There are more form elements you can add to your forms, details are on the html tag library section.

further information