Presentation on theme: "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."— Presentation transcript:
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=nKIu9yen5nchttp://www.youtube.com/watch?v=nKIu9yen5nc http://tinyurl.com/ http://www.jsfiddle.net/ Google Chrome App –https://chrome.google.com/webstore/detail/html- validator/cgndfbhngibokieehnjhbjkkhbfmhojohttps://chrome.google.com/webstore/detail/html- validator/cgndfbhngibokieehnjhbjkkhbfmhojo
Agenda Forms JS/CSS/HTML Separation Form Validation DOM
Web Servers What is a Web Server? Installing XAMPP –http://www.apachefriends.org/en/xampp.htmlhttp://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
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 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?
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