Your SlideShare is downloading. ×
Class 21
Class 21
Class 21
Class 21
Class 21
Class 21
Class 21
Class 21
Class 21
Class 21
Class 21
Class 21
Class 21
Class 21
Class 21
Class 21
Class 21
Class 21
Class 21
Class 21
Class 21
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Class 21

298

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
298
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Class 21
  • 2. Finals • Final Project website is due: Midnight of Tuesday, 12/7/2010 • Compress the website into a .zip or .rar file and email it to jilee@lagcc.cuny.edu. You will get a confirmation email as soon as the instructor checks that your submission is valid. If you don’t get a confirmation email within 8 hours of submission, contact instructor by phone. 718-482-5419
  • 3. Final Project Requirements • Website at least 3 complete HTML pages navigation to other pages and back (menu) an external CSS file for styling elements a link to the Design Rationale Document a Spry element a form element • Design Rationale Document Goal, target user or audience, deployment and update plan
  • 4. Final Presentation 12/8/2010 12/15/2010 Dejesus, Carlos Akhtar, Asma Hamed, Mutaz Akil, Mohammed Pena, Stephanie De Jesus, Alba Westcott, Jessica Galindo, Wolfgang Hsu, Wei Yu Islam, Muhammad Toro, Michael Mendoza, Yessica Campos, Tony Muniz, Walter Alban, Percy Fatah, Nour Gonzales, Carla Law, Min Lowenfield, Jevon Correa-Richterman, Elizabeth Sgrizzi, Antoinette Bascom, Mark Wilson, Lisa Campos, Jimmy
  • 5. Forms • Forms are used all over the Web to – Accept information – Provide interactivity • Types of forms: – Search form, Order form, Newsletter sign-up form, Survey form, Add to Cart form, and so on… Let’s look at an example! CLICK
  • 6. Two Components of Using Forms 1. The XHTML form -- the Web page user interface and 2. The server-side processing Server-side processing works with the form data and sends e-mail, writes to a text file, updates a database, or performs some other type of processing on the server. 6
  • 7. XHTML Using Forms • <form> tag – Contains the form elements on a web page – Container tag • <input /> tag – Configures a variety of form elements including text boxes, radio buttons, check boxes, and buttons – Stand alone tag • <textarea> tag – Configures a scrolling text box – Container tag • <select> tag – Configures a select box (drop down list) – Container tag • <option> tag – Configures an option in the select box – Container tag 7
  • 8. XHTML <form> element • The form tag attributes: – action • Specifies the server-side program or script that will process your form data – method • get – default value, form data passed in URL • post – more secure, form data passed in HTTP Entity Body – name • Identifies the form – id • Identifies the form 8
  • 9. XHTML<input /> Text box • Accepts text information • Attributes: – type=“text” – name – id – size – maxlength – value 9
  • 10. XHTML<input /> Password box • Accepts text information that needs to be hidden as it is entered • Attributes: – type=“password” – name – id – size – maxlength – value 10
  • 11. XHTML<input /> Check box • Allows the user to select one or more of a group of predetermined items • Attributes: – type=“checkbox” – name – id – checked – value 11
  • 12. XHTML<input /> Radio Button • Allows the user to select exactly one from a group of predetermined items • Each radio button in a group is given the same name and a unique value • Attributes: – type=“radio” – name – id – checked – value 12
  • 13. XHTML<textarea> Scrolling Text Box • Configures a scrolling text box • Attributes: – name – id – cols – rows 13
  • 14. XHTML<select> Select List • Configures a select list (along with <option> tags) • Also known as: Select Box, Drop-Down List, Drop-Down Box, and Option Box. • Allows the user to select one or more items from a list of predetermined choices. • Attributes: – name – id – size – multiple 14
  • 15. XHTML<option> Options in a Select List • Configures the options in a Select List • Attributes: – value – selected 15
  • 16. XHTML<input /> Submit Button • Submits the form information • When clicked: – Triggers the action method on the <form> tag – Sends the form data (the name=value pair for each form element) to the web server. • Attributes: – type=“submit” – name – id – value 16
  • 17. XHTML<input /> Reset Button • Resets the form fields to their initial values • Attributes: – type=“reset” – name – id – value 17
  • 18. XHTML<input /> Button • Offers a flexible user interface • There is no default action when the button is clicked • Usually a JavaScript function is invoked when a button is clicked • Attributes: – type=“button” – name – id – value 18
  • 19. XHTML<input /> Hidden form data • This form control is not displayed on the Web page. • Hidden form fields – Can be accessed by both client-side and server-side scripting – Sometimes used to contain information needed as the visitor moves from page to page. • Attributes: – type=“hidden” – name – id – value 19
  • 20. Today’s Assignment Create a Contact page that has: • text-field • text-area • checkbox or radiobox • list/menu • Submit button
  • 21. Demo Task

×