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. Copy the Form Page Template (HTML) code (below)
    5. Paste that code into your form.html file
    6. Change your page title, your Author name, and your page heading to something appropriate
    7. Change: your-email-address to your email address
    8. Change the put-legend-here and both put-label-here to something appropriate. For example, Demographic Information, First Name, Last Name
    9. Copy the Form Page Styles (CSS) code (below)
    10. Paste that code into your styles.css file
    11. Change some styles
    12. In your index.html file
    13. 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>
    14. Click: Save
    15. Name the file: form.html
    16. Change the Save as type:
      to: Hyper Text Markup Language file (*.html)
    17. Click: Run
    18. Choose: Launch in IE
      or Launch in Chrome
      or Launch in Firefox
    19. View your web page
    20. Make any changes
    21. 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