Working with HTML Forms

Forms in HTML are a very important topic. They provide the primary means to get input back from the users of our sites. Functional forms would have two parts. The actual HTML form styled with CSS, and then some code running on a server that the form data would get sent to. The Server part is very important to building a working form, but is beyond the scope of this course. We will be focusing on the HTML and CSS part of building forms. Our form will not do much when submitted, and that's ok.

Activity Directions

1. MDN Forms article

   The Mozilla Developer Network (MDN) is a great resource for learning more about working with the Web. To begin learning about forms complete this tutorial Your First Form on MDN.

   Create a file in your Glitch project called forms.html where you will complete the activity above.

2. Functional Forms

   Our form currently doesn't do anything (or maybe even gives you an error) if you submit it. If you would like it to do something we need to add a bit of code to your project.

   Before your form let's add an element to hold a success message when the form has been submitted. This element will be empty and invisible until the form is submitted...then we will use some Javascript to change it. Add a <div> element with an id="feedback" above your form element.

   <div id="feedback"></div>
   

   The exercise had you create a <style> element to hold the styling it wanted for the form. Add the following CSS to that below the other styles.

   #feedback {
       background-color: antiquewhite;
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       padding: .5em;
       /* make this element invisible until we are ready for it */
       display: none;
           
   }
   .moveDown {
       margin-top: 3em;
   }
                       

   Finally below your form element add the following code:

   <script>
       // get the feedback div element so we can do something with it.
       const feedbackElement = document.getElementById('feedback');
       // get the form so we can read what was entered in it.
       const formElement = document.forms[0];
       // add a 'listener' to wait for a submission of our form. When that happens run the code below.
       formElement.addEventListener('submit', function(e) {
           // stop the form from doing the default action
           e.preventDefault();
           // set the contents of our feedback element to a message letting the user know the form was submitted successfully. Notice that we pull the name that was entered in the form to personalize the message!
           feedbackElement.innerHTML = 'Hello '+ formElement.user_name.value +'! Thank you for your message. We will get back with you as soon as possible!';
           // make the feedback element visible.
           feedbackElement.style.display = "block";
           // add a class to move everything down so our message doesn't cover it.
           document.body.classList.toggle('moveDown');
       });
   </script>
                       

   If everything is working correctly you should see a message appear at the top of the form upon submission.

   The code above is something we have not seen before. It is Javascript. I added lots of comments if you want to try and understand what is going on. Javascript can be used to make our page more interactive, to change based on user actions, but is quite different from HTML and CSS. Don't worry if it doesn't make sense. The purpose of this class is not to teach Javascript, but I wanted to give you a small introduction...and forms are more fun if they do something!

3. Continue learning

   We have just scratched the surface with forms. The next two steps in the MDN tutorial are also great and will teach you much more about the details of working with forms. You do not have to complete them, but spend some time reviewing the form elements they introduce.

4. Publish

   Publish your site and submit the link to your forms.html to Ilearn.