Lab 17 HTML/JS forms

In this lab, I created a webpage that has HTML/Javascript forms in which users can type into the boxes to show a message. To do this however, I first typed in the necessary starter code first. The starter code is the html tags, head tags, meta tags, body tags, and the center tags. Second, I placed in my favicon inside the head tags by typing in <link rel="icon" href="../lab_09/CSmallFavicon.png" type="image/png">. Thirdly I set the bgbody color or background color to cyan. Fourthly, I wrote heading tags in the body tags in which I wrote inside: my name, the date, Digital Design, and Lab 17. Next I typed in p tags to explain the website and disclaim the user. After that I put <br> tags to make line breaks in between the content. Afterwords, I put in two forms into the code. So to create the first form, which is just having the user fill out their name in the form, I first typed in <form name="alertform">. I next typed in "Enter your name:" as text and bolded them with the <b> tags. After that, I inputted <input class="textbox" type="text" name="yourname">. Afterwords, I typed in <input class="button" type="button" value="Go" onClick="audio(); window.alert('Hello' + ' ' + document.alertform.yourname.value); ">  </form>.  After the first form, I inserted <br> tags and typed the second form. I typed in div tags and inside those div tags I typed; <form name="forum">
<b>Name: <input class="textbox" type="text" name="name"></b> <br><br> <b>Phone Number: <input class="textbox" type="text" name="phone"></b> <br><br> <b>Email Address: <input class="textbox" type="text" name="email"></b> <br><br> <input class="button" type="button" value="Enter" onclick="audio(); window.alert('Your name is' + ' ' + document.forum.name.value + ' ' + 'with a phone number of' + ' ' + document.forum.phone.value + ' ' + 'and an email address of' + ' ' + document.forum.email.value + '. This is Wei Jian Zhen and thank you for your information!');"></form>. This second form basically creates a textbox that appears from the top of the browser and displays a message from the information gathered from the form. Furthermore, I typed in audio which makes the the pop-up/textbox make sound when click; which was <audio id="victory" src="sms-alert-1-daniel_simon.mp3" preload="auto"></audio> and javascript code into the html; inside script tags function audio() { document.getElementById("victory").play();}. Finally, I uploaded the document to the servers to become a webpage. Knowing how to use HMTL/JS forms is important to a web designer because it helps the web designer do their job and makes their users have a better user experience when using their website.

Webpage: http://techteach.us/Web2020/ZWeiJian/Labs/Lab_17/Lab17.html?yourname=w