1. HTML Elements: Forms and Controls Chapter 9 B. Ramamurthy

2. Images, Tables, Forms, … You want to include images in your page? Images and img tag we used in very nicely covered in Chapter 7 You want to display information in a tabular form? Table, th(heading), tr(row), td(data cell) are discussed with examples in Chapter 8 We introduced forms that are discussed in detail in Chapter 9. When we shift from web site to an application HTML5 provides forms and controls and attributes. We will discuss forms in detail today.

3. Parts of a HTML form The first part is the form that you see on the page itself that is created using HTML markup. Forms are made up buttons, input fields, and drop-down menus collectively known as form controls used to collect information from the user. The other component of a web form is an application or script on the server that processes the information collected by the form and returns an appropriate response. It’s what makes the form work.

4. HTML Controls This is the fun part—playing with the markup that adds form controls to the page. Text entry controls Specialized text entry controls Submit and reset buttons Radio and checkbox buttons Pull-down and scrolling menus File selection and upload control Hidden controls Dates and times (HTML5) Numerical controls (HTML5) Color picker control (HTML5)

5. Understanding Hangman Web Application Two parts: HTML controls or tags describing user interface/interaction (UI/UEX) Javascript variables and function to process the request from the user and respond with answer (Request and Response)

6. HTML UI Dividers creating divisions in the layout using You can provide various attributes such as width, height, background- color, align (left, right, center) etc. Inside a div you have a form, text input, buttons, img etc. HTML elements onclick call a javascript function and pass the information users entered

7. Putting all together.html file.css file image and audio files Web browser Firefox/ Safari application Prepare/edit files interprets displays.js file Style(.css) Libraries Javascript Libraries 6/12/20167

8. JS functions Javascript “script” consists of functions. A function consists of function followed by the name of the function The statement that make up the function go next within curly brackets Example: function saySomething() { alert(“ We are learning basics of JS”); } 6/12/20168

9. Javascript Function It has variables and functions Variables define storage and name for the data user inputs Functions can have parameters or arguments from HTML UI Functions process the data and send the results (or responses) to the UI Processing statements include: if statement, for statement, random number generator Results are sent back to HTML using document.getElementById("menu1").innerHTML = (" ") document.forms[0].word1[t].value = " ";

10. Form: Text Entry Control Single line text field City Multiple-line text field Official contest entry: Tell us why you love the band. Five winners will get backstage passes! The band is totally awesome! Official contest entry: Tell us why you love the band. Five winners will get backstage passes!

11. Other types of Input Search field Email address Telephone number Location (URL)

12. Password Input Log in:

13. Data List (pre-defined options) A datalist creates a pop-up menu of suggested values for a text entry field. Education completed: <input type="text" list="edulevel" name="education">

14. Submit and Reset button