1. D.A. Clements, MLIS, UW Information School
Announcements
Project due date
Project 2A due Wednesday at 10pm
1-1-1 rule by Thursday night at 10pm
Extra credit due dates
Labs 8/9: Friday night at 10pm
Living Computer Museum
New quiz for anyone who got lost on the way to the museum—15 extra credit points
Only for students who registered for the tour
9/12/2018
D.A. Clements, MLIS, UW Information School

2. Announcements This week's discussion is open
Post your URL for Project 1B
Explore the class's Misinformation Sites
Post helpful comments for ten projects

3. Web Design Concepts Forms
Gathering Input from the User
Forms allow users to answer questions and provide data. You see many of them on the Web—shopping carts, registration forms, signing up for classes, and so forth.
D.A. Clements
9/12/2018
D.A. Clements, MLIS, UW iSchool

4. D.A. Clements, MLIS, UW iSchool
Objectives
Set up a form with HTML
Add form inputs:
Text fields
Radio buttons
Check boxes
Select menus
Submit buttons
Add JavaScript
Event Handlers
In this lecture, we'll explore the major categories of inputs that can be used with forms.
9/12/2018
D.A. Clements, MLIS, UW iSchool

5. A short form: Movie Picker
<h1>Movie Picker</h1>
<form id="picker" method="post" action="">
<p>
<label for="movie">Enter movie name:</label>
<input type="text" name="movie" id="movie" />
</p>
Choose movie format:
<input type="radio" name="format" id="dvd" value="dvd" />
<label for="dvd">DVD</label>
 <input type="radio" name="format" id="vhs" value="vhs" />
<label for="vhs">VHS</label>
<input type="button" name="cart" id="cart" value="Add to cart />
</form>
To begin our journey into forms, we'll use this small Web form that lets you search for a movie in either DVD or VHS format and add it to the shopping cart.
9/12/2018
D.A. Clements, MLIS, UW iSchool

6. Test the Movie Picker form
The form pops up but won't really do anything because
It's the pure HTML
No client-side or server-side scripts to put data into a database or manipulate it in any way
9/12/2018
D.A. Clements, MLIS, UW iSchool

7. D.A. Clements, MLIS, UW iSchool
A short form: Markup
<h1>Movie Picker</h1>
<form id="picker" method="post" action="">
<p>
<label for="movie">Enter movie name:</label>
<input type="text" name="movie" id="movie" />
</p>
Choose movie format:
<input type="radio" name="format" id="dvd" value="dvd" />
<label for="dvd">DVD</label>
 <input type="radio" name="format" id="vhs" value="vhs" />
<label for="vhs">VHS</label>
<input type="button" name="cart" id="cart" value="Add to cart />
</form>
Here is the markup for the form.
9/12/2018
D.A. Clements, MLIS, UW iSchool

8. D.A. Clements, MLIS, UW iSchool
Form tags
<h1>Movie Picker</h1>
<form id="picker" method="post" action="#">
<p>
<label for="movie">Enter movie name:</label>
<input type="text" name="movie" id="movie" />
</p>
Choose movie format:
<input type="radio" name="format" id="dvd" value="dvd" />
<label for="dvd">DVD</label>
 <input type="radio" name="format" id="vhs" value="vhs" />
<label for="vhs">VHS</label>
<input type="button" name="cart" id="cart" value="Add to cart />
</form>
Just like tables, start and end form tags alert the browser to the beginning and end of the form. The inputs must be nest inside these form tags. Forms may have a name as well as an ID. They can also have a method, post or get, that is used with server scripts. Action may open another page in the browser that has programming code. In our case, we are staying on the same page, staying on the form. We indicate that with #. You'll see that used with links as well when you are referring to the current Web page.
9/12/2018
D.A. Clements, MLIS, UW iSchool

9. D.A. Clements, MLIS, UW iSchool
Input tags
<h1>Movie Picker</h1>
<form id="picker" method="post" action="">
<p>
<label for="movie">Enter movie name:</label>
<input type="text" name="movie" id="movie" />
</p>
Choose movie format:
<input type="radio" name="format" id="dvd" value="dvd" />
<label for="dvd">DVD</label> 
<input type="radio" name="format" id="vhs" value="vhs" />
<label for="vhs">VHS</label>
<input type="button" name="cart" id="cart" value="Add to cart />
</form>
This input is for the text box where the user is asked to enter the movie name.
9/12/2018
D.A. Clements, MLIS, UW iSchool

