Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Creating forms

10,169 views

Published on

The basics of creating HTML forms. From my Fundamentals of Interactive Design class.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Creating forms

  1. 1. CREATING FORMS by Ray Villalobos
  2. 2. WHAT ARE FORMS?
  3. 3. WHAT ARE FORMS?• Create interactions with server
  4. 4. WHAT ARE FORMS?• Create interactions with server• Compound tag
  5. 5. WHAT ARE FORMS?• Create interactions with server• Compound tag• Accept user input in various ways
  6. 6. FORM TAG <form action="formprocessor.php"> First name: <input type="text" name="fname"><br> <input type="submit"> </form>
  7. 7. FORM TAG <form action="formprocessor.php"> First name: <input type="text" name="fname"><br> <input type="submit"> </form>• Action Parameters tells browser where to send data
  8. 8. FORM TAG <form action="formprocessor.php"> First name: <input type="text" name="fname"><br> <input type="submit"> </form>• Action Parameters tells browser where to send data• Method tells browser to pass data as URL (GET) or in the background(POST)
  9. 9. FORM TAG <form action="formprocessor.php"> First name: <input type="text" name="fname"><br> <input type="submit"> </form>• Action Parameters tells browser where to send data• Method tells browser to pass data as URL (GET) or in the background(POST)• Enctype specifies how to encode the data
  10. 10. THE GET METHOD
  11. 11. THE GET METHOD• Passes data as a URL
  12. 12. THE GET METHOD• Passes data as a URL• Name/Value Pairs (? then name=values separated by &)
  13. 13. THE GET METHOD• Passes data as a URL• Name/Value Pairs (? then name=values separated by &)• Useful for bookmarking
  14. 14. THE GET METHOD• Passes data as a URL• Name/Value Pairs (? then name=values separated by &)• Useful for bookmarking• Limit to how much you can place in URL
  15. 15. THE GET METHOD• Passes data as a URL• Name/Value Pairs (? then name=values separated by &)• Useful for bookmarking• Limit to how much you can place in URL• Not for sensitive info
  16. 16. THE POST METHOD
  17. 17. THE POST METHOD• Sends the data as an HTTP transaction
  18. 18. THE POST METHOD• Sends the data as an HTTP transaction• Cannot be bookmarked
  19. 19. THE POST METHOD• Sends the data as an HTTP transaction• Cannot be bookmarked• More secure than GET
  20. 20. THE POST METHOD• Sends the data as an HTTP transaction• Cannot be bookmarked• More secure than GET• Does not have size limitations
  21. 21. ENCTYPE Value Description Default. Characters encoded before sent (spaces converted toapplication/x-www-form-urlencoded "+" symbols, special characters converted to ASCII/HEX)multipart/form-data No characters are encoded. Required for file uploadstext/plain Spaces are converted to "+" symbols, nothing else
  22. 22. ENCTYPE• Defines now form data is encoded for sending to server Value Description Default. Characters encoded before sent (spaces converted to application/x-www-form-urlencoded "+" symbols, special characters converted to ASCII/HEX) multipart/form-data No characters are encoded. Required for file uploads text/plain Spaces are converted to "+" symbols, nothing else
  23. 23. ENCTYPE• Defines now form data is encoded for sending to server• Only needed if method is POST Value Description Default. Characters encoded before sent (spaces converted to application/x-www-form-urlencoded "+" symbols, special characters converted to ASCII/HEX) multipart/form-data No characters are encoded. Required for file uploads text/plain Spaces are converted to "+" symbols, nothing else
  24. 24. ENCTYPE• Defines now form data is encoded for sending to server• Only needed if method is POST• Can be one of three Value Description Default. Characters encoded before sent (spaces converted to application/x-www-form-urlencoded "+" symbols, special characters converted to ASCII/HEX) multipart/form-data No characters are encoded. Required for file uploads text/plain Spaces are converted to "+" symbols, nothing else
  25. 25. INPUT name: <input name="fname"><br />
  26. 26. INPUT name: <input name="fname"><br />• Most common and versatile form element
  27. 27. INPUT name: <input name="fname"><br />• Most common and versatile form element• Manydifferent types: text, checkbox, password, radio, file, hidden, image, submit, reset,
  28. 28. INPUT name: <input name="fname"><br />• Most common and versatile form element• Manydifferent types: text, checkbox, password, radio, file, hidden, image, submit, reset,• HTML5 & Mobile: color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week
  29. 29. COMMON INPUT ATTRIBUTES
  30. 30. COMMON INPUT ATTRIBUTES • name/value: the name and values that will be sent to the action URL
  31. 31. COMMON INPUT ATTRIBUTES • name/value: the name and values that will be sent to the action URL • checked: on checkboxes/radio buttons, this displays checkbox or radio as pre-selected
  32. 32. COMMON INPUT ATTRIBUTES • name/value: the name and values that will be sent to the action URL • checked: on checkboxes/radio buttons, this displays checkbox or radio as pre-selected • src: on input type image the URL of the image
  33. 33. COMMON INPUT ATTRIBUTES • name/value: the name and values that will be sent to the action URL • checked: on checkboxes/radio buttons, this displays checkbox or radio as pre-selected • src: on input type image the URL of the image • HTML5: autofocus, autocomplete, placeholder, required
  34. 34. LABEL <label for="myname">Male</label> <input id="myname" name="name" /><br>
  35. 35. LABEL <label for="myname">Male</label> <input id="myname" name="name" /><br>• Every field should have a label
  36. 36. LABEL <label for="myname">Male</label> <input id="myname" name="name" /><br>• Every field should have a label• Helps with Usability, mobile devices
  37. 37. LABEL <label for="myname">Male</label> <input id="myname" name="name" /><br>• Every field should have a label• Helps with Usability, mobile devices• for attribute ties the text to the input field
  38. 38. LABEL <label for="myname">Male</label> <input id="myname" name="name" /><br>• Every field should have a label• Helps with Usability, mobile devices• for attribute ties the text to the input field• Makes label activate input field
  39. 39. TEXTAREA <textarea name="comments" rows="4" cols="50"></textarea>
  40. 40. TEXTAREA <textarea name="comments" rows="4" cols="50"></textarea>• Multi line text input
  41. 41. TEXTAREA <textarea name="comments" rows="4" cols="50"></textarea>• Multi line text input• Beginning and end tag.
  42. 42. TEXTAREA <textarea name="comments" rows="4" cols="50"></textarea>• Multi line text input• Beginning and end tag.• maxlength: max # of characters allowed
  43. 43. TEXTAREA <textarea name="comments" rows="4" cols="50"></textarea>• Multi line text input• Beginning and end tag.• maxlength: max # of characters allowed• Youcan use the rows and cols attribute, but usually better to define size with CSS.
  44. 44. SELECT <select name="referral"> <option>Choose...</option> <option value="fb">Facebook</option> </select>
  45. 45. SELECT <select name="referral"> <option>Choose...</option> <option value="fb">Facebook</option> </select>• Drop down list
  46. 46. SELECT <select name="referral"> <option>Choose...</option> <option value="fb">Facebook</option> </select>• Drop down list• <option> tags define individual options for dropdown
  47. 47. SELECT <select name="referral"> <option>Choose...</option> <option value="fb">Facebook</option> </select>• Drop down list• <option> tags define individual options for dropdown• Name within <option> is label, not value
  48. 48. SELECT <select name="referral"> <option>Choose...</option> <option value="fb">Facebook</option> </select>• Drop down list• <option> tags define individual options for dropdown• Name within <option> is label, not value• Value attribute on option tag sends value to action URL with name from select tag.
  49. 49. SELECT <select name="referral"> <option>Choose...</option> <option value="fb">Facebook</option> </select>• Drop down list• <option> tags define individual options for dropdown• Name within <option> is label, not value• Value attribute on option tag sends value to action URL with name from select tag.• Multiple attribute lets you select multiple items at once
  50. 50. BUTTON <button type="button">Click Me!</button>
  51. 51. BUTTON <button type="button">Click Me!</button>•A clickable button
  52. 52. BUTTON <button type="button">Click Me!</button>•A clickable button• Almost exactly like input type=submit
  53. 53. BUTTON <button type="button">Click Me!</button>•A clickable button• Almost exactly like input type=submit• type can be button, reset or submit
  54. 54. BUTTON <button type="button">Click Me!</button>•A clickable button• Almost exactly like input type=submit• type can be button, reset or submit• Can use outside of forms
  55. 55. FIELDSET
  56. 56. FIELDSET• Groups form elements togethers
  57. 57. FIELDSET• Groups form elements togethers• Drawsa box around related elements in most browsers
  58. 58. FIELDSET• Groups form elements togethers• Drawsa box around related elements in most browsers• Youuse the <legend> tag to define the fieldsets title
  59. 59. THE END

×