1 / 17

Forms, Validation

Forms, Validation. Week 7 INFM 603. 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/

wayne
Download Presentation

Forms, Validation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related