HTML forms, HTTP, & REST

1. HTML forms, HTTP, & REST

2. HTML Forms • A composition of controls that include buttons, checkboxes, text input, etc. that are used to capture user input. • Rely on an action attribute to specify where to send the form data. • Rely on a method attribute to specify how to process the form data.

3. HTML Form action attribute • Specifies a form processing agent • Usually an HTTP URI • Could launch an email client. Useful for debugging <form name="myWebForm" action="mailto:youremail@email.com" method="post"> <input type="checkbox" /> Checkbox 1<br /> <input type="text" /> Text Field 1<br /> <input type="submit" value="SUBMIT" /> </form>

4. HTML Form method attribute • Specify the HTTP method to submit the form • Two possible values: • get • post

5. Form Controls • Types of controls: • Button • Checkbox • Radio button • Hidden Control • File Select • Text input • Menus • Others

6. Addition Info • Controls have initial values which can be specified using the value attribute. • When a form is reset using a reset input control, all inputs values will be restored to their initial value.

7. Adding Structure to forms • Some form controls automatically have labels associated with them (button) • Other form controls do not have labels (textfields, checkboxes, radio buttons, menus). • Use the <label> element to specify labels for controls that do not have implicit labels.

8. Labels • Each label element is associated with exactly one control • Use the for attribute to explicitly associate a label with a control • The forattribute value must match the id attribute of the associated control

9. Label example <label for=“fname”>First Name:</label> <input type=“text” id=“fname” name=“fname”/> or <label for=“fname”>First Name: <input type=“text” id=“fname” name=“fname”/> </label>

10. Benefits of using a <label> • When a user clicks the text inside the <label>, the associated control is automatically focused.

11. Adding structure to forms • The <fieldset> element allows developers to group related controls and labels. • The <legend> element allows developers to assign a caption to a fieldset.

12. Complete Form Example <formaction="showResponse.php?foo=bar"method="post"> <labelfor="userName">Username:</label> <inputtype="textarea"name="userName"id="userName"/> Gender: <labelfor="male">Male</label><inputtype="radio"id="male"name="sex"value="male"/> <labelfor="female">Female</label><inputtype="radio"id="female"name="sex"value="female"/> <labelfor="bi">Both</label><inputtype="radio"id="bi"name="sex"value="bi"> <fieldset> <legend>Cookies you like</legend> <labelfor="sugar">Sugar</label><inputtype="checkbox"id="sugar"name="cookiePref[]"value="sugar"/> <labelfor="oatmeal">Oatmeal</label><inputtype="checkbox"id="oatmeal"name="cookiePref[]"value="oatmeal"/> <labelfor="chocChip">Chocolate Chip</label><inputtype="checkbox"id="chocChip"name="cookiePref[]"value="chocChip"/> <labelfor="snicker">Snickerdoodle</label><inputtype="checkbox"id="snicker"name="cookiePref[]"value="snicker"/> </fieldset> <selectname="car"> <optionvalue="Ford">Ford</option> <optionvalue="Chevy">Chevy</option> <optionvalue="Hummer">Hummer</option> </select> <!-- Use this to specify POST, PUT, or DELETE HTTP Methods This requires the server look for this param being passed in --> <inputtype="hidden"name="putOrDelete"value="PUT"/> <labelfor="passwd">Password</label><inputtype="password"id="passwd"name="passwd"/> <inputtype="submit"value="Submit"/> </form>

13. Successful Controls • A successful control is “valid” for submission. • These controls have their name paired with their current value and are submitted for processing. • Any disabled control can not be successful

14. Successful Controls • All “on” checkboxes may be successful • Only one “on” radio box with the same name attribute can be successful. • Only selected values in a menu can be successful.

15. Let’s give it a try! http://lyle.smu.edu/~craley/3345/http/form.html

16. HTTP

17. HTTP Outline • HTTP Communications Protocol • HTTP Request Methods • HTTP Messages • Request Messages • Using telnet,curl, and hurl • Response Messages • Response Status Codes

18. HTTP Quick facts • HTTP – Hyper Text Transform Protocol • Invented by Tim Berners-Lee and his team • Is an applications-level protocol on top of TCP/IP

19. HTTP Communication • HTTP is a protocol where clients and servers communicate with messages. • An HTTP client (browsers) sends message requests to servers on Port 80. • HTTP Servers wait for client HTTP requests and respond with response messages.

20. HTTP Communication • The point of HTTP Communication is to access a particular resource and perform a particular action on it. • To GET the contents of the SMU webpage, you visit www.smu.edu. • People POST data to www.amazon.com and create an order when they want to buy an item.

