1 / 34

Forms and Server-side Processing CS 6 – 3/June/2010

Forms and Server-side Processing CS 6 – 3/June/2010 . Forms. Lets visitors interact with your site Changes the nature of your site from a presentation or brochure oriented site to an interactive site Collect important information. Form Functions. Input

jerry
Download Presentation

Forms and Server-side Processing CS 6 – 3/June/2010

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 and Server-side ProcessingCS 6 – 3/June/2010

  2. Forms • Lets visitors interact with your site • Changes the nature of your site from a presentation or brochure oriented site to an interactive site • Collect important information

  3. Form Functions • Input • Text (small text fields and large “comment” fields) • Radio Buttons / Check boxes • Pull-down lists • Action (usually taken by server) • Pass the data entered to another “action” (e.g., save to a database, send via email to someone, another form that accepts additional data etc.)

  4. Building Forms • <form> and </form> surround the form elements • Form elements (which we’ll learn about soon) can only be used inside a form • Most other XHTML elements can also be used. Examples: • Tables • Paragraphs

  5. Form Tag Attributes • action – identifies a server (URL) and the program to be run on it. Can also be mailto:address • method – describes how form’s data is sent to server (see next slide) • enctype – describes how the form input is encoded before being sent

  6. Form Methods

  7. Form Example <form method="post" action="mailto:gshankar@babson.edu"enctype="text/plain"> Your Name: <input type=“text” name=“Name” size=“20” /> Your Phone:(xxx)xxx-xxxx <input type=“text” name=“Phone” size=“13” /> <input type=“submit” name=“sb” value=“Send” /> <input type=“reset” name=“rb” value=“Clear” /> </form>

  8. Form Input With <input> Tag • Text line: <input type="text" /> • Password: <input type="password" /> • Radio buttons: <input type="radio" /> • Check boxes: <input type="checkbox" /> • Files: <input type="file" /> • Hidden info: <input type="hidden" />

  9. Input Tag Attributes • type – the type of input • name – names the input tag. Names and the user-entered data are passed as pairs to the server • id – identifies the tag uniquely – very useful when writing JavaScript functions – and for formatting with CSS

  10. Input: type = "text" <p>Last Name <input type= "text" name="lastname" maxlength="100" size="20"/></p> Password type works the same way, except that value appears asterisked out as it is entered

  11. Input: type = "radio" Note: Same name implies that only one of these radio buttons can be true at a time. <p>Gender: Male <input type="radio" name="gender" value="male" /> Female <input type="radio" name="gender" value="female" checked="checked" /></p> Note: optional checked attribute indicates if one of the buttons should be checked initially

  12. Input: type = "checkbox" <p>Which products do you own (Select all that apply)<br /> <input type="checkbox" name="Q1" value="PDA" /> PDA<br /> <input type="checkbox" name="Q1" value="DeskC" /> Desktop computer<br /> <input type="checkbox" name="Q1" value="LapC" /> Laptop computer</p> Optional attribute: checked="checked"

  13. More Form Tags for User Input • <select> – Allows users to select from a menu • <textarea> – Lets user enter multi-line text with optional wrapping • <button> – Lets users select an action

  14. The Select Tag (With Option Tags) <p>In which state do you live? <select name="D1"> <option value="MA">MA</option> <option value="ME">ME</option> </select></p> Optional attribute for select: multiple="multiple" Optional attribute for select: size="#" sets number of choices visible Optional attribute for option: selected="selected"

  15. Text Area <textarea name="comments" rows="5" cols="29"> Any further comments?</textarea>

  16. Buttons With Input Tag – pre-defined actions for the form <input type="submit" value="Submit" name="Submit" /> <input type="reset" value="Reset" name="Reset" /> Pre-defined Values for specific actions

  17. Buttons – in case you want to define your own special button (like…have an image on it) <button type="submit" name="submit" value="submit"> SUBMIT <imgsrc="mailbox.gif" height="40" width="30" alt="submit_button" /> </button>

  18. Input Tag Context • Input tags must be placed inside the same types of tags that text is placed: • <p> • <h#> (# can be 1 through 6) • <table> • Placing a form in a table makes the form look better organized & aligned.

  19. Some extra controls - Tab Order • Allows user to move through the form in an order that makes sense by tabbing after each entry • Use tabindex="#" as attribute of tag • Example: • <input type="text" name="age" tabindex="3" />

  20. Another control - Keyboard Shortcuts • Allow user to move to a particular element with an ALT-letter combo • Use accesskey="letter" as attribute of tag • Example: • <input type="text" name="age" accesskey="a" />

  21. How is the data in a form processed? • Defined by “action” attribute of the form tag • May be • mailto:address • Name of program file on server • Program processes the data submitted by form • Programs are written typically written using PHP, ASP.NET, ColdFusion, or Java

  22. Encoding Type • Tells browser how to format data when method is post • Attribute is enctype="value" • Use for value: • text/plain for mailto • multipart/form-data if form uploads files • application/x-www-form-urlencoded for most other form applications

  23. Server Side Processing • When you submit, a server-side program takes over. • Perl or CGI Scripts • ASP or dot-NET Scripts • Cold-Fusion Scripts • Java Servlets • Server-side JavaScript

  24. Processing….

  25. Processing without a Back End • Can use the mailto as the form action • <form method="post" action="mailto:gshankar@babson.edu"enctype="text/plain"> • Sends the content of the form fields to an eMail address • Remember: it is NOT what your laptop (the client) can do, it is what the Server (e.g., our Web server) can do

  26. Try this! • Create this form, which mails the data to you when Submit is clicked • Save it as CS6-TryThis1.htm

  27. <form action="" method="post"> <h1>MIS 3690 Survey Form - CS 6 – Summer 2010</h1> <p> Last Name: <input type="text" name="lname" maxlength="20"/> &nbsp; &nbsp; &nbsp; First Name: <input type="text" name="fname" maxlength="20"/> </p> <p> Gender: <input type="radio" name="gender" value="male"/> Male &nbsp; &nbsp; <input type="radio" name="gender" value="female"/> Female </p>

  28. <p> What grade do you expect in MIS3690 &nbsp; <select name="grade"> <option>Select One </option> <option value="A">A</option> <option value="A-">A-</option> <option value="B+">B+</option> <option value="B">B</option> <option value="B-">B-</option> </select> </p> <p> What Topics Do Like (select all that apply) &nbsp; <input type="checkbox" name="topic" value="xhtml">XHTML</input> <input type="checkbox" name="topic" value="images">Images</input> <input type="checkbox" name="topic" value="tables">Tables</input> <input type="checkbox" name="topic" value="forms">Forms</input> </p>

  29. <p> Additional Comments: <br/> <textarea name="comments" rows="4" cols="30"></textarea> </p> <p> <input type="submit" name="go" value=“Send" /> &nbsp;&nbsp;&nbsp; <input type="reset" name="clear" value="Clear"> </p> <p>&nbsp;</p> </form>

  30. Try this …at home • Save as CS6-TryThis2.htm as ForminTable.htm • Use a table to modify the layout of niceform.htm to look like the screen on the right • This is NOT an in-class exercise. Submission is optional.

  31. Mid-term Exam Review • 4 questions – total out of 100 points. • Questions will not be equally weighted. • Questions will be 2 or three parts to each. • Form – not included • You will need to link Q1-Q2, Q2-Q3, and Q3-Q4. • Practice questions are very indicative of what you will see on the exam. • Use these as exercises to practice for the exam. • Open computer, open notes, open web – individual effort only – no collaboration permitted.

  32. Mid-term Exam Review • Coverage: XHTML (tags), Images, Lists, Tables, and CSS (formatting, positioning, background images) • Start time is 6:15 pm on Tuesday 8/Jun/2010 • End time is 7:45 pm on Tuesday 8/Jun/2010 • Exam will be about 75 minutes long. Extra time is to upload the materials to the server and test each. • After exam, starting 8:00 pm until 8:40 pm – Internet (video), Web 2.0 (videos), and discussion on how businesses use Web 2.0.

  33. CS6-TryThis2.htm – practice for exam – to be completed and submitted

  34. Upload the file to server and test it. • Upload CS6-TryThis2.htm to server and test it. • Good luck • If you have questions between now and Tuesday: • Email – gshankar@babson.edu • Phone – 781 239 4470 (Monday) • Will be in office between 10 am and 2 pm on Monday.

More Related