Lab 17 Reflection

     Lab 17 had us expand our skills on making sites interactive. So far we learned to make buttons and interactive iframes but in this lab we learned how to make interactive forms. A form, in our case, was a web page with multiple input boxes. Our goal was to design a web page where the user could input information, click a button to submit their form, and receive a notification confirming their submission. First we needed to create the actual text input boxes themselves. Using the <form></form> tags we set up an area where the user could input information, however, no input boxes had been created yet. To do so we used <input></input> tags. Theses tags have 2 attributes that concerned us in the lab, the type and name. Since the input tags could be used to create various forms of input, such as buttons and text areas, we needed to make sure the type was set to text. This made the form of input text boxes. The name attribute didn't change much about the functionality, rather, gave a means to retrieve the information put in the text box later on. Further in the lab it was our ambition for the notification to retrieve and display the user input data and the function we use later on implements the name of the box to get what the user typed in it. Basically, the name is treated as a variable and what the user types in the box becomes the value of the variable, be it a string or numbers. The function checks what the value of the variable/name is and displays it accordingly. We could name the text box anything but it was best we gave it a sensible name relating to the type of information the user was inputting. Once the text field was available we needed to make sure the text box had a label before it so the user knows what information to type in. This was simple; all we had to do was type the label of the text box before the input tag. Finally, we needed to create a button that the user would use to submit their information and receive a notification verifying it. This was done again using the input tags. Within the same form another pair of input tags were set up but the type was instead set to button. With making a button there was another attribute we now had to set, value. This attribute, used by buttons, determines what text will be inside the button. We could set it to anything but it was best if we used words like 'Submit' or 'Go' in our purposes. To make our button return a notification once clicked we used the onClick attribute which basically acts as an event handler function. I wrote window.alert('Message' + document.alertform.textboxname.value); for the onClick atrribute, enabling notifications once the button was clicked.
     These skills are important for a web designer because it is an important step in making websites that relay information between user and server. In this lab, while we aren't actually storing information the user inputs in a server we are enabling the user to input information in the first place. A sophisticated website contains things such as search bars and login pages, things that require user input. In order to allow the user to do this first you must set up areas the user can input the information, which these skills allow us to do. When the user is done inputting information they click a button and the site changes, whether it be a redirect to another page or elements on the page being modified by DOM. While our there isn't much change to our web page when the button is clicked the use of onClick and notifications is a stepping stone for more complex user interactivity.