10. D.A. Clements, MLIS, UW iSchool
Inputs and Labels
<h1>Movie Picker</h1>
<form id="picker" method="post" action="">
<p>
<label for="movie">Enter movie name:</label>
<input type="text" name="movie" id="movie" />
</p>
Choose movie format:
<input type="radio" name="format" id="dvd" value="dvd" />
<label for="dvd">DVD</label> 
<input type="radio" name="format" id="vhs" value="vhs" />
<label for="vhs">VHS</label>
<input type="button" name="cart" id="cart" value="Add to cart />
</form>
Notice the label tags that markup the directions to the user for this particular input: "Enter movie name:".
9/12/2018
D.A. Clements, MLIS, UW iSchool

11. D.A. Clements, MLIS, UW iSchool
Inputs and Labels
<h1>Movie Picker</h1>
<form id="picker" method="post" action="">
<p>
<label for="movie">Enter movie name:</label>
<input type="text" name="movie" id="movie" />
</p>
Choose movie format:
<input type="radio" name="format" id="dvd" value="dvd" />
<label for="dvd">DVD</label> 
<input type="radio" name="format" id="vhs" value="vhs" />
<label for="vhs">VHS</label>
<input type="button" name="cart" id="cart" value="Add to cart />
</form>
Notice that the for attribute in the label matches the id in the input tag.
9/12/2018
D.A. Clements, MLIS, UW iSchool

12. D.A. Clements, MLIS, UW iSchool
Inputs and Labels
<h1>Movie Picker</h1>
<form id="picker" method="post" action="">
<p>
<label for="movie">Enter movie name:</label>
<input type="text" name="movie" id="movie" />
</p>
Choose movie format:
<input type="radio" name="format" id="dvd" value="dvd" />
<label for="dvd">DVD</label> 
<input type="radio" name="format" id="vhs" value="vhs" />
<label for="vhs">VHS</label>
<input type="button" name="cart" id="cart" value="Add to cart />
</form>
Notice that the inputs must be within paragraph tags in order to validate with XHTML 1.0 Strict.
9/12/2018
D.A. Clements, MLIS, UW iSchool

13. D.A. Clements, MLIS, UW iSchool
Inputs and Labels
<h1>Movie Picker</h1>
<form id="picker" method="post" action="">
<p>
<label for="movie">Enter movie name:</label>
<input type="text" name="movie" id="movie" />
</p>
Choose movie format:
<input type="radio" name="format" id="dvd" value="dvd" />
<label for="dvd">DVD</label> 
<input type="radio" name="format" id="vhs" value="vhs" />
<label for="vhs">VHS</label>
<input type="button" name="cart" id="cart" value="Add to cart />
</form>
"Choose movie format:" is simply text on the page, an additional instruction to the user.
9/12/2018
D.A. Clements, MLIS, UW iSchool

14. D.A. Clements, MLIS, UW iSchool
Inputs and Labels
<h1>Movie Picker</h1>
<form id="picker" method="post" action="">
<p>
<label for="movie">Enter movie name:</label>
<input type="text" name="movie" id="movie" />
</p>
Choose movie format:
<input type="radio" name="format" id="dvd" value="dvd" />
<label for="dvd">DVD</label> 
<input type="radio" name="format" id="vhs" value="vhs" />
<label for="vhs">VHS</label>
<input type="button" name="cart" id="cart" value="Add to cart />
</form>
The next input and label are for the first radio button. In this case, the label appears after the input tag. It doesn't matter what order they are in because the label tag's for attribute links the label and the input field. We need to link them for accessibility purposes. If someone has a visual impairment and accesses the Web using a screen reader, which reads the screen out loud to them. The screen readers the label. If the user types something, the screen reader knows it goes with that input because of the for attribute in the label.
9/12/2018
D.A. Clements, MLIS, UW iSchool

15. D.A. Clements, MLIS, UW iSchool
Inputs and Labels
<h1>Movie Picker</h1>
<form id="picker" method="post" action="">
<p>
<label for="movie">Enter movie name:</label>
<input type="text" name="movie" id="movie" />
</p>
Choose movie format:
<input type="radio" name="format" id="dvd" value="dvd" />
<label for="dvd">DVD</label> 
<input type="radio" name="format" id="vhs" value="vhs" />
<label for="vhs">VHS</label>
<input type="button" name="cart" id="cart" value="Add to cart />
</form>
Notice again that the label's for and the input's id match and in the case of radio buttons, so does the value. Each radio button in a set must have a different value.
9/12/2018
D.A. Clements, MLIS, UW iSchool

16. D.A. Clements, MLIS, UW iSchool
Inputs and Labels
<h1>Movie Picker</h1>
<form id="picker" method="post" action="">
<p>
<label for="movie">Enter movie name:</label>
<input type="text" name="movie" id="movie" />
</p>
Choose movie format:
<input type="radio" name="format" id="dvd" value="dvd" />
<label for="dvd">DVD</label> 
<input type="radio" name="format" id="vhs" value="vhs" />
<label for="vhs">VHS</label>
<input type="button" name="cart" id="cart" value="Add to cart />
</form>
Looking at the next one in the set of radio buttons, we can see that the type is once again radio, but in this case the for, id, and value are all "vhs".
9/12/2018
D.A. Clements, MLIS, UW iSchool

