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 – Google Chrome App – validator/cgndfbhngibokieehnjhbjkkhbfmhojohttps://chrome.google.com/webstore/detail/html- validator/cgndfbhngibokieehnjhbjkkhbfmhojo

Agenda Forms JS/CSS/HTML Separation Form Validation DOM

Separating Content from Behavior Keep each of the following separate –Content (HTML) –Presentation (CSS) –Behavior (JavaScript) Separating HTML and JavaScript –Use src attribute of –Example: folder named Separation

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

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

Web Servers What is a Web Server? Installing XAMPP – Using XAMPP –Your documents live in htdocs folder –Creating a web repository for a user translates to creating a folder

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

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 9

Drop-Down/Scrollable Lists Defined using the tag (not the tag) tag to specify possible options To define a default choice use: selected=“selected” The multiple attribute in 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

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

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

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  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

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.

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?

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: formValidation example –Notice the organization code (HTML, CSS, JS separate) –This example is representative of what you need to do for the project

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"; –var secondCharacter = x.charAt(1); // variable has "e"; –var lengthOfString = x.length; // variable has 9 This function is helpful when trying to validate data Example: charAt.html