Let's get started with a Web Form!

  1. Login into your Code.Org account.
  2. Click on your name.
  3. Choose: My Projects
  4. Click on your My First Web Site project.
  5. Click on the Add HTML button.
  6. Right click on: new-2.html
  7. Choose: Rename
  8. Name this file: form.html
  9. Delete all the lines in this file.
  10. Copy the Form Page Template (HTML) code (below).
  11. Paste that code into your form.html file.
  12. Change your page title, your Author name, and your page heading to something appropriate.
  13. Change: put-your-email-address-here to your email address.
  14. Change: put-your-subject-here to your subject line.
  15. Change: put-your-form-page-url-here to the URL of your form page.
  16. Change the put-legend-here and both put-label-here to something appropriate. For example, Demographic Information, First Name, Last Name
  17. Copy the Form Page Styles (CSS) code (below)
  18. Paste that code into your style.css file.
  19. Change some styles.
  20. Click: Refresh and Save

Form Page Template (HTML)

<!doctype html>
<html>
  <head>
    <title>page title goes here</title>
    <!-- Author: put your name in this comment line -->
    <link href="style.css" rel="stylesheet"/>
  </head>
  <body>
      <nav>
      <a href="index.html">Home</a> |
      <a href="table.html">Table</a> |
      <a href="form.html" class="selected">Form</a> |
      <a href="multimedia.html">Multimedia</a> |
      <a href="javascript.html">JavaScript</a> |
      <a href="temperature.html">Temperature</a> |
      <a href="js_styles.html">JS Styles</a>
    </nav>
    <h2>My Form Page</h2>
    <form id="myForm" name="myForm" method="POST" action="https://jimgerland.com/jimMailer.php">
      <input id="to" name="to" type="hidden" value="put-your-email-address-here">
      <input id="subject" name="subject" type="hidden" value="put-your-subject-here">
      <input id="source-url" name="source-url" type="hidden" value="put-your-form-page-url-here">
      <fieldset>
        <legend>put-legend-here</legend>
        <label for="firstName">put-label-here:</label>
         <input type="text" id="firstName" name="firstName" size="25"/><br/>
        <label for="lastame">put-label-here:</label>
        <input type="text" id="lastame" name="lastame" 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;
  padding: 1%;
}

Example