Creating forms

9,761 views

Published on

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

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

  • Be the first to like this

No Downloads
Views
Total views
9,761
On SlideShare
0
From Embeds
0
Number of Embeds
8,044
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×