17. D.A. Clements, MLIS, UW iSchool
Sets of Radio Buttons
<h1>Movie Picker</h1>
<form id="picker" method="post" action="">
<p>
<label for="movie">Enter movie name:</label>
<input type="text" name="movie" id="movie" />
</p>
Choose movie format:
<input type="radio" name="format" id="dvd" value="dvd" />
<label for="dvd">DVD</label> 
<input type="radio" name="format" id="vhs" value="vhs" />
<label for="vhs">VHS</label>
<input type="button" name="cart" id="cart" value="Add to cart />
</form>
The two radio buttons are kept together as a set because they have the same name. Radio buttons are the only input where you want the name and id to be different!
9/12/2018
D.A. Clements, MLIS, UW iSchool

18. D.A. Clements, MLIS, UW iSchool
Button inputs
<h1>Movie Picker</h1>
<form id="picker" method="post" action="">
<p>
<label for="movie">Enter movie name:</label>
<input type="text" name="movie" id="movie" />
</p>
Choose movie format:
<input type="radio" name="format" id="dvd" value="dvd" />
<label for="dvd">DVD</label> 
<input type="radio" name="format" id="vhs" value="vhs" />
<label for="vhs">VHS</label>
<input type="button" name="cart" id="cart" value="Add to cart />
</form>
Finally, we come to the button input. Note that the name and id are the same.
9/12/2018
D.A. Clements, MLIS, UW iSchool

19. D.A. Clements, MLIS, UW iSchool
Button inputs
<h1>Movie Picker</h1>
<form id="picker" method="post" action="">
<p>
<label for="movie">Enter movie name:</label>
<input type="text" name="movie" id="movie" />
</p>
Choose movie format:
<input type="radio" name="format" id="dvd" value="dvd" />
<label for="dvd">DVD</label> 
<input type="radio" name="format" id="vhs" value="vhs" />
<label for="vhs">VHS</label>
<input type="button" name="cart" id="cart" value="Add to cart" />
</form>
The value for a button is the text that appears on the button.
9/12/2018
D.A. Clements, MLIS, UW iSchool

20. D.A. Clements, MLIS, UW iSchool
Select boxes
<p> <label for="gradprogram">Select your graduate program</label> <select name="gradprogram" size="1" id="gradprogram"> <option value="mlis" selected="selected">MLIS</option> <option value="msim">MSIM</option> <option value="other">Other</option> </select> </p>
This type of input isn't illustrated in the Movie picker. Pause the video and go try it out on the course Web site if you haven't already!
9/12/2018
D.A. Clements, MLIS, UW iSchool

21. D.A. Clements, MLIS, UW iSchool
Submit buttons
Sends the user data to a JavaScript or Server-Side script:
<p>
<input type="submit" name="submitform" id="submitform"
value="Submit Form" />
</p>
Nothing happens with HTML alone.
Submit buttons are a special type of button. Notice that the type is submit. The label on the button is "Submit Form".
9/12/2018
D.A. Clements, MLIS, UW iSchool

22. Submit buttons and form tags
<h1>Movie Picker</h1>
<form id="picker" method="post" action="#">
<p>
<label for="movie">Enter movie name:</label>
<input type="text" name="movie" id="movie" />
</p>
Choose movie format:
<input type="radio" name="format" id="dvd" value="dvd" />
<label for="dvd">DVD</label>
 <input type="radio" name="format" id="vhs" value="vhs" />
<label for="vhs">VHS</label>
<input type="button" name="cart" id="cart" value="Add to cart />
</form>
Remember the start form tag? When a Submit button is clicked, the method and action listed in the start form tag are executed. If action indicates another page, that's where it goes. The method tells how the user data will be sent for processing. That's outside the scope of this class so we won't go any farther with that. Just know that the submit button activates the method and action in the form tag.
9/12/2018
D.A. Clements, MLIS, UW iSchool

23. Events Cause Processing
After drawing a page, browsers sit idle waiting for something to happen … when user gives input, it cause events
Event types
onclick
onchange
onmouseover
onsubmit
Something else for you to know as just general background for Web design: Events can trigger JavaScripts. Events include clicking on a button, changing the value in a text box, mousing over something, or clicking the submit button.
9/12/2018
D.A. Clements, MLIS, UW iSchool

24. D.A. Clements, MLIS, UW iSchool
Test the Smileys form
Smileys…
This one actually does something!
JavaScripts respond to user events
The Smileys form demonstrates JavaScript attached to a form.
9/12/2018
D.A. Clements, MLIS, UW iSchool

