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

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.