Let's get started with a Web Form!

  1. Open Notepad++
    1. Open your index.html file
    2. Open your styles.css file
    3. Click: New -> File
    4. Click: Save
    5. Name that file: form.html
    6. Click: Save
    7. Copy the Form Page Template (HTML) code (below)
    8. Paste that code into your form.html file
    9. Change your page title, your Author name, and your page heading to something appropriate
    10. Change: your-email-address to your email address
    11. Change the put-legend-here and both put-label-here to something appropriate. For example, Demographic Information, First Name, Last Name
    12. Copy the Form Page Styles (CSS) code (below)
    13. Paste that code into your styles.css file
    14. Change some styles
    15. In your index.html file
    16. Add a link to this page.
      Change: <li>Create a Form Page</li>
      to: <li><a href="form.html">Create a Form Page</a></li>
    17. Click: Save
    18. Name the file: form.html
    19. Change the Save as type:
      to: Hyper Text Markup Language file (*.html)
    20. Click: Run
    21. Choose: Launch in IE
      or Launch in Chrome
      or Launch in Firefox
    22. View your web page
    23. Make any changes
    24. Save your changes

Form Page Template (HTML)

<!doctype html>
<html>
  <head>
    <title>page title goes here</title>
    <!-- put your name in this comment line -->
    <link href="includes/styles.css" rel="stylesheet"/>
  </head>
  <body>
    <h2>My Form Page</h2>
    <form id="myForm" name="myForm" method="POST" action="mailto:your-email-address">
      <fieldset>
        <legend>put-legend-here</legend>
        <label for="fieldName1">put-label-here:</label>
         <input type="text" id="fieldName1" name="fieldName1" size="25"/><br/>
        <label for="fieldName2">put-label-here:</label>
        <input type="text" id="fieldName2" name="fieldName2" size="25"/><br/> 
        <input type="submit" id="submit" name="submit" value="OK Send My Data"/>
      </fieldset>
    </form>
    <p>This page was last modified on: 
     <script>document.write(document.lastModified);</script>.</p>
  </body>
</html>

Form Page Styles (CSS)

form {
  background-color: #CCC;
  width: 80%;
}
fieldset {
  background-color: #DDD;
} 
label{
  background-color: navy;
  color: white;
} 

Example