25. Emoticons = Emotional Icons
:-) Smile or Happy :-( Frown or Sad ;-) Winking :-D Laughter :-C Very, very sad D-: Annoyed, shocked or scared
:-p “Raspberry" or 'tongue in cheek’ :-S Confused :-/ Doubtful or confused :-| Blank O:O_O Surprised or shocked
Sideways
Just for fun, here are some more emoticons. They're all read sideways, in contrast to
9/12/2018
D.A. Clements, MLIS, UW iSchool

26. D.A. Clements, MLIS, UW iSchool
Asian Emoticons
(^_^) Laughing
(>_<)> Troubled
(^_^;) Troubled
(ToT) Crying
m(_ _)m Apologising
(^^;) Shy
(???) Grinning
(???)/ Joyful
(???;) Surprised
(#^.^#) Shy
(*´?`*) Infatuation
(??;) Worried
(*^?^*) Joyful
(^?^) Laughing
Sideways
9/12/2018
D.A. Clements, MLIS, UW iSchool

27. D.A. Clements, MLIS, UW iSchool
Asian Emoticons
(^_^) Laughing
(>_<)> Troubled
(^_^;) Troubled
(ToT) Crying
m(_ _)m Apologising
(^^;) Shy
(???) Grinning
(???)/ Joyful
(???;) Surprised
(#^.^#) Shy
(*´?`*) Infatuation
(??;) Worried
(*^?^*) Joyful
(^?^) Laughing
Sideways
9/12/2018
D.A. Clements, MLIS, UW iSchool

28. D.A. Clements, MLIS, UW iSchool
Asian Emoticons
(^_^) Laughing
(>_<)> Troubled
(^_^;) Troubled
(ToT) Crying
m(_ _)m Apologising
(^^;) Shy
(???) Grinning
(???)/ Joyful
(???;) Surprised
(#^.^#) Shy
(*´?`*) Infatuation
(??;) Worried
(*^?^*) Joyful
(^?^) Laughing
Sideways
9/12/2018
D.A. Clements, MLIS, UW iSchool

29. D.A. Clements, MLIS, UW iSchool
Asian Emoticons
(^_^) Laughing
(>_<)> Troubled
(^_^;) Troubled
(ToT) Crying
m(_ _)m Apologising
(^^;) Shy
(???) Grinning
(???)/ Joyful
(???;) Surprised
(#^.^#) Shy
(*´?`*) Infatuation
(??;) Worried
(*^?^*) Joyful
(^?^) Laughing
Right-side up!
9/12/2018
D.A. Clements, MLIS, UW iSchool

30. Try the Viking Names form
Another form powered by JavaScript
Here is another form that is powered by the JavaScript behind it.
9/12/2018
D.A. Clements, MLIS, UW iSchool

31. D.A. Clements, MLIS, UW iSchool
Summary
Set up a form with HTML
Add form inputs:
Text fields
Radio buttons
Check boxes
Select menus
Submit buttons
Add JavaScript
Event Handlers
In this lecture, we'll explore the major categories of inputs that can be used with forms.
9/12/2018
D.A. Clements, MLIS, UW iSchool

32. JavaScript Storyteller Project 2B
Putting a big project together
D.A. Clements
I'm not going to dump you into the deep end of the programming swimming pool. Instead, this project will walk you through the programming. Caution: It does include some string methods you haven't seen before but they're really cool and I give you the code for them. In fact, I pretty much give you the code for everything in this project! The more you understand the concepts, the easier this project will be. With that in mind, I'll go through some of the trickier functions for this project line by line so you can understand what they are doing and then I'll show you how to call them.
9/12/2018
D.A. Clements, MLIS, UW iSchool

33. D.A. Clements, MLIS, UW iSchool
Objectives
Understand how a larger project is built from the basic programming concepts
Understand how to declare multiple functions
Understand how to call functions from
Event handlers
Other functions
In this class, you've worked extensively with short scripts. The intent of this project is to show you how a longer program with several functions is structured so that they all work together. You will learn how to call functions in lots of different ways.
The project will also give you more experience with the concepts common to all programming languages, especially assignment statements, functions, conditionals, and arrays.
9/12/2018
D.A. Clements, MLIS, UW iSchool

34. D.A. Clements, MLIS, UW iSchool
Small programming modules that can be called as needed
Functions
This project has a lot of functions. Some of them you call every time you have a user-supplied word that needs to be capitalized or you have a user-supplied word that needs "a" or "an" in front of it.
You'll also call the entire program from the submit button. So lots of different functions!
9/12/2018
D.A. Clements, MLIS, UW iSchool

35. Passing Values to Functions
Definition syntax
function name(parameter) {
//statement body
x = x * parameter; }
Call syntax
onclick="name(argument)"
For more discussion of function syntax, see the Module 8 Review lecture.
9/12/2018
D.A. Clements, MLIS, UW iSchool