21. HTTP Communication • The internet’s sole purpose is to get, edit, create, and delete resources (and maybe waste a lot of your time).

22. HTTP Outline • HTTP Communications Protocol • HTTP Request Methods • HTTP Messages • Request Messages • Using curl • Response Messages • Response Status Codes

23. HTTP Request Methods • HTTP1.1 defines 9 methods that indicate a desired action to be performed on a resource. Methods HEAD PUT OPTIONS GET DELETE CONNECT POST TRACE PATCH

24. HTTP Request Methods • We will only focus on 4 Methods HEADPUTOPTIONS GETDELETECONNECT POSTTRACEPATCH

25. HTTP GET • Requests a specified resource • Should only be used to retrieve data and have no other side effect

26. HTTP POST • Submits data to be processed to the identified resource • Used to create data • Used to edit data

27. HTTP PUT • Uploads a representation of the specified resource • Updates or edits a resource • Must update the entire resource. Not just parts of it.

28. HTTP DELETE • Deletes a specified resource

29. HTTP Safe Methods • Safe methods are intended for information retrieval only and do not change the state of a server. Safe Methods HEAD OPTIONS GET TRACE

30. HTTP Idempotent Methods • Idempotent – multiple identical requests should have the same effect on the server as a single request. • Idempotent doesn’t mean the response won’t be different. • Idempotent means the server state will be the same every time for multiple requests.

31. HTTP Idempotent Methods Idempotent Methods GET OPTIONS PUT HEAD DELETE TRACE

32. Not Safe or Idempotent • POST is not a safe or idempotent method!

33. HTTP Police • There are no HTTP Police to enforce whether a method is Safe or Idempotent. • The HTTP protocol nor the web server enforce this for you. • It is up to YOU the back-end developer!

34. HTTP Police • ONLY YOU can prevent GET methods from triggering server state changes!

35. HTTP Outline • HTTP Communications Protocol • HTTP Request Methods • HTTP Messages • Request Messages • Using telnet,curl, and hurl • Response Messages • Response Status Codes

36. HTTP Messages • Contain the URI aka resource, the request method (GET), and additional info.

37. HTTP Message Format • An initial line • Zero or more header lines • Message body

38. HTTP Request Message Example GET http://www.google.com/ HTTP/1.1 User-Agent: Fiddler Host: www.google.com Initial line Headers line body

39. Initial Line: Request Message • Consists of 3 parts separated by spaces: • HTTP Method name (GET,POST, etc.) • Local path of requested resource • Version of HTTP being used GET /path/to/file/index.html HTTP/1.1 1 2 3

40. Header Lines: Request Message • Header fields define additional information about the HTTP message. • Several possible request message headers, see wiki. Notable Request Headers Host Content-type Content-length Date User-Agent

41. Header Lines: Request Message • In HTTP 1.1, a client must specify a Host header. • For POST requests that include a body, a client must also specify Content-type and Content-Length

42. Message body: Request Message • Used to store data for POST, PUT, and DELETE methods.

43. HTTP Request Message Example POST http://www.google.com/ HTTP/1.1 User-Agent: Fiddler Host: www.google.com Content-type: application/x-www-form-urlencoded Content-Length: 8 name=ted Initial line Headers line body

44. HTTP Outline • HTTP Communications Protocol • HTTP Request Methods • HTTP Messages • Request Messages • Using telnet,curl, and hurl • Response Messages • Response Status Codes

45. Sending a GET request with a browser • Open your favorite browser • Paste your GET request string in the URL bar and submit it http://lyle.smu.edu/~craley/3345/http/showResponse.php?parm1=taco&parm2=beef

46. How to send a GET request with Parameters • GET requests can append a query string to the end of the requested URI URI: www.example.com URI and Query Separator: ? Query String Parameters: • Key: n1, Value: bob • Key: n2, Value: sally GET REQUEST = (URI + Separator + Query String)

47. GET Request: URI and Separator • Concatenate the URI and Separator together URI: www.example.com URI and Query Separator: ? www.example.com?

48. GET Request: Query String Query String parameters: • Key: n1, Value: bob • Key: n2, Value: sally • Create a key-value pair by concatenating the key with the value separated by an “=“ character. • n1=bob • n2=sally • Create the query string by concatenating all key-value pairs together separated by a “&” character. • n1=bob&n2=sally

49. GET Request: URI + Separator + Query String • Concatenate them all together URI: www.example.com URI and Query Separator: ? Query String Parameters: • n1 = bob • n2 = sally www.example.com?n1=bob&n2=sally

50. Using telnet: GET • $ telnet www.google.com 80 • GET / HTTP/1.1 • Host: www.google.com • <enter>