Lab: Forms and Validation In today's Lab we will be working with forms, and use forms to get information from the user. We will also use functions to validate the form's input. For your reference: Lecture notes on Forms Lecture notes on Validating Forms Create a simple form and email its data In this part, we will create a simple form about flowers. Here is a sample form on flowers. Please don't press the submit button, because it will send an e-mail to Stella's account. We will use a cgi-script eform.cgi, which already exists on puma, to email the contents of a form. Create an HTML document, and add a simple form to it. Don't forget to name your form! Your form, at this point, should only contain a text input tag for the user to type her/his name. Name this field "your_name", and give it the string "Please enter your name" as the default value. Also, add a submit button, and a reset button to your form. Alternatively, you can download the form at this stage, to save yourself some time. Test your form on the browser, before you continue! Click on the submit button. What do you expect to happen? What happened? Click on the reset button. What happened? Is it what you expected? Add an event handler so that when the user clicks on the submit button, an alert window pops up. Show any message you would like on that alert. Something like "Let's talk about flowers today!", would be fine. Where do you think this event handler should be added? If more than one places are possible, try both. Add the necessary elements so that, when the user submits the form, the data will be sent to your email account, as a message. For that, you will have to add the action and method attributes to your FORM tag, as well as one more input field for your email address. You have the choice to make the latter hidden or not. Check your form to make sure it behaves as it supposed to: open your First Class account, and see the message sent by the form! Validate the form's input In this part, we want to make sure that the user has typed in a name, before we allow the form data to be sent to your email account. This way we prevent useless email messages (i.e. those without a user name) from being generated and sent by our form. Add a validating function to your HTML document, named validateMyForm(). In which part of the document should the function validateMyForm() go? The function should check whether the input box for the user's name is empty. If so, it should produce an alert, with an informative message, and stop the form submission. Otherwise an alert is produced, thanking the user, and the submission goes ahead. Does the function need any input parameters? Does it return a value? If yes, what is the meaning of the value? Now call the validateMyForm() function. On which event(s) can we call our function? Choose one of these events and add the function call. Add to the form Now add a Select Input to your form, to specify a menu of several flowers (roses, carnations, etc) for the user to choose from. Make its default value to be a message, something like "Please choose your favorite flower". Add to your validateMyForm() function the needed Javascript to make sure the user selects something from the Select Input before you allow submission of the form. When you are done, add a radio button to let the user click "Yes" or "No" to answer the question "Do you like flowers?". Make sure that the user cannot choose both "Yes" and "No" at the same time (Hint: what should the names of the buttons be?). Add code to validateMyForm() function to check that the user has selected the answer. Formatting the email message If you have time, you can try to format the email message generated by the cgi-script. For that you will have to: create a text file (.txt) with the formatting you prefer for the generated messages tell your form that you want to use a certain template. You do that by adding one more (hidden) field to your form, named "template", whose value is the name of the .txt file. Introduction | Syllabus | Assignments | Documentation | Project