Forms, Validation

1. Forms, Validation Week 7 INFM 603

2. Announcements • Try placing today’s example in htdocs (XAMPP). This will allow you to execute examples that rely on PHP • Video What most schools don't teach • http://www.youtube.com/watch?v=nKIu9yen5nc • http://tinyurl.com/ • http://www.jsfiddle.net/ • Google Chrome App • https://chrome.google.com/webstore/detail/html-validator/cgndfbhngibokieehnjhbjkkhbfmhojo

3. Agenda • Forms • JS/CSS/HTML Separation • Form Validation • DOM

4. Separating Content from Behavior • Keep each of the following separate • Content (HTML) • Presentation (CSS) • Behavior (JavaScript) • Separating HTML and JavaScript • Use src attribute of <script> • Example: folder named Separation

5. Advantages of Separation • Simplifies HTML files (removes large segments of JavaScript code) • Functions can be cached by the browser for efficiency • Code sharing/reuse Function used by several pages can be kept in a single file

6. Use of JavaScript in Web Pages • Unobtrusive JavaScript programming paradigm specifying that JavaScript should not intrude on users accessing a web page, on HTML content, or CSS Stylesheets • Goals • Keep JavaScript code separate from HTML • Scripts are enhancements to HTML content, but the content should be available without JavaScript • You should design web pages so they operate even if JavaScript is disabled

7. Web Servers • What is a Web Server? • Installing XAMPP • http://www.apachefriends.org/en/xampp.html • Using XAMPP • Your documents live in htdocs folder • Creating a web repository for a user translates to creating a folder

8. CheckBoxes • Allow us to make a selection • Defined by using type=“checkbox” • We can tell whether an entry is selected by using the “checked” property • true  entry has been selected • Default selection by using checked=“checked” • Example: Checkboxes.html • It is used when submitting data to a server

9. Radio Buttons • Exist in groups and only one can be checked in a group • Defined by using type=“radio” • We defined the radio buttons to be in the same group by using the same name for all of them • Note: Do not use the same value for name and id • Default selection by using checked=“checked” • We access the elements using arrays • document.getElementsByName  returns array • Example: RadioButtons.html

10. Drop-Down/Scrollable Lists • Defined using the <select> tag (not the <input> tag) • <option> tag to specify possible options • To define a default choice use: selected=“selected” • The multiple attribute in <select> allows for selection of multiple items (usually displayed as a multiple-selection list) • Example: DropDownList.html • Example: ScrollableList.html • Notice you can have multiple default selections

11. Textareas • Allows user to input more than one line of information • We use the <textarea> tag • rows and cols attributes define the text area • Default text (if any) appears between the <textarea> and </textarea> tags • Example: Textarea.html

12. HTML5 Form Controls • HTML5 introduces new form controls and data verification • Let’s take a look at one example • Notice that we are also using some CSS3 properties • Example:FormElements.html, FormElements.css • Let’s see the page using different browsers

13. HTML Forms • Forms  Previous examples of forms just collected data for processing by a JavaScript program • Forms  Means by which information passes from the user to a server • name attribute • The name attribute is used by servers to retrieve data sent via form • Most of the time we will set the name and id attributes to the same value • Submit button • Sends form data to a server application • It is this special functionality that other buttons do not have • <form tag>  Two important attributes: • action indicates where the form contents will be sent • method defines how the contents will be sent • Example: searchBox.html • Look at the URL after submission

14. HTML Forms • Method  Two alternatives • post- content is sent in the body of the message • get- contents included in the URL • Example: formGet.html, getProcessing.php • Example: formPost.html, postProcessing.php • Important: You can only see the results if you have a web server running the .php files.

15. GET vs. POST • Get • Information visible as it is displayed in the URL • Limited in the amount of information it can sent • URLs associated with get can be bookmarked • Intended for operations that will not change the server state • Post • Information is not presented in the URL • No limits on amount of information it can send • Because variables are not displayed in the URL it is not possible to bookmark the page • Intended for operations that will change the server state • Try reloading a form submitted using post. Why the warning? • What google search uses? • What yahoo search uses?

16. Form Validation • Form data validation • We can validate the data associated with a form by recognizing the submit event • window.onsubmit = validateData; • validateData is a function that will check for data validity • It will return true or false • Keep in mind that JavaScript can be disabled therefore the server application must also validate the data • Example:formValidationexample • Notice the organization code(HTML, CSS, JS separate) • This example is representative of what you need to do for the project

17. Getting String Characters • The function charAt Allows us to retrieve the character associated with a particular index position in a string. Access is similar to array indexing (first character at 0) • Example • var x = "Wednesday"; • varsecondCharacter = x.charAt(1); // variable has "e"; • varlengthOfString = x.length; // variable has 9 • This function is helpful when trying to validate data • Example: charAt.html