Exercise: More HTML

Class Exercises

By now you should have covered a LOT of content, especially about forms, and it’s time to put some of it to work.

Exercise 1: Basic form elements

  1. Create a new html file named ‘form1.html’.
  2. In the <body> of your file, create <header> tags and enter the words “Form Practice” between them.  Use css (internal is fine) to set the font-size of your <header> tags to 24px.
    • Feel free to get creative (set a background color, change the default font color, etc).
  3. Create a <main> tag below the <header> tags.
  4. Create a <form> within the <main> section.
    • Set the action of the form to “showme.html” (action=”showme.html”) and the method to “get”.
  5. Add a standard text input field to the form with both ‘name’ and ‘id’ set to “firstName” (id=”firstName”  name=”firstName”).
  6. Add a second text input field with id=”lastName” and name=”lastName”.
  7. Add a third text input for email.
  8. Add a textArea field and set the id, name, and label to ‘comments’.
  9. Create labels for each text field. Be sure and use the label element as in <label for="firstName">First Name:</label>
  10. Add a submit button.
  11. Create a new html file named ‘showme.html’ and save it into the same folder. This file will receive the content that you post (although it won’t actually do anything with it).
  12. Save ‘form1.html’ and open it in a browser. Fill out the fields, and click submit. If everything works properly, the ‘showme.html’ file should appear. Take a look at the URL address of your browser. You should be able to see all of the information that you just submitted, appended to ‘showme.html’.
  13. To show the kind of things we will learn to do later in this course, let’s take this exercise a bit further. Add a second form that matches the screen capture below.
  14. Fill out the form and submit it. If you do everything right, the target URL should take the four data elements and, with a little help from Javascript, integrate them into two short sentences.

Exercise 2: More complex form elements

  1. Create a new file named ‘form2.html’ by using ‘Save as…’ on your existing ‘form1.html’ file. 
  2. Delete all content between the form tags, except for the submit button.
  3. Create a dropdown select box with at least three items.
  4. Create an autocomplete box based on something that interests you.
  5. Create a fieldset with at least three radio buttons.
  6. Create a number input type.
    • Feel free to use the example from the form attribute page but modify it to become something original.
  7. Save your document, submit it and, once again, take a look at the url to see what the content looks like.

Exercise 3: Even more complex Form elements

  1. Create a new file named ‘form3.html’ by using ‘Save as…’ on your existing ‘form2.html’ file. 
  2. Delete all content between the form tags, except for the submit button.
  3. Add a slider input to your form.
    • In this case you can follow the form attribute page’s example verbatim. 
    • Use the javascript they provide for visual feedback by placing it within <script> tags at the bottom of your document. 
    • Test it. If everything works properly you should be able to see the values as you move the slider.
  4. Time for a challenge. Add a color picker  (that part is easy). Now think back to the JavaScript used to show feedback for the slider. Try to come up with a way to provide visual feedback for the colors that you choose! If you approach this task logically and with a sense of fun, it may not be that hard!

Exercise 4: Javascript and Form elements

Later in this course we will learn a great deal about how javascript can do things with form data, such as giving feedback, accessing additional information, changing the look of the webpage, etc. Two main points that you should take away from this exercise is that

  • javascript only cares about the form elements themselves and has no need for the <form> or action tags and
  • forms provide a useful gateway for user interaction.

We are going to make this one REALLY easy.  Simply paste the code below into an EMPTY document, save it as jform.html, and put it to the test. 

Basically, all we have done here is provide one text field with the id tag of ‘name’ and a button with the id tag of ‘clickme’. Now take a look at the javascript (between the <script> tags).

  1. Create a new file called ‘jform.html’.
  2. Copy the code below and paste it into your blank file.
    • Basically, all we have done here is added one text field with the id tag of ‘name’ and a button with the id tag of ‘clickme’.
  3. Now we will look at the javascript (located between the <script> tags). First, we see variables that use ‘document.queryselector’ to select ‘#name’ (the text field) and ‘#clickme’ (the button).
  4. Then we see a function named ‘getVal’ that grabs the value of ‘#name’ and sends an alert message. 
  5. The final line, whichBut.onclick = getVal;, calls the function. 
  6. This is a very minimal use of javascript and forms but we have to start somewhere :-).  If you are feeling ambitious, try adding “hello” to the feedback.  If you are even more ambitious, try creating a space such as a span or div tag where the information entered into the form will appear on the page. You may have to search ahead in the workbook or elsewhere to accomplish this step!
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>J form test</title>

</head>
<body>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
<button id="clickme">value</button>

<script>
// step 1. on the next two lines we tie IDs to variables
var formVal = document.querySelector('#name');
var whichBut = document.querySelector("#clickme");

// Here we create the getVal function
function getVal() {
alert (formVal.value);
}

//Here we activate the getVal function whenever whichBut is clicked
 whichBut.onclick = getVal;
</script>
</body>